如何在 React 中访问和循环嵌套的 JSON 项目？

Question

My first time doing this so please bear with me.

Trying to access some items from my local JSON file. In this case, the 'model'.

JSON:

{
   "machines":[
      {
         "category":"Skid Steer and Compact Track Loaders",
         "product_details":[
            {
               "id":1,
               "model":"226D3",
               // ^^^ what I want to access
               "power":"67.1",
               "rated_operating_capacity":"1550",
               "operating_weight":"5849",
               "description":"Built for tough work, the Caterpillar® Skid Steer Loaders incorporate big iron features. These machines deliver Cat reliability, durability, and efficient operation, even in the toughest working conditions.",
               "image":"https://s7d2.scene7.com/is/image/Caterpillar/CM20190910-c686b-0fdbf"
            },
            {
               "id":2,
               "model":"232D3",
               // ^^^ what I want to access
               "power":"67.1",
               "rated_operating_capacity":"1900",
               "operating_weight":"6514",
               "description":"Built for tough work, the Caterpillar® Skid Steer Loaders incorporate big iron features. These machines deliver Cat reliability, durability, and efficient operation, even in the toughest working conditions.",
               "image":"https://s7d2.scene7.com/is/image/Caterpillar/CM20190730-e346c-4dbd8"
            },
            {
               "id":3,
               "model":"236D3",
               // ^^^ what I want to access
               "power":"74.3",
               "rated_operating_capacity":"1800",
               "operating_weight":"6567",
               "description":"Built for tough work, the Caterpillar® Skid Steer Loaders incorporate big iron features. These machines deliver Cat reliability, durability, and efficient operation, even in the toughest working conditions.",
               "image":"https://s7d2.scene7.com/is/image/Caterpillar/CM20190926-ee588-778c4?wid=735"
            }
         ]
      }
   ]
}

And below is where I load the data and map over it to display:

export default function MachineList() {
  // Load in global state
  const { data } = useAPI();

  return (
    <>
      <div className="container">
        {data.map((item) => (
          <div className="row">
            <div className="col-lg-4">
              <MachineCard title={item.product_details.model} /> 
                                 {/* ^ how I'm trying to access it */}            
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

Is there a way I can access the 'model' and make it output using.map?

Answer 1

Looking at the structure of your data, you need to change the array you are using in map to data.machines[0].product_details :

{data.machines && data.machines[0].product_details.map((item) => (

and you can then use:

<MachineCard title={item.model} />