1

我需要将嵌套的 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数据吗？提前致谢。

4

3 回答 3

0

我怀疑你能够挑选出正确的对象块，即，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>)），取决于您的需要。

于 2021-05-05T09:15:42.093 回答
0

请参阅下面的我的代码。这个对我有用：

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>
于 2021-05-05T09:29:06.133 回答
0

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

这是您以普通表格格式提供和构建的数据的示例： 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>
   );
});

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

于 2021-05-05T09:29:47.713 回答