Parsing nested json in Reactjs

Question

I need to parse nested json (coming this data from an api) to normal json (for creating react table and visualizations) like below :

nested json :

{ "count":28, 
 "value":[ { 
"id":"dbff7b54",
 "name":"cleansed", 
"description":"for business", 
"url":"https://www.google.com",
 "state":"wellFormed",
 "revision":745,
 "visibility":"private",
 "lastUpdateTime":"2021-02-23T08:57:34.26Z" },
 { 
"id":"7051f961",
 "name":"pub",
 "description":"for testing", 
"url":"https://wikipedia.com",
 "state":"wellFormed",
 "revision":9690,
 "visibility":"private",
 "lastUpdateTime":"2020-08-21T13:06:13.97Z" 
   } ] }

to this json :

   "value":
      {
         "id":"dbff7b54",
         "name":"cleansed",
         "description":"for business",
         "url":"https://www.google.com",
         "state":"wellFormed",
         "revision":745,
         "visibility":"private",
         "lastUpdateTime":"2021-02-23T08:57:34.26Z"
      },
      {
         "id":"7051f961",
         "name":"pub",
         "description":"for testing",
         "url":"https://wikipedia.com",
         "state":"wellFormed",
         "revision":9690,
         "visibility":"private",
         "lastUpdateTime":"2020-08-21T13:06:13.97Z"
      }

Here is my code in react :

import axios from "axios";
import React,{useEffect,useState} from "react";
const App = () => {
const[data,setData] = useState()
let api = "myapi";
let token = "mytoken";
    
        useEffect(() => {
            axios.get(api, { headers: {"Authorization" : `Basic ${token}`} })
        .then(res => {
          
            console.log(res)
            setData(res.data)

        })
        .catch(err =>{
            
            console.log(err)
        })
            
        },[]);

    return(
        <div>
           
        </div>
    )

  }
export default App;  

Can someone please help me with parsing json data. Thanks in advance.

Answer 1

I suspect you are able to pick out the correct chunk of the Object, i.e. res.data.value but I think the issue here is that your initial state is undefined. If your render doesn't account for this then it's likely throwing a "Cannot access ... of undefined" error.

1. Provide valid initial state. Since res.data.value is an array I'll make the assumption that's what you are trying to render into a table. Start with an initial empty array for the data state.

   const[data, setData] = useState([]);
   

2. Select out the nested array from the response to save into state.

   useEffect(() => {
     axios.get(api, { headers: {"Authorization" : `Basic ${token}`} })
       .then(res => {
         console.log(res);
         setData(res.data.value); // <-- the array
       })
       .catch(err => {
         console.log(err)
       });
   },[]);
   

3. Pass the data state to the table component or map it to rows yourself (data.map(row => <tr>......</tr>)), depends on your needs.

Answer 2

See the below my code. It works for me:

let data = JSON.stringify({ "count":28, "value":[ { "id":"dbff7b54", "name":"cleansed", "description":"for business", "url":"https://www.google.com", "state":"wellFormed", "revision":745, "visibility":"private", "lastUpdateTime":"2021-02-23T08:57:34.26Z" }, { "id":"7051f961", "name":"pub", "description":"for testing", "url":"https://wikipedia.com", "state":"wellFormed", "revision":9690, "visibility":"private", "lastUpdateTime":"2020-08-21T13:06:13.97Z" } ] });

let parsedData = JSON.parse(data);

and HTML is like:

 <table>
    {parsedData.value.map((item, index) => {
      return (
        <tr>
          <td>{item.name}</td>
          <td>{item.id}</td>
        </tr>
      );
    })}
  </table>

Answer 3

From my understanding, you want to get the value object and construct a table. But i don't know if you are using some react table library or not

Here is the example with the data you provided and constructed in plain table format: https://codesandbox.io/s/loving-shannon-jd6md?file=/src/App.js

1. Build the header by using the first row's keys: (assumed your object structure is consistent)

const firstRecord = data[0];
const firstRecordKeys = Object.keys(firstRecord);
firstRecordKeys.map((key) => <th>{key}</th>);

2. Build the body by looping the data out

data.map((d) => {
   return (
      // for each object, wrap with <tr>
      <tr>
        {
            // loop each object by key to get the value (d[key]),
            // or using Object.entries() as you like
            // and wrap with <td>
            Object.keys(d).map((key) => (
              <td>{d[key]}</td>
            ))
        }
      </tr>
   );
});

---

P.S. A simpler version of the above example, see if it is what you want https://codesandbox.io/s/cool-leavitt-qwtsm?file=/src/App.js