Parsing nested json data to json in reactjs

Question

I need to parse nested JSON data to normal JSON which is coming from an API and need to pass that JSON data to a react table (am using the react-table library) like below :

Nested Json data:

      {
       "value":[
          {
             "id":"d38070fd",
             "name":"webwhatsapp",
             "url":"webwhatsapp.com",
             "project":{
                "id":"89ea5860-8dce",
                "name":"whatsapp",
                "url":"",
                "state":"well",
                "revision":10612,
                "visibility":"private",
                "lastUpdateTime":"2021-01-27T11:30:55.523Z"
             },
             "defaultBranch":"branchname",
             "size":33758407,
             "remoteUrl":"remote",
             "sshUrl":"ssh",
             "webUrl":"weburl",
             "isDisabled":false
          },
          {
             "id":"b0dd02f7",
             "name":"git",
             "url":"github.com",
             "project":{
                "id":"89ea5860",
                "name":"core",
                "url":"github.com",
                "state":"well",
                "revision":10612,
                "visibility":"private",
                "lastUpdateTime":"2021-01-27T11:30:55.523Z"
             },
             "defaultBranch":"branchname",
             "size":30654059,
             "remoteUrl":"url",
             "sshUrl":"url.git",
             "webUrl":"url.git",
             "isDisabled":false
          },
            ]
             },
             count: 90
            }

To this JSON:

{
   "value":[
      {
         "id":"d38070fd",
         "name":"webwhatsapp",
          "url":"webwhatsapp.com",
         "defaultBranch":"branchname",
         "size":33758407,
         "remoteUrl":"remote",
         "sshUrl":"ssh",
         "webUrl":"weburl",
         "isDisabled":false
         "project.id":"89ea5860-8dce",
          "project.name":"whatsapp",
          "project.url":"",
           "project.state":"well",
           "project.revision":10612,
           "project.visibility":"private",
           "project.lastUpdateTime":"2021-01-27T11:30:55.523Z"
         
        
          
      },
      {
         "id":"b0dd02f7",
         "name":"git",
         "url":"github.com",
          "defaultBranch":"branchname",
         "size":30654059,
         "remoteUrl":"url",
         "sshUrl":"url.git",
         "webUrl":"url.git",
         "isDisabled":false
            "project.id":"89ea5860",
            "project.name":"core",
            "project.url":"github.com",
            "project.state":"well",
            "project.revision":10612,
            "project.visibility":"private",
            "project.lastUpdateTime":"2021-01-27T11:30:55.523Z"
         
        
      },

Below is the code:

import React, { useState, useEffect } from "react";
import { Row, Col } from "react-bootstrap";
import axios from "axios";

const App = () => {
   const[data,setData] = useState()
    let api = "apiurl";
    let token = "token";
        
            useEffect(() => {
                axios.get(api, { headers: {"Authorization" : `Basic ${token}`} })
            .then(res => {
              
                console.log(res)
                setData(res)
            })
            .catch(err =>{
                
                console.log('error',err)
            })
                
            },[]);
            
            }
     
export default App;

I can see the data in the console but am unable to parse JSON like above. Can someone please help with this? Thanks in advance

@akhtarvahid yes am flattening project object because i need that type of json format for plotting graphs also — SaiRupa Golla
– SaiRupa Golla, Commented May 7, 2021 at 9:31

Nayan shah · Accepted Answer · 2021-05-07 09:15:50Z

1

What I understand is, you need only the value part of JSON(API result).

so instead of doing

setData(res);

you should do

setData(JSON.parse(res).value)

answered May 7, 2021 at 9:15

Nayan shah

5513 silver badges8 bronze badges

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

1 Comment

SaiRupa Golla Over a year ago

when i tried this in react table it is showing rows are blank

Collectives™ on Stack Overflow

Parsing nested json data to json in reactjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related