как сделать фильтрация json данных на jquery

Question

Всем привет! Есть такой код, вывожу товары из json, как сделать так чтобы фильтрация работала? По цене и по Популярности

     Вот так выглядит HTML    
       <!DOCTYPE html>
             <html lang="en">
            <head>
              <meta charset="UTF-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>Document</title>
                     </head>
                      <body>
            <div class="uk-width-auto@s uk-first-column">
             <label class="uk-form-label">Сортировать по:  </label>
              <a class="sort active"> Цене <span> 
            </span>
             </a>
           <a href="#" class="sort"> Популярности </a>
           </div>
                                      <div class="product-table-block">
                                        <table class="product-table">
                                            <thead>
                                                <tr>
                                                    <th>Название</th>
                                                    <th class="changing-visible active">Диаметр</th>
                                                    <th class="changing-visible active">Длина</th>
                                                    <th class="changing-visible active">ГОСТ</th>
                                                    <th class="changing-visible">ТИП</th>
                                                    <th class="changing-visible">Размер</th>
                                                    <th class="changing-visible active">Марка 
                                                    стали</th>
                                                    <th colspan="2">Цена</th>
                                                </tr>
                                            </thead>
                                            <tbody id="goods">
                                            </tbody>
                                        </table>
                                    </div>
              <script src="../js/jquery.min.js" type="text/javascript"></script>
             <script src="../js/script.js" type="text/javascript"></script>
               </body>
                 </html>

Вот Jquery

         $('document').ready(function(){
            loadGoods();
        });
        
        function loadGoods() {
            //загружаю товары на страницу
            $.getJSON('goods.json', function (data) {
                //console.log(data);
                var out = '';
                for (var key in data){
                    out+='<tr>';
                    out+='<td>'+'<a class="product-table__title">'+data[key]['name']+'</a>'+'</td>';
                    out+='<span class="product-table__badge">'+data[key]['popular']+'</span>';
                    out+='<td class="changing-visible active">'+data[key]['diametr']+'</td>';
                    out+='<td class="changing-visible active">'+data[key]['dlina']+'</td>';
                    out+='<td class="changing-visible active">'+data[key]['gost']+'</td>';
                    out+='<td class="changing-visible">'+data[key]['tip']+'</td>';
                    out+='<td class="changing-visible">'+data[key]['razmer']+'</td>';
                    out+='<td class="changing-visible active">'+data[key]['marka-stali']+'</td>';
                    out+='<td>';
                    out+='<div class="price">'+data[key]['cena-tonna']+'<span class="suffix">/ 
        тонна</span>'+'</div>';
                    out+='<div class="price">'+data[key]['cena-metr']+'<span class="suffix">/ 
        метр</span>'+'</div>';
                    out+='</td>';
                    out+=' <td width="10%" style="white-space:nowrap">';
                    out+='  <button class="uk-button border-btn" uk-toggle="target: 
        #oneClickModal">Купить в 1 клик</button>';
                    out+=' </td>';
                    out+='</tr>';
                }
                $('#goods').html(out);
            })
        }

Данные JSON

           {
        "11292" : {
        "name" : "Арматура А1 А240 10 мм",
        "popular" : "Популярный товар",
        "diametr" : "10",
        "dlina" : "6, 11.7, 12, бухты",
        "gost" : "5781-82",
        "tip" : "",
        "razmer" : "",
        "marka-stali" : "Ст3кп, Ст3пс, Ст3сп",
        "cena-tonna" : "45 490 тг.",
        "cena-metr" : "28 тг."
         },
         "11293" : {
        "name" : "Арматура А1 А240 10 мм",
        "popular" : "Популярный товар",
        "diametr" : "10",
        "dlina" : "6, 11.7, 12, бухты",
        "gost" : "5781-82",
        "tip" : "",
        "razmer" : "",
        "marka-stali" : "Ст3кп, Ст3пс, Ст3сп",
        "cena-tonna" : "45 490 тг.",
        "cena-metr" : "28 тг."
         },
         "11294" : {
        "name" : "Арматура А1 А240 10 мм",
        "popular" : "Популярный товар",
        "diametr" : "10",
        "dlina" : "6, 11.7, 12, бухты",
        "gost" : "5781-82",
        "tip" : "",
        "razmer" : "",
        "marka-stali" : "Ст3кп, Ст3пс, Ст3сп",
        "cena-tonna" : "45 490 тг.",
        "cena-metr" : "28 тг."
         },
        "11295" : {
        "name" : "Арматура А1 А240 10 мм",
        "popular" : "Популярный товар",
        "diametr" : "10",
        "dlina" : "6, 11.7, 12, бухты",
        "gost" : "5781-82",
        "tip" : "",
        "razmer" : "",
        "marka-stali" : "Ст3кп, Ст3пс, Ст3сп",
        "cena-tonna" : "45 490 тг.",
        "cena-metr" : "28 тг."
         },
        "11296" : {
        "name" : "Арматура А1 А240 10 мм",
        "popular" : "Популярный товар",
        "diametr" : "10",
        "dlina" : "6, 11.7, 12, бухты",
        "gost" : "5781-82",
        "tip" : "",
        "razmer" : "",
        "marka-stali" : "Ст3кп, Ст3пс, Ст3сп",
        "cena-tonna" : "45 490 тг.",
        "cena-metr" : "28 тг."
        }
       }

БЛОГ НА HUSL

как сделать фильтрация json данных на jquery

Ответы (0 шт):