• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wyświetlenie listy ajax'em

Object Storage Arubacloud
0 głosów
306 wizyt
pytanie zadane 25 kwietnia 2022 w JavaScript przez Klaudiaaa Początkujący (390 p.)

Cześć wszystkim smiley

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ź

+1 głos
odpowiedź 25 kwietnia 2022 przez VBService Ekspert (254,880 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)  smiley

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) smiley

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

 

komentarz 25 kwietnia 2022 przez Wiciorny Ekspert (273,730 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 (254,880 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 = [];

 

Podobne pytania

0 głosów
1 odpowiedź 150 wizyt
pytanie zadane 31 marca 2022 w JavaScript przez Klaudiaaa Początkujący (390 p.)
0 głosów
1 odpowiedź 509 wizyt
pytanie zadane 28 grudnia 2016 w JavaScript przez Boshi VIP (100,240 p.)
0 głosów
0 odpowiedzi 1,188 wizyt

92,757 zapytań

141,679 odpowiedzi

320,441 komentarzy

62,101 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...