Unable to access nested array object property in JavaScript

Question

I am trying to display the product array information such as name image url from the categories object. Here is the structure of the object.

{
  "categories": [
    {
      "__typename": "Category",
      "categoryId": "aeb50ed6-580d-a065-383a-e3932fbec6a1",
      "name": "Electronics",
      "products": [
        {
          "__typename": "Product",
          "productId": "f1ea5d7a-c26e-d850-52b5-9ac4c19668f2",
          "name": "Small Soft Salad",
          "price": 841,
          "discount": 23,
          "unitsSold": 5,
          "images": [
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/511dBXGmAtL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/71MIvKxxSvL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/81loLb-NTYL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/81goU9h-jnL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/61pUul1oDlL._AC_UL320_.jpg"
            }
          ]
        },
        {
          "__typename": "Product",
          "productId": "b2d38cf6-b8c7-6449-e13a-8ef3bdd12dd0",
          "name": "Tasty Plastic Pants",
          "price": 250,
          "discount": 44,
          "unitsSold": 2,
          "images": [
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/511dBXGmAtL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/61pUul1oDlL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/61S0sV1a57L._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/81WnMBnbWSL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/71266hQjO8L._AC_UL320_.jpg"
            }
          ]
        },
        {
          "__typename": "Product",
          "productId": "4ac166a1-9636-d299-e7a6-13a9c451582c",
          "name": "Fantastic Plastic Pizza",
          "price": 192,
          "discount": 26,
          "unitsSold": 18,
          "images": [
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/81WFWi9sKlL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/71ZE0VUjkSL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/81WnMBnbWSL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/61S0sV1a57L._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/81zbIt0p5qL._AC_UL320_.jpg"
            }
          ]
        },
        {
          "__typename": "Product",
          "productId": "c9f91096-4e77-30e8-fbde-c14f97d25d77",
          "name": "Tasty Rubber Car",
          "price": 611,
          "discount": 4,
          "unitsSold": 27,
          "images": [
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/81WFWi9sKlL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/71WCgLmDx7L._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/71nJ48O6aFL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/81goU9h-jnL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/71MIvKxxSvL._AC_UL320_.jpg"
            }
          ]
        },

Here is what I tried to access the name and image url of the product array.

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

const PRODUCT_QUERY = gql`
  {
    categories {
      categoryId
      name
      products {
        productId
        name
        price
        discount
        unitsSold
        images {
          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(PRODUCT_QUERY);
  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((products) => (
              <div className="" key={products.name}>
                <div className="  bg-white rounded">
                  <div>{products?.name}</div>
                  <div>{products?.price}</div>
                  <div>
                    <img src={products?.images?.url} />
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Hero;

So, I can display the product name but not the product image url.

What can I do to display product image url along with it's product name?

Thanks

It's just a number value to display specific array of data, could you spot my mistake to display images.url. Thanks — Teshie Ethiopia
– Teshie Ethiopia, Commented Apr 3, 2022 at 3:11
products.images is an array. Arrays don’t have a url property. — ray
– ray, Commented Apr 3, 2022 at 3:11
@rayhatfield What about this? "images": [ { "__typename": "ProductImage", "url": "https://shoplly-api.techawks.io/storage/511dBXGmAtL._AC_UL320_.jpg" }, — Teshie Ethiopia
– Teshie Ethiopia, Commented Apr 3, 2022 at 3:13

Chris B. · Accepted Answer · 2022-04-03 03:13:18Z

1

Images is an array containing multiple images. You'll need to a secondary map over the array to access the URL on each object.

{data?.categories[filter]?.products?.map((products) => (
              <div className="" key={products.name}>
                <div className="  bg-white rounded">
                  <div>{products?.name}</div>
                  <div>{products?.price}</div>
                  <div>
                    {products.images.map((img) =>
                       <img src={img.url} />
                      )}
                  </div>
                </div>
              </div>
            ))}

answered Apr 3, 2022 at 3:13

Chris B.

5,7711 gold badge17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Teshie Ethiopia Over a year ago

This just displays all Images. I need each images mapped with it's own product name. What your answer does is, it displays all available images inside each product name . Can you make make a single product name to have it's own product image? Thanks

Chris B. Over a year ago

Each product has its own array, implying there are multiple images for each product. If you only want one image, then you need to choose which one you want and display only that one. Or, if the images aren't correct for the product, there's an issue with your data.

KcH · Accepted Answer · 2022-04-03 04:37:47Z

1

Images itself is an array of objects, so its required to map over it again

<div>
  {products?.images.map((img) => <img src={img.url} />)}
</div>

If you want to show only just one image and that too the first one then we can do it as per @ray comment

<div>
  <img src={products?.images[0]?.url} />
</div>

edited Apr 3, 2022 at 4:37

answered Apr 3, 2022 at 3:13

KcH

3,5224 gold badges28 silver badges61 bronze badges

2 Comments

Teshie Ethiopia Over a year ago

This just displays all Images. I need each images mapped with @Codenewbie it's own product name. What your answer does is, it displays all available images inside each product name . Can you make make a single product name to have it's own product image? Thanks

KcH Over a year ago

But all those images are same for single product ?? check answer is that is the one expected @TeshAych?

Collectives™ on Stack Overflow

Unable to access nested array object property in JavaScript

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related