Unable to map nested array data in JavaScript?-CodePudding

Here, I have nested array object categories which have nested array objectproduct. product contains name, price, discount, unitsold properties with images array object which contains image url property.

How can I map each product name to it's own image url?

Here is the whole object structure

{
  "data": {
    "categories": [
      {
        "categoryId": "aeb50ed6-580d-a065-383a-e3932fbec6a1",
        "name": "Electronics",
        "products": [
          {
            "productId": "f1ea5d7a-c26e-d850-52b5-9ac4c19668f2",
            "name": "Small Soft Salad",
            "price": 841,
            "discount": 23,
            "unitsSold": 5,
            "images": [
              {
                "url": "https://shoplly-api.techawks.io/storage/511dBXGmAtL._AC_UL320_.jpg",
                "productId": "f1ea5d7a-c26e-d850-52b5-9ac4c19668f2"
              },
              {
                "url": "https://shoplly-api.techawks.io/storage/71MIvKxxSvL._AC_UL320_.jpg",
                "productId": "f1ea5d7a-c26e-d850-52b5-9ac4c19668f2"
              },
              {
                "url": "https://shoplly-api.techawks.io/storage/81loLb-NTYL._AC_UL320_.jpg",
                "productId": "f1ea5d7a-c26e-d850-52b5-9ac4c19668f2"
              },
              {
                "url": "https://shoplly-api.techawks.io/storage/81goU9h-jnL._AC_UL320_.jpg",
                "productId": "f1ea5d7a-c26e-d850-52b5-9ac4c19668f2"
              },
              {
                "url": "https://shoplly-api.techawks.io/storage/61pUul1oDlL._AC_UL320_.jpg",
                "productId": "f1ea5d7a-c26e-d850-52b5-9ac4c19668f2"
              }
            ]
          },
          {
            "productId": "b2d38cf6-b8c7-6449-e13a-8ef3bdd12dd0",
            "name": "Tasty Plastic Pants",
            "price": 250,
            "discount": 44,
            "unitsSold": 2,
            "images": [
              {
                "url": "https://shoplly-api.techawks.io/storage/511dBXGmAtL._AC_UL320_.jpg",
                "productId": "b2d38cf6-b8c7-6449-e13a-8ef3bdd12dd0"
              },

Here is my react component

import React from "react";
import { useQuery, gql } from "@apollo/client";
import useStore from "./store/store";

const FILMS_QUERYy = gql`
  {
    categories {
      categoryId
      name
      products {
        productId
        name
        price
        discount
        unitsSold
        images {
          productId
          url
        }
      }
      subCategories {
        name
        subCategoryId
        categoryId
      }
    }
  }
`;

const Hero = () => {
  const filter = useStore((state) => state.filter);
  const furniture = useStore((state) => state.furnitures);
  const electronic = useStore((state) => state.electronics);
  const accessorie = useStore((state) => state.accessories);
  const vehicle = useStore((state) => state.vehicles);
  const fashion = useStore((state) => state.fashions);
  const { data, loading, error } = useQuery(FILMS_QUERYy);
  console.log(JSON.stringify(data, null, 2));
  return (
    <div>
      <div className="flex space-x-10 justify-center items-center">
        <div onClick={furniture}>Furnitires</div>
        <div onClick={electronic}>Electroinics</div>
        <div onClick={accessorie}>Vehicles</div>
        <div onClick={vehicle}>Accessories</div>
        <div onClick={fashion}>Fashion</div>
      </div>
      <div className="flex space-x-16 p-4 mt-10">
        <div className=" w-64  bg-green-500">
          {data?.categories[filter]?.subCategories?.map((launch) => (
            <div key={launch.name}>{launch.name}</div>
          ))}
        </div>
        <div className="flex-1 p-10 font text-2xl  bg-green-500 ">
          {" "}
          <div className="grid grid-cols-2 gap-2">
            {data?.categories[filter]?.products?.map((product) => (
              <div className="" key={product.name}>
                <div className="  bg-white rounded">
                  
                  <div>{product?.name}</div>
                  <div>{product?.price}</div>
                  
 
          </div>
        </div>
      </div>
    </div>
  );
};

export default Hero;

In this case, I tried to map product name and price and I would like to map image url likewise.

How can I do that? Thanks Thanks

CodePudding user response：

You need to map the categories and for each category you need to map the products inside. Example:

<ul>
 {categories.map(category => {
  category.products.map(product => 
   <li>
    {product.name}
   </li>
  )
 })}
</ul>

Next, if you whant to display a single produt image, lets say the first one:

<li>
 <img src={product.images[0].url} />
 {product.name}
</li>

Or if you need to display all images:

<li>
 <ul>
  {product.images.map(image => 
    <li>
     <img src={image.url} />
    </li>
  )}
 </ul>
 {product.name}
</li>

CodePudding user response：

As said above you need to map through the categories to get all the products. I suggest adding key prop to each mapped element.