Wyświetlenie listy ajax'em

pytanie zadane 25 kwietnia 2022 w JavaScript przez Klaudiaaa Początkujący (390 p.)

Cześć wszystkim

Dostałam takie zadanie, które polega na wyświetlaniu listy produktów wykorzystując ajax do pliku products.json który zawiera objekt JSON zawierający nazwę produktu, statusu produktu oraz cenę. Na liście należy dodać select do filtrowania produktów po statusach ("prod_status": "recommended|saleout|bestseller|promotion|new",).

Poniżej wstawiam mój kod. Czy o to w tym zadaniu chodziło? Czy powinnam zrobić to inaczej?

index.html:

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

<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>AJAX - Fetch</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@700&family=Roboto:wght@500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="form_group">
  <form class="form">
    <label>Sortuj:
      <select class="select_filter" name="gender">
        <option value="all" selected>Wszystko</option>
        <option value="recommended">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>

  <div class="products_list">
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="main.js"></script>
</body>

</html>

main.js:

$(document).ready(function() {
  function listOfProducts() {
    var filter = $('.select_filter').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 +
            ` zł</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 +
            `zł</div>
          </div>
        </div>` );
        }
      });
      
      $('.products_list').html(items);
      items.splice(0, items.length);
    });
  }
  
  listOfProducts();
  
  $(".select_filter").change(function(){
    listOfProducts();
  });
});

products.json:

{
  "response_code": 200,
  "0": {
    "prod_id": "1",
    "prod_price": "69.00",
    "prod_status": "",
    "prod_name": "Produkt Przyk\u0142adowy Bluza K166 - Odcienie zieleni"
  },
  "1": {
    "prod_id": "2",
    "prod_price": "89.00",
    "prod_status": "",
    "prod_name": "Produkt Przyk\u0142adowy Bluza K189 - Odcienie \u017c\u00f3\u0142tego"
  },
  "2": {
    "prod_id": "3",
    "prod_price": "188.00",
    "prod_status": "promotion",
    "prod_name": "Produkt Przyk\u0142adowy Bluza M304 - r\u00f3\u017c"
  },

  "3": {
    "prod_id": "4",
    "prod_price": "153.00",
    "prod_status": "",
    "prod_name": "Produkt Przyk\u0142adowy Bluza M331 - szary"
  },
  "4": {
    "prod_id": "5",
    "prod_price": "136.00",
    "prod_status": "promotion",
    "prod_name": "Produkt Przyk\u0142adowy Bluza M346 - ecru"
  },
  "5": {
    "prod_id": "6",
    "prod_price": "66.99",
    "prod_status": "recommended",
    "prod_name": "Produkt Przyk\u0142adowy Bluza z Kwiatowym Nadrukiem w Stylu Vintage"
  },
  "6": {
    "prod_id": "7",
    "prod_price": "29.00",
    "prod_status": "",
    "prod_name": "Produkt Przyk\u0142adowy Bluzka K052 Wyprzeda\u017c !!! - Odcienie br\u0105zu i be\u017cu"
  },
  "7": {
    "prod_id": "8",
    "prod_price": "29.00",
    "prod_status": "promotion",
    "prod_name": "Produkt Przyk\u0142adowy Bluzka K052 Wyprzeda\u017c !!! - Odcienie czerwieni"
  },
  "8": {
    "prod_id": "9",
    "prod_price": "29.00",
    "prod_status": "new",
    "prod_name": "Produkt Przyk\u0142adowy Bluzka K052 Wyprzeda\u017c !!! - Odcienie ecri"
  },
  "9": {
    "prod_id": "11",
    "prod_price": "49.00",
    "prod_status": "new,saleout",
    "prod_name": "Produkt Przyk\u0142adowy Bluzka K165 - Odcienie niebieskiego"
  },
  "10": {
    "prod_id": "12",
    "prod_price": "49.00",
    "prod_status": "",
    "prod_name": "Produkt Przyk\u0142adowy Bluzka K165 - Odcienie szaro\u015bci"
  },
  "11": {
    "prod_id": "13",
    "prod_price": "33.93",
    "prod_status": "recommended",
    "prod_name": "Produkt Przyk\u0142adowy Bluzka K167 - Odcienie niebieskiego"
  },
  "12": {
    "prod_id": "14",
    "prod_price": "39.00",
    "prod_status": "promotion,bestseller",
    "prod_name": "Produkt Przyk\u0142adowy Bluzka K167 - Odcienie r\u00f3\u017cu"
  }
}

1 odpowiedź

odpowiedź 25 kwietnia 2022 przez VBService Ekspert (253,280 p.)
edycja 25 kwietnia 2022 przez VBService

Jeżeli usuniesz ten wpis z products.json

"response_code": 200,

to ten zapis będzie niepotrzebny (linia 14)

          if(statusOfProduct == undefined) {
            return false;
          }

skoro masz (linia 6)

      var items = [];

to ten zapis nic nie wnosi (linia 55)

items.splice(0, items.length);

dla pliku

products.json

{
  "0": {
    "prod_id": "1",
    "prod_price": "69.00",
    "prod_status": "",
    "prod_name": "Produkt Przyk\u0142adowy Bluza K166 - Odcienie zieleni"
  },
  "1": {
    "prod_id": "2",
    "prod_price": "89.00",
    "prod_status": "",
    "prod_name": "Produkt Przyk\u0142adowy Bluza K189 - Odcienie \u017c\u00f3\u0142tego"
  },
  "2": {
    "prod_id": "3",
    "prod_price": "188.00",
    "prod_status": "promotion",
    "prod_name": "Produkt Przyk\u0142adowy Bluza M304 - r\u00f3\u017c"
  },
 
  "3": {
    "prod_id": "4",
    "prod_price": "153.00",
    "prod_status": "",
    "prod_name": "Produkt Przyk\u0142adowy Bluza M331 - szary"
  },
  "4": {
    "prod_id": "5",
    "prod_price": "136.00",
    "prod_status": "promotion",
    "prod_name": "Produkt Przyk\u0142adowy Bluza M346 - ecru"
  },
  "5": {
    "prod_id": "6",
    "prod_price": "66.99",
    "prod_status": "recommended",
    "prod_name": "Produkt Przyk\u0142adowy Bluza z Kwiatowym Nadrukiem w Stylu Vintage"
  },
  "6": {
    "prod_id": "7",
    "prod_price": "29.00",
    "prod_status": "",
    "prod_name": "Produkt Przyk\u0142adowy Bluzka K052 Wyprzeda\u017c !!! - Odcienie br\u0105zu i be\u017cu"
  },
  "7": {
    "prod_id": "8",
    "prod_price": "29.00",
    "prod_status": "promotion",
    "prod_name": "Produkt Przyk\u0142adowy Bluzka K052 Wyprzeda\u017c !!! - Odcienie czerwieni"
  },
  "8": {
    "prod_id": "9",
    "prod_price": "29.00",
    "prod_status": "new",
    "prod_name": "Produkt Przyk\u0142adowy Bluzka K052 Wyprzeda\u017c !!! - Odcienie ecri"
  },
  "9": {
    "prod_id": "11",
    "prod_price": "49.00",
    "prod_status": "new,saleout",
    "prod_name": "Produkt Przyk\u0142adowy Bluzka K165 - Odcienie niebieskiego"
  },
  "10": {
    "prod_id": "12",
    "prod_price": "49.00",
    "prod_status": "",
    "prod_name": "Produkt Przyk\u0142adowy Bluzka K165 - Odcienie szaro\u015bci"
  },
  "11": {
    "prod_id": "13",
    "prod_price": "33.93",
    "prod_status": "recommended",
    "prod_name": "Produkt Przyk\u0142adowy Bluzka K167 - Odcienie niebieskiego"
  },
  "12": {
    "prod_id": "14",
    "prod_price": "39.00",
    "prod_status": "promotion,bestseller",
    "prod_name": "Produkt Przyk\u0142adowy Bluzka K167 - Odcienie r\u00f3\u017cu"
  }
}

propozycja

main.js

$(document).ready(function() {
  function listOfProducts() {
    const filter = $('.select_filter').val(); 
     
    $.getJSON( "products.json", function( data ) {
      const items = [];
      $.each( data, function( key, val ) {
        const statusOfProduct = val.prod_status;
        let nameOfProduct, priceOfProduct;
 
        if (statusOfProduct.includes(filter) && filter != 'all') {
           nameOfProduct = val.prod_name,
           priceOfProduct = val.prod_price;
        } else if (filter == 'all') {
           nameOfProduct = val.prod_name,
           priceOfProduct = val.prod_price;
        }

        if (nameOfProduct) {
          items.push(
            `<div class="item">
               <div class="img_wrapper">
                 <img src="https://dummyimage.com/400x3:4 " alt="">
                 `+((statusOfProduct) ? '<div class="hashtag">#'+statusOfProduct.replace(',', ' #')+'</div>':'')+`
               </div>
               <div class="item_info">
                 <div class="name">`
                   +nameOfProduct +
                `</div>
                 <div class="price">`
                   +priceOfProduct +`zł
                 </div>
               </div>
            </div>`
          );
        }
      });
       
      $('.products_list').html(items);
    });
  }
   
  listOfProducts();
   
  $(".select_filter").change(function() {
    listOfProducts();
  });
});

dodałem dla demonstracji al'a hashtag (lina 24)

`+((statusOfProduct) ? '<div class="hashtag">#'+statusOfProduct.replace(',', ' #')+'</div>':'')+`

komentarz 25 kwietnia 2022 przez Wiciorny Ekspert (269,710 p.)

btw,

items.splice(0, items.length);

to ma sens, w sytuacji w której kolega dodaje elementy do tablicy, pokrywająć wszystkie możliwe warunki, szczególnie że $.each jest synchroniczne.

komentarz 25 kwietnia 2022 przez VBService Ekspert (253,280 p.)

Tak, tylko w tym przypadku ten splice jest już poza pętlą $.each i

      $('.products_list').html(items);
      items.splice(0, items.length);

po tym jak dane z items zostały dodane do DOM-u. Kolejne wywołanie funkcji

listOfProducts()

i tak powoduje "wyzerowanie" items

function listOfProducts() {
    const filter = $('.select_filter').val(); 
     
    $.getJSON( "products.json", function( data ) {
      const items = [];