How to use map to loop over json object in react js

Question

I have a JSON object and I want to display it on my page but am having a problem with how to loop through the JSON object using the map function in React.

How can I display the data accessing the content of the object? Any help will be appreciated thanks in advance

My data

const product = {
  "items": {
    "page": "1",
    "real_total_results": 500,
    "total_results": 500,
    "page_size": 10,
    "pagecount": 50,
    "item": [

      {
        "title": "2022 Martin Men's Shoes Pigskin Autumn",
        "pic_url": "https://cbu01.alicdn.com/img/ibank/O1CN01iURzli2Ka1udcUHnM_!!2212881679572-0-cib.jpg",
        "promotion_price": "83.00",
        "price": "83.00",
        "sales": 223,
        "turnover": "1万+",

      },
      {
        "title": "Single shoe summer",
        "pic_url": "https://cbu01.alicdn.com/img/ibank/O1CN01eMAlUd1GfHlfmUnE1_!!2211426400649-0-cib.jpg",
        "promotion_price": "5.30",
        "price": "5.30",
        "sales": 381884,
        "turnover": "27万+",

      },
      {
        "title": "Men's shoes and women's shoes Beijing",
        "pic_url": "https://cbu01.alicdn.com/img/ibank/O1CN01pshk1P27HAb7t9H5i_!!2208535077771-0-cib.jpg",
        "promotion_price": "5.00",
        "price": "5.00",
        "sales": 94815,
        "turnover": "7万+",

      },
      {
        "title": "2022 Running Shoes Sneakers",
        "pic_url": "https://cbu01.alicdn.com/img/ibank/O1CN01KNh1N31Dwk4VGdCWB_!!2863830281-0-cib.jpg",
        "promotion_price": "82.00",
        "price": "82.00",
        "sales": 16573,
        "turnover": "4万+",
      },


    ],

  },

}

My code

<div className="row items">
            {product.items.map((values) => {
              return(   
                <div className="col-lg-3 col-md-4 col-sm-6 col-6" >
                  <span>Total: {values.total_results}</span>
                    values.item.map((val) =>{
                      return(
                        <div className="productImage">
                         <img style={{height:'100%', width: '100%'}}src={val.pic_url} alt="" />
                        </div>
                         <Link to='/' style={{textDecoration:'none', color:"#1a1a1a"}}>
                           <div className="cardDetail">
                            <div >
                              <p>{val.title}</p> 
                            </div>
                            <div>
                             <h6>¥ {val.price}</h6>
                           </div>
                           <div>
                             <h6>¥ {val.sales}</h6>
                           </div>
                       </div>
                  </Link>
                       )
                  })
                  
                  
                </div>
              )
            })}
          </div>

I want to get the page, total_results, page_size and also get item array content like the title, pic_url, prices and so on

Ahmad · Accepted Answer · 2022-09-21 10:08:41Z

You cannot map on Object, So you have to wrap the product.items into Array as you can see the below code also here you can see the live example of your code.

import React from "react";

export default function App() {
  const product = {
    items: {
      page: "1",
      real_total_results: 500,
      total_results: 500,
      page_size: 10,
      pagecount: 50,
      item: [
        {
          title: "2022 Martin Men's Shoes Pigskin Autumn",
          pic_url:
            "https://cbu01.alicdn.com/img/ibank/O1CN01iURzli2Ka1udcUHnM_!!2212881679572-0-cib.jpg",
          promotion_price: "83.00",
          price: "83.00",
          sales: 223,
          turnover: "1万+"
        },
        {
          title: "Single shoe summer",
          pic_url:
            "https://cbu01.alicdn.com/img/ibank/O1CN01eMAlUd1GfHlfmUnE1_!!2211426400649-0-cib.jpg",
          promotion_price: "5.30",
          price: "5.30",
          sales: 381884,
          turnover: "27万+"
        },
        {
          title: "Men's shoes and women's shoes Beijing",
          pic_url:
            "https://cbu01.alicdn.com/img/ibank/O1CN01pshk1P27HAb7t9H5i_!!2208535077771-0-cib.jpg",
          promotion_price: "5.00",
          price: "5.00",
          sales: 94815,
          turnover: "7万+"
        },
        {
          title: "2022 Running Shoes Sneakers",
          pic_url:
            "https://cbu01.alicdn.com/img/ibank/O1CN01KNh1N31Dwk4VGdCWB_!!2863830281-0-cib.jpg",
          promotion_price: "82.00",
          price: "82.00",
          sales: 16573,
          turnover: "4万+"
        }
      ]
    }
  };


  return (
    <div className="App">
      {Array(product.items).map((values) => {
        return (
          <div className="col-lg-3 col-md-4 col-sm-6 col-6">
            <span>Total: {values.total_results}</span>
            {values.item.map((val) => (
              <>
                <div className="productImage">
                  <img
                    style={{ height: "100%", width: "100%" }}
                    src={val.pic_url}
                    alt=""
                  />
                </div>
                <Link
                  to="/"
                  style={{ textDecoration: "none", color: "#1a1a1a" }}
                >
                <div className="cardDetail">
                  <div>
                    <p>{val.title}</p>
                  </div>
                  <div>
                    <h6>¥ {val.price}</h6>
                  </div>
                  <div>
                    <h6>¥ {val.sales}</h6>
                  </div>
                </div>
                </Link>
              </>
            ))}
          </div>
        );
      })}
    </div>
  );
}

Nick Vu · Accepted Answer · 2022-09-21 09:54:55Z

Your product.items is not an array, so you cannot use map on it.

You're also missing brackets in the 2nd map, and you need to add a wrapper element on JSX of the 2nd map as well, I use React.Fragment in this case.

It should be like below

<div className="row items">
  <div className="col-lg-3 col-md-4 col-sm-6 col-6">
    <span>Total: {product.items.total_results}</span>
    {product.items.item.map((val) => (
      <React.Fragment>
        <div className="productImage">
          <img
            style={{ height: "100%", width: "100%" }}
            src={val.pic_url}
            alt=""
          />
        </div>
        <Link to="/" style={{ textDecoration: "none", color: "#1a1a1a" }}>
          <div className="cardDetail">
            <div>
              <p>{val.title}</p>
            </div>
            <div>
              <h6>¥ {val.price}</h6>
            </div>
            <div>
              <h6>¥ {val.sales}</h6>
            </div>
          </div>
        </Link>
      </React.Fragment>
    ))}
  </div>
</div>

404Xavier6 · Accepted Answer · 2022-09-21 09:55:28Z

0

The map function is a method of the Array.prototype which means it won't work on an object

answered Sep 21, 2022 at 9:55

404Xavier6

13 bronze badges

Collectives™ on Stack Overflow

How to use map to loop over json object in react js

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related