如何从 React 中的 JSON 响应中提取数据？答案

【问题标题】：How to pick data from JSON response in React?如何从 React 中的 JSON 响应中提取数据？
【发布时间】：2021-11-12 17:45:52
【问题描述】：

我有一个以下格式的 JSON 响应，我想在 React 中从中提取数据。我尝试了以下方式，但到目前为止没有成功并获得TypeError: valuesArray.map is not a function。任何人都可以看看这里要改变什么。

代码：

const valuesArray = JSON.parse(data);
const users = valuesArray.map((u) => (
          <tr key={u.builder}>
            <td>{u.builder}</td> 
            <td>{u.account_id}</td>
          </tr>
        ));

JSON

{
  "44876989": [
    {
      "Key": "builder",
      "Value": "test@outlook.com"
    },
    {
      "Key": "account_id",
      "Value": "030303"
    }
  ],
  "2207966": [
    {
      "Key": "builder",
      "Value": "aabc@gmail.com"
    },
    {
      "Key": "account_id",
      "Value": "002235"
    }
  ],
  "5393": [
    {
      "Key": "builder",
      "Value": "xyz@abc.com"
    },
    {
      "Key": "account_id",
      "Value": "000mmm"
    }
  ]
}

【问题讨论】：

什么是 valuesArray？那是 JSON 吗？
如果 valuesArray 是那个 JSON，它是一个对象而不是数组。
是的，我只是在解析 valuesArray const valuesArray = JSON.parse(data); 中的 JSON 响应
由于 JSON 在解析后是一个对象map() 在这里没有任何意义。您可以将 JSON 转换为适用于您的 map() 代码的形状，也可以更改 map() 以适用于数据的现有形状。

标签： reactjs react-native react-redux react-hooks react-router

【解决方案1】：

您将获得一个包含属性数组的对象。你应该把它转换成一个对象数组，然后渲染它。

注意：当您从 API 获取信息或从 redux 存储（使用选择器）获取信息时，您应该将对象转换为可渲染数组。

const Example = ({ values }) => {
  const valuesArray = Object.values(values)
    .map(arr =>
      Object.fromEntries(
        arr.map(({ Key, Value }) => [Key, Value])
      )
    );

  const users = valuesArray.map((u) => (
    <tr key={u.builder}>
      <td>{u.builder}</td> 
      <td>{u.account_id}</td>
    </tr>
  ));

  return (
    <table>
      <tbody>
        {users}
      </tbody>
    </table>
  );
};

const values = {"5393":[{"Key":"builder","Value":"xyz@abc.com"},{"Key":"account_id","Value":"000mmm"}],"2207966":[{"Key":"builder","Value":"aabc@gmail.com"},{"Key":"account_id","Value":"002235"}],"44876989":[{"Key":"builder","Value":"test@outlook.com"},{"Key":"account_id","Value":"030303"}]};

ReactDOM.render(
  <Example values={values} />,
  root
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

虽然你可以通过解构属性数组中每个对象的Value来直接渲染它，但如果保持属性的顺序，但这可能容易出错：

const Example = ({ values }) => {
  const users = Object.values(values)
    .map(([{ Value: builder }, { Value: account_id }]) => (
      <tr key={builder}>
        <td>{builder}</td> 
        <td>{account_id}</td>
      </tr>
    ));

  return (
    <table>
      <tbody>
        {users}
      </tbody>
    </table>
  );
};

const values = {"5393":[{"Key":"builder","Value":"xyz@abc.com"},{"Key":"account_id","Value":"000mmm"}],"2207966":[{"Key":"builder","Value":"aabc@gmail.com"},{"Key":"account_id","Value":"002235"}],"44876989":[{"Key":"builder","Value":"test@outlook.com"},{"Key":"account_id","Value":"030303"}]};

ReactDOM.render(
  <Example values={values} />,
  root
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

【讨论】：

再问一个问题，如果我想获得值 5393 、 44876989 以及表中的相应值怎么办？

【解决方案2】：

由于您正在处理一个包含数组的对象，因此我想出了一个简单的逻辑来提取您需要的数据，

const valuesArray  = {
    44876989: [
      {
        Key: 'builder',
        Value: 'test@outlook.com',
      },
      {
        Key: 'account_id',
        Value: '030303',
      },
    ],
    2207966: [
      {
        Key: 'builder',
        Value: 'aabc@gmail.com',
      },
      {
        Key: 'account_id',
        Value: '002235',
      },
    ],
    5393: [
      {
        Key: 'builder',
        Value: 'xyz@abc.com',
      },
      {
        Key: 'account_id',
        Value: '000mmm',
      },
    ],
  };

 
  return (
    <table>
      {/* mapping through the keys of the object. */}
      {Object.keys(valuesArray).map((a) => {  
        {/* each item here is an array. Find the object you need */}
        const builder =   valuesArray[a].find(v => v.Key === "builder").Value; 
        const account_id =   valuesArray[a].find(v => v.Key === "account_id").Value;   
       
        return (
          <tr key={builder}>
            <td>{builder}</td>
            <td>{account_id}</td>           
          </tr>
        ); 
      })}
    </table>
  );

【讨论】：