How to map Image source in nested JSON object in react js?

Question

I had problem in showing my fetched image data from my api. from my console it didn't show any error but the card still not showing any image. How can I fix this ? I think it's because the Image is registered as another object unlike category and brand.

my Json Data Example:

{
    "count": 5,
    "next": null,
    "previous": null,
    "results": [
        {
            "id": 5,
            "slug": "flashdisk-robot-16gb",
            "sku": "dsadsa232232",
            "name": "Flashdisk  Robot 16Gb",
            "description": "Ini adalah flashdisk",
            "weight": 6,
            "price": 30000,
            "stock": 0,
            "datetime_added": "2022-03-13T11:28:25.575695Z",
            "images": [
                {
                    "id": 1,
                    "image": "http://127.0.0.1:8000/products/PhotoRoom-20211115_151817.png"
                }
            ],
            "brand": {
                "id": 1,
                "slug": "lg",
                "name": "LG",
                "image": null
            },
            "category": {
                "id": 1,
                "slug": "electronic",
                "name": "Electronic",
                "image": null
            }
        }
    ]
}

My Code in React:

  useEffect(() =>{
    axios.get(`http://127.0.0.1:8000/data/products/?format=json`).then(res => {
        const products = Object.values(res.data);
        var filteredCategory = products[3].filter((product) => product.category.slug === categoryslug)
        setProductList(filteredCategory)
      })
  }, []);

console.log(productList)
  return (
    <>
      <Row>
        {productList && productList.map(product =>{
          const {id, name, price, category,images, slug} = product;
          return(
          <Col lg={3} key={id} className="d-flex">
            <Link className='card-product d-flex' to={`/product/${category.slug}/${slug}`}>
              <Card  className="flex-fill productlist">
                <Card.Img variant="top" src={images.image}/>
              </Card>
            </Link>
          </Col>
          )
        })}
      </Row>
    </>
  )

deadcoder0904 · Accepted Answer · 2022-03-14 04:39:24Z

2

images is an array of objects:

"images": [
  {
    "id": 1,
    "image": "http://127.0.0.1:8000/products/PhotoRoom-20211115_151817.png"
  }
],

so you have to do images[0].image for it to work.

<Card.Img variant="top" src={images[0].image}/>

answered Mar 14, 2022 at 4:39

deadcoder0904

8,96118 gold badges93 silver badges212 bronze badges

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

7 Comments

Kim San Over a year ago

it shows another error Uncaught TypeError: Cannot read properties of undefined (reading 'image')

deadcoder0904 Over a year ago

@KimSan it means images[0] is undefined. try console.log on product & images like console.log({ product, images }) to see their content & then refer from that.

Kim San Over a year ago

I don't think the problem is with the images[0]. When I tried to console.log(Images[0) it show the array but when i console.log Images[0].images it return undefined

Sean Over a year ago

Try images[0]?.image

deadcoder0904 Over a year ago

@KimSan images[0].image should be used instead of images[0].images as your object property name has id & image & change it everywhere, even in console.log to see it work :)

|

Hritik Sharma · Accepted Answer · 2022-03-14 06:06:53Z

0

<Row>
        {productList && productList.map(product =>{
          const {id, name, price, category,images, slug} = product;
          return(
          <Col lg={3} key={id} className="d-flex">
            <Link className='card-product d-flex' to={`/product/${category.slug}/${slug}`}>
              <Card  className="flex-fill productlist">
                {
                  images.map((val,index)=><Card.Img key={index} variant="top" 
                     src={val.image}/>
                }
              </Card>
            </Link>
          </Col>
          )
        })}
      </Row>

answered Mar 14, 2022 at 6:06

Hritik Sharma

2,0361 gold badge11 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to map Image source in nested JSON object in react js?

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related