在 Reactjs 中解析嵌套的 json

Question

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

嵌套 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

据我了解，你想获取值对象并构造一个表。 但我不知道你是否使用了一些反应表库

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

1. 使用第一行的键构建标题： （假设你的对象结构是一致的）

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

1. 通过循环输出数据来构建主体

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

---

附： 上面例子的一个更简单的版本，看看是不是你想要的 https://codesandbox.io/s/cool-leavitt-qwtsm?file=/src/App.js

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

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

1. 提供有效的初始状态。由于res.data.value 是一个数组，我将假设这就是您要渲染到表格中的内容。从data 状态的初始空数组开始。

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

2. 从响应中选择嵌套数组保存到状态。

   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. 将data 状态传递给表格组件或自己将其映射到行 (data.map(row => <tr>......</tr>))，这取决于您的需要。