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

CodePudding user response：

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>
  );
}

CodePudding user response：

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>

CodePudding user response：

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