{
    "id": 4,
    "name": "Patricia Lebsack",
    "username": "Karianne",
    "email": "[email protected]",
    "address": {
      "street": "Hoeger Mall",
      "suite": "Apt. 692",
      "city": "South Elvis",
      "zipcode": "53919-4257",
      "geo": {
        "lat": "29.4572",
        "lng": "-164.2990"
      }
    },
    "phone": "493-170-9623 x156",
    "website": "kale.biz",
    "company": {
      "name": "Robel-Corkery",
      "catchPhrase": "Multi-tiered zero tolerance productivity",
      "bs": "transition cutting-edge web services"
    }
  },
  {
    "id": 5,
    "name": "Chelsey Dietrich",
    "username": "Kamren",
    "email": "[email protected]",
    "address": {
      "street": "Skiles Walks",
      "suite": "Suite 351",
      "city": "Roscoeview",
      "zipcode": "33263",
      "geo": {
        "lat": "-31.8129",
        "lng": "62.5342"
      }
    },
    "phone": "(254)954-1289",
    "website": "demarco.info",
    "company": {
      "name": "Keebler LLC",
      "catchPhrase": "User-centric fault-tolerant solution",
      "bs": "revolutionize end-to-end systems"
    }
  }

I have JSON data like this and I want to show the company name in React. I am using the following type:

<li>Company name: {user.company.name} </li>

But this is giving me the following error:

TypeError: Cannot read properties of undefined (reading 'name')

How can I resolve this?

CodePudding user response：

Use Array.map and add more HTML to render your content.

var jsonString = '[{ "id": 4, "name": "Patricia Lebsack", "username": "Karianne", "email": "[email protected]", "address": { "street": "Hoeger Mall", "suite": "Apt. 692", "city": "South Elvis", "zipcode": "53919-4257", "geo": { "lat": "29.4572", "lng": "-164.2990" } }, "phone": "493-170-9623 x156", "website": "kale.biz", "company": { "name": "Robel-Corkery", "catchPhrase": "Multi-tiered zero tolerance productivity", "bs": "transition cutting-edge web services" } }, { "id": 5, "name": "Chelsey Dietrich", "username": "Kamren", "email": "[email protected]", "address": { "street": "Skiles Walks", "suite": "Suite 351", "city": "Roscoeview", "zipcode": "33263", "geo": { "lat": "-31.8129", "lng": "62.5342" } }, "phone": "(254)954-1289", "website": "demarco.info", "company": { "name": "Keebler LLC", "catchPhrase": "User-centric fault-tolerant solution", "bs": "revolutionize end-to-end systems" } }]';

var array = JSON.parse(jsonString);

var companies = array.map(item => (
   item.company.name
))

console.log(companies);

CodePudding user response：

You can import your JSON file in app.js and used it. You can also use a optional changing for checking the value available or not in a particular object.

Ex: item?.company?.name

App.js

import React, { useState, useEffect } from "react";
import Data from "./data.json";

function App() {
  const [data, setData] = useState();

  useEffect(() => {
    setData(Data);
  }, []);

  return (
    <div className="App">
      {data?.map((item) => (
        <div key={item.id}>{item?.name}</div>
      ))}
    </div>
  );
}

export default App;

data.json

   [{
      "id":4,
      "name":"Patricia Lebsack",
      "username":"Karianne",
      "email":"[email protected]",
      "address":{
         "street":"Hoeger Mall",
         "suite":"Apt. 692",
         "city":"South Elvis",
         "zipcode":"53919-4257",
         "geo":{
            "lat":"29.4572",
            "lng":"-164.2990"
         }
      },
      "phone":"493-170-9623 x156",
      "website":"kale.biz",
      "company":{
         "name":"Robel-Corkery",
         "catchPhrase":"Multi-tiered zero tolerance productivity",
         "bs":"transition cutting-edge web services"
      }
   },
   {
      "id":5,
      "name":"Chelsey Dietrich",
      "username":"Kamren",
      "email":"[email protected]",
      "address":{
         "street":"Skiles Walks",
         "suite":"Suite 351",
         "city":"Roscoeview",
         "zipcode":"33263",
         "geo":{
            "lat":"-31.8129",
            "lng":"62.5342"
         }
      },
      "phone":"(254)954-1289",
      "website":"demarco.info",
      "company":{
         "name":"Keebler LLC",
         "catchPhrase":"User-centric fault-tolerant solution",
         "bs":"revolutionize end-to-end systems"
      }
   }
]