How to iterate JSON nested array in REACT JS API call?

Question

I have my REACT JS client side and php API on server side. My API call fetches the JSON data in the below format(I tried it on POSTMAN):

{
    "records": {
        "Master Automotives": [
            {
                "SparePartID": "43",
                "Name": "Oil and Lubricants",
                "Price": "4500",
                "VendorID": "48",
                "CompanyName": "Master Automotives"
            },
            {
                "SparePartID": "45",
                "Name": "Lights",
                "Price": "2300",
                "VendorID": "48",
                "CompanyName": "Master Automotives"
            }
        ],
        "Repair Solutions": [
            {
                "SparePartID": "47",
                "Name": "Steering Wheel",
                "Price": "1500",
                "VendorID": "60",
                "CompanyName": "Repair Solutions"
            }
        ],
        
         "FiveStar Automotives": [
            {
                "SparePartID": "51",
                "Name": "Brakes",
                "Price": "234",
                "VendorID": "70",
                "CompanyName": "FiveStar Automotives"
            },
            {
                "SparePartID": "53",
                "Name": "Clutch",
                "Price": "999",
                "VendorID": "70",
                "CompanyName": "FiveStar Automotives"
            },
              {
                "SparePartID": "55",
                "Name": "LED",
                "Price": "288",
                "VendorID": "70",
                "CompanyName": "FiveStar Automotives"
            }
        ]
    }
}

This above code is like an array which contains arrays of each company's items. Some Company has 2 items, some has 3 and some has only 1 item. Now I have my REACT JS where I wanna call the php API and save this above JSON data in such a format that I save each Company's items separately in separate arrays (dynamically).

I need to iterate through the above JSON data and split it into as many arrays as the unique Companies present. Like above data has has 3 distinct companies' items so I wanna split this JSON into 3 different arrays but if I had 15 different Companies then I would like to split and save it in 15 different arrays. My rough idea of REACT API call using AXIOS is below:

  axios.post('http://localhost/Auth/api/customers/show_cart.php', 
     {
    headers: {'Accept': 'application/json, text/plain, */*',
              'Content-Type': 'application/json'}
    } )
    .then(response => {

    //I need to know what to write here to save the data in my required format

      })
     .catch(error => {
     if (error) {
       console.log("REACT Error. Cannot show cart items");  }
       });

Please I need Help how to dynamically save my items (Grouped By Company Names) in separate arrays for each Company. Please Help!

P.S. mySQL Group BY query doesn't help here. I just want help in React API call. Thanks for reading.

EDIT: I want to store the data in arrays(named on Company Names) like array Masterautomotives[ ] should have this data below:

 [
                {
                    "SparePartID": "43",
                    "Name": "Oil and Lubricants",
                    "Price": "4500",
                    "VendorID": "48",
                    "CompanyName": "Master Automotives"
                },
                {
                    "SparePartID": "45",
                    "Name": "Lights",
                    "Price": "2300",
                    "VendorID": "48",
                    "CompanyName": "Master Automotives"
                }
  ]

And Array RepairSolutions[ ] should have following data:

 [
            {
                "SparePartID": "47",
                "Name": "Steering Wheel",
                "Price": "1500",
                "VendorID": "60",
                "CompanyName": "Repair Solutions"
            }
  ]

and so on for rest of the Companies whoever is being fetched from API call.

@RomanUnt I have edit the code to provide example. I hope this is what u want. — YellowMinion
– YellowMinion, Commented Apr 27, 2019 at 23:57

Chris B. · Accepted Answer · 2019-04-28 01:01:53Z

1

What are you trying to do with this data? Are you saving them directly to the state? You basically have access to it in your desired format directly from the API response, just as properties of response.records. I can't think of what you would need arrays separately put into the state for, so it may make more sense to just save the entire records object to the state and then access the desired company's data using state.records["Company name"], which will return exactly the data structure you're looking for. You can then map over the object's keys and in turn over each array contained within to render all of the products grouped by company.

  axios.post('http://localhost/Auth/api/customers/show_cart.php', 
     {
    headers: {'Accept': 'application/json, text/plain, */*',
              'Content-Type': 'application/json'}
    } )
    .then(response => {
      this.setState({
         records: response.records
      })

      })
     .catch(error => {
     if (error) {
       console.log("REACT Error. Cannot show cart items");  }
       });

And then you can render lists of each company's parts:

  render() {
    return (
      <div>
        {Object.keys(this.state.records).map((company, i) => (
        <div key={company}>
          <h2>{company}</h2>
          <ul>
           {this.state.records[company].map((product, i) => (
              <li>{product["Name"]} - ${product["Price"]}</li>
            ))}
          </ul>
        </div>
        ))}
      </div>
    )
  }
}

See this Codepen.

answered Apr 28, 2019 at 1:01

Chris B.

5,7711 gold badge17 silver badges31 bronze badges

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

2 Comments

YellowMinion Over a year ago

Thanks alot. this is what I wanted. And why I wanted the data like in separate arrays is because at the next order processing step I want to create each Company's orders separately. So for that order creation, can I still use this way like this.state.records[company] ?

Chris B. Over a year ago

Exactly. To be clear the company parameter used there is only accessible in the map function for the object's keys, but all the data is always available at this.state.records["company name"].

Atul · Accepted Answer · 2019-04-28 00:40:56Z

1

Try below code, it should help you

.then(response => {
    let companies = [];
    let companiesData = response.data.records;;
    for (let company in companiesData)
    {
      companies.push(companiesData[company])
    }
    console.log(companies); 
})

edited Apr 28, 2019 at 0:40

answered Apr 28, 2019 at 0:34

Atul

3,4732 gold badges15 silver badges17 bronze badges

2 Comments

Atul Over a year ago

short version of code is let compaines = Object.values(response.data.records);

YellowMinion Over a year ago

Thanks alot. This answers my question too.

Collectives™ on Stack Overflow

How to iterate JSON nested array in REACT JS API call?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related