时间戳

首页 > 解决方案 > 在reactjs中将嵌套的json数据解析为json

reactjs - 在reactjs中将嵌套的json数据解析为json

问题描述

我需要将嵌套的 JSON 数据解析为来自 API 的普通 JSON，并且需要将该 JSON 数据传递给反应表（使用 react-table 库），如下所示：

嵌套的 Json 数据：

      {
       "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
            }

对于这个 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"
         
        
      },

下面是代码：

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;

我可以在控制台中看到数据，但无法像上面那样解析 JSON。有人可以帮忙吗？提前致谢

标签： reactjsreact-hooksreact-functional-componentreact-fullstackreact-jsonschema-forms

解决方案

我的理解是，您只需要 JSON（API 结果）的值部分。

所以而不是做

setData(res);

你应该做

setData(JSON.parse(res).value)

推荐阅读