как я могу написать функцию на javascript для получения данных по категориям?

#javascript #reactjs

Вопрос:

Я пытаюсь отобразить продукты по категориям, но не могу этого сделать. как я могу написать функцию на javascript, чтобы получить данные по категориям? специально в react или в чистом javascript?

 {
  electronics: [
    {
      id: "e-1",
      title: "Macbook Pro",
      price: "2000",
      image:
        "https://images.macrumors.com/t/uGZEsAiPbvD0wqiL5m6lE9b-Ixw=/2344x/https://images.macrumors.com/article-new/2021/01/Flat-2021-MacBook-Pro-Mockup-Feature-1.jpg",
    },
    {
      id: "e-2",
      title: "Google Pixel",
      price: "500",
      image:
        "https://static.techspot.com/images/products/2018/smartphones/org/2019-10-15-product.jpg",
    },
    
  ],
  cloths: [
    {
      id: "c-1",
      title: "Blazer cover coat",
      price: "200",
      image:
        "https://static-01.daraz.com.bd/p/mdc/10d33049b5e6188ff44dc9011971cf56.jpg_340x340q80.jpg_.webp",
    },
    {
      id: "c-2",
      title: "Stylish jacket for men",
      price: "500",
      image:
        "https://static-01.daraz.com.bd/p/4abccdabadc9f089c4f59be2dfda2ce6.jpg_340x340q80.jpg_.webp",
    },
   
  ],
  
}
 

Комментарии:

1. Можете ли вы показать нам, что у вас есть до сих пор ?

2. вы имеете в виду электронику и одежду как категорию, верно?

3. Пожалуйста, покажите нам результаты, которые вы хотите.

4. Пожалуйста, добавьте еще несколько деталей, например, что вы пробовали и какой вы хотите (конечный) результат.

5. ` Я хочу, чтобы это выглядело так: « [ { категория:одежда, данные:[{},{}] }, категория:электроника, данные:[{},{}] } ] «

Ответ №1:

Пример в чистом JavaScript:

 <!DOCTYPE html>
<html>
<body>
<p>Products list.</p>
<p id="list"></p>

<script>
var myObj, x;
myObj = {
  electronics: [
    {
      id: "e-1",
      title: "Macbook Pro",
      price: "2000",
      image:
        "https://images.macrumors.com/t/uGZEsAiPbvD0wqiL5m6lE9b-Ixw=/2344x/https://images.macrumors.com/article-new/2021/01/Flat-2021-MacBook-Pro-Mockup-Feature-1.jpg",
    },
    {
      id: "e-2",
      title: "Google Pixel",
      price: "500",
      image:
        "https://static.techspot.com/images/products/2018/smartphones/org/2019-10-15-product.jpg",
    },
    
  ],
  cloths: [
    {
      id: "c-1",
      title: "Blazer cover coat",
      price: "200",
      image:
        "https://static-01.daraz.com.bd/p/mdc/10d33049b5e6188ff44dc9011971cf56.jpg_340x340q80.jpg_.webp",
    },
    {
      id: "c-2",
      title: "Stylish jacket for men",
      price: "500",
      image:
        "https://static-01.daraz.com.bd/p/4abccdabadc9f089c4f59be2dfda2ce6.jpg_340x340q80.jpg_.webp",
    },
   
  ],
  
};
for (x in myObj) {
  document.getElementById("list").innerHTML  = "<p><b>"   x   "</b></p>"
  for (product in myObj[x]){
    document.getElementById("list").innerHTML  = myObj[x][product].title   "<br>";
  }  
}
</script>

</body>
</html>
 

Результат:

пример javascript, результат

Комментарии:

1. @SyedSakib, но вы сказали, что «реагируйте ИЛИ чистый javascript». К сожалению, я не знаю, как писать в ReactJS.

Ответ №2:

Редактировать:

Найдите полную демонстрационную версию React в CodeSandbox.

Конечный Результат:

введите описание изображения здесь