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.