在 Reactjs 中解析嵌套 json

Question

我需要将嵌套的 json（来自 api 的数据）解析为正常的 json（用于创建反应 table 和可视化），如下所示：

嵌套 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" 
   } ] }

到这个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"
      }

这是我的反应代码：

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;

谁能帮我解析 json 数据。提前致谢。

Answer 1

我怀疑您能够挑选出对象的正确块，即 res.data.value 但我认为这里的问题是您的初始状态未定义。如果您的渲染没有考虑到这一点，那么它可能会抛出“无法访问...未定义的”错误。

提供有效的初始状态。由于 res.data.value 是一个数组，我将假设这就是您要渲染到 table 中的内容。从 data 状态的初始空数组开始。
```
const[data, setData] = useState([]);
```

Select 从响应中取出嵌套数组保存到状态中。

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

将data状态传递给table组件或自己将其映射到行（data.map(row => <tr>......</tr>)），取决于您的需要。

Answer 2

查看下面我的代码。它对我有用：

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);

和HTML就像：

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

Answer 3

根据我的理解，你想得到值object并构造一个table。但是我不知道你是否在使用一些反应table库

这是您提供的数据示例，并以普通 table 格式构建： https://codesandbox.io/s/loving-shannon-jd6md?file=/src/App.js

使用第一行的键构建 header：（假设你的object结构是一致的）

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

通过循环输出数据构建 body

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。上面例子的一个更简单的版本，看看是不是你想要的 https://codesandbox.io/s/cool-leavitt-qwtsm?file=/src/App.js

在 Reactjs 中解析嵌套 json

Parsing nested json in Reactjs

reactjs

react-fullstack

react-jsonschema-forms

react-hooks

react-functional-component