当前位置：网站首页>Query commodity cases (operate data with array addition method) / key points

Query commodity cases (operate data with array addition method) / key points

2022-07-25 23:27:00 【Dragon eyes】

Code running rendering

Please add a picture description

Case description

Case title
Be careful ： If you query the only element in the array , use some More appropriate , Because it finds this element , It's not a cycle , More efficient
stay forEach and filter Inside return true The iteration will not be terminated
stay some Meet inside return true Will terminate the iteration （ Traverse ）, Iteration is more efficient

Case implementation code 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> table {
       width: 400px; border: 1px solid #000; border-collapse: collapse; margin: 0 auto; } td, th {
       border: 1px solid #000; text-align: center; } input {
       width: 50px; } .search {
       width: 600px; margin: 20px auto; } </style>
</head>

<body>
    <div class="search">
         Inquire according to the price : <input type="text" class="start"> - <input type="text" class="end"> <button class="search-price"> Search for </button>  Query by commodity name : <input type="text" class="product"> <button class="search-pro"> Inquire about </button>
    </div>
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th> The product name </th>
                <th> Price </th>
            </tr>
        </thead>
        <tbody>


        </tbody>
    </table>
    <script> //  Use the new array method to manipulate data  var data = [{
       id: 1, pname: ' millet ', price: 3999 }, {
       id: 2, pname: 'oppo', price: 999 }, {
       id: 3, pname: ' glory ', price: 1299 }, {
       id: 4, pname: ' Huawei ', price: 1999 }, ]; // 1.  Get the corresponding element  var tbody = document.querySelector('tbody'); var search_price = document.querySelector('.search-price'); var start = document.querySelector('.start'); var end = document.querySelector('.end'); var product = document.querySelector('.product'); var search_pro = document.querySelector('.search-pro'); //  Call the default first data, Prevent loading without data  setData(data); //  Render the data to the page  function setData(mydata) {
       //  Empty first tbody The data in it  tbody.innerHTML = ''; mydata.forEach(function(value) {
       // console.log(value); var tr = document.createElement('tr'); tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>'; tbody.appendChild(tr); }); } // 3.  Query goods by price  //  When we hit the button , We can filter the objects in the array according to our commodity price  search_price.addEventListener('click', function() {
       var newData = data.filter(function(value) {
       return value.price >= start.value && value.price <= end.value; }) console.log(newData); //  Render the filtered objects to the page  setData(newData); }); // 4.  Find products by product name  //  If you query the only element in the array ,  use some More appropriate , Because it finds this element , It's not a cycle , More efficient ] search_pro.addEventListener('click', function() {
       var arr = []; // because some The output is Boolean , Let's define an array here  data.some(function(value) {
       if (value.pname == product.value) {
       // console.log(value); arr.push(value); // Add to arr In this array  return true; // It must be written here true } }); //  Render the data to the page  setData(arr); }) </script>
</body>

</html>
原网站

版权声明
本文为[Dragon eyes]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207190503503142.html

边栏推荐

猜你喜欢

随机推荐