Ajax jquery pobieranie listy na podstawie selecta

Question

Muszę pobrać dane z pliku JSON Ajaxem i wyświetlić listę produktów. Następnie po zmianie selecta musi się zmienić lista produktów. Czy da się zrobić wszystko jQuery? Czy po zmianie selecta znowu mam pobierać nową listę produktów?

  <form class="generator">
    <label class="generator__input-name">Sortuj:
      <select class="generator__select" name="gender">
        <option value="recommended" selected>Rekomendowane</option>
        <option value="saleout">Wyprzedaż</option>
        <option value="bestseller">Bestseller</option>
        <option value="promotion">Promocja</option>
        <option value="new">Nowość</option>
      </select>
    </label>
  </form>

$(document).ready(function() {

$.getJSON( "products.json", function( data ) {

    var items = [];
    $.each( data, function( key, val ) {

      var nameOfProduct = val.prod_name;
      var priceOfProduct = val.prod_price;
      var statusOfProduct = val.prod_status;

      items.push( "<li>" +nameOfProduct + ' ' + priceOfProduct + "</li>" );
    });
   
    $( "<ul/>", {
      "class": "products_list",
      html: items.join( "" )
    }).appendTo( "body" );
  });


  $(".generator__select").change(function(){
    var filter = $('.generator__select').val(); 
       console.log(filter); 

<--tu pobieram wartość z selecta i nie wiem co dalej
   });
  });

W ogóle to czy wyświetlenie tej listy poprzez push i appendTo jest prawidłowe?

Answer 1

Spokojnie wszystko to da się zrobić w jQuery i na Vanilla Javascript, a nawet jeszcze więcej. jQuery mimo lat jest ogromnie użyteczna i zapewnia ogrom możliwości
link do api: https://api.jquery.com/jquery.ajax/

Comments

Czy to jest poprawnie?

$(document).ready(function() {
  function listOfProducts() {
    var filter = $('.generator__select').val(); 
    
    $.getJSON( "products.json", function( data ) {
      var items = [];
      $.each( data, function( key, val ) {
        
        var nameOfProduct = val.prod_name;
        var priceOfProduct = val.prod_price;
        var statusOfProduct = val.prod_status;

        if(filter == 'all') {
          if(statusOfProduct == undefined) {
            return false;
          }

          items.push( `<div class="item">
          <div class="img_wrapper">
          <img src="https://dummyimage.com/400x3:4 " alt="">
          </div>
          <div class="item_info">
          <div class="name">`
          +nameOfProduct +
          `</div>
            <div class="price">`
              +priceOfProduct +
            `</div>
          </div>
        </div>` );
        }
        
        else if(statusOfProduct == undefined) {
          statusOfProduct = '';
        }
        
        else if(statusOfProduct.includes(filter)) {
          items.push( `<div class="item">
          <div class="img_wrapper">
          <img src="https://dummyimage.com/400x3:4 " alt="">
          </div>
          <div class="item_info">
          <div class="name">`
          +nameOfProduct +
          `</div>
            <div class="price">`
              +priceOfProduct +
            `</div>
          </div>
        </div>` );
        }
      });
      
      $('.products_list').html(items);
      items.splice(0, items.length);
    });
  }
  
  listOfProducts();
  
  $(".generator__select").change(function(){
    listOfProducts();
  });
});

  <form class="generator">
    <label class="generator__input-name">Sortuj:
      <select class="generator__select" name="gender">
        <option value="recommended" selected>Rekomendowane</option>
        <option value="saleout">Wyprzedaż</option>
        <option value="bestseller">Bestseller</option>
        <option value="promotion">Promocja</option>
        <option value="new">Nowość</option>
      </select>
    </label>
  </form>

<div class="products_list">
</div>