Node_Hw1_select+order

In this example below you will see how to do a Node_Hw1_select+order with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by barbo1942, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright barbo1942 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Node_Hw1_select+order</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<h2>排序項目與方式</h2>
<div class="input-group mt-3">
  <select class="form-control mr-2" name="select" id="select">
    <option value="title">排序項目</option>
    <option value="title">稱謂</option>
    <option value="age">年齡</option>
    <option value="weight">體重</option>
    <option value="height">身高</option>
  </select>
  <select class="form-control mr-2" name="order" id="order">
    <option value="ascending">排序方式</option>
    <option value="ascending">正序</option>
    <option value="descending">倒序</option>
  </select>
</div>
<ul class="mt-3" id="list"></ul>
<pre id="db"></pre>
  <script src='https://www.gstatic.com/firebasejs/4.9.1/firebase.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/barbo1942/node_hw1_selectorder-YeZOej */
body {
  margin: 20px;
  background: linear-gradient(#c1d38b, #e9fcb0, #fff);
}

ul {
  background-color: rgba(255, 255, 255, 0.5);
  padding-top: 5px;
  padding-bottom: 10px;
}
ul li {
  margin-top: 5px;
}


/*Downloaded from https://www.codeseek.co/barbo1942/node_hw1_selectorder-YeZOej */

var config = {
  apiKey: "AIzaSyDQHIeCZD0ZwXu6HkKL9n-JOCLKZlVmzYY",
  authDomain: "todos-d85a9.firebaseapp.com",
  databaseURL: "https://todos-d85a9.firebaseio.com",
  projectId: "todos-d85a9",
  storageBucket: "todos-d85a9.appspot.com",
  messagingSenderId: "136044664010"
};
firebase.initializeApp(config);

var data = {
    "father":{
        "title": "father",
        "age": 44,
        "weight": 88,
        "height": 178
    },
    "mom":{
        "title": "mom",
        "age": 42,
        "weight": 66,
        "height": 166
    },
    "son":{
        "title": "son",
        "age": 13,
        "weight": 40,
        "height": 133
    },
    "daughter":{
        "title": "daughter",
        "age": 8,
        "weight": 35,
        "height": 110
    }
}
var family = firebase.database().ref('family')
// family.set(data)
var db = document.getElementById('db')
var select = document.getElementById('select')
var list = document.getElementById('list')
var order = document.getElementById('order')

//db content
family.on("value",function (snapshot) {  
  db.textContent = JSON.stringify(snapshot.val(),null,3)
})

// obj轉arr 因為arr有reverse()功能
var obj_arr = function(obj){
  var arr = []
  obj.forEach(function (item) {  
    arr.push(item.val())
  })
  return arr
}

//取得初始資料
var get_data = function (select,order) {  
    family.orderByChild(select.value).on('value',function (snapshot) {  
        // 物件轉陣列
        snapshot = obj_arr(snapshot)
        if(order.value=="descending"){
          snapshot = snapshot.reverse()
        }
        console.log(snapshot)
        // 陣列串法
        var str = "";
        snapshot.forEach(function (item) {  
          str += `<li>${item.title}: ${item[select.value]}</li>`
        })
        list.innerHTML = str
   })
}

get_data(select,order)


// 監聽一:排序項目
select.addEventListener('change',function (e) {  
  console.log(select.value)
  console.log(order.value) 
  get_data(select,order)
})

 // 監聽二:排序方式
order.addEventListener('change',function (e) {  
  console.log(select.value)
  console.log(order.value) 
  get_data(select,order)
})

//物件串法
  // var str = ""
  // snapshot.forEach(function (item) {  
  //   // console.log(item.val())
  //   // str += "<li>"+item.key+" "+item.val()[select.value]+"</li>";
  //   str += `<li>${item.key}: ${item.val()[select.value]}</li>`;
  // })

Comments