如何管理 json 属性数组以在 ReactJS 中显示

Question

因此，我必须从 API 中返回数据，如下面的 React UI 中的数据。 我有点困惑，在属性数组中，所有数据都具有相同的名称但指向不同的属性。 在 position 中，它指的是姓名、其他性别和电话号码。 处理这种类型的 api 并在 UI 中返回每个属性的最佳方法是什么？

{
    "data": [
        {
            "type": "Other",
            "place": "US",
            "attributes": [
                {
                    "displayName": "name",
                    "value": "Jenna"
                },
                {
                    "displayName": "Gender",
                    "value": "Female"
                },
                {
                    "displayName": "Phone_number",
                    "value": "+12346543"
                }
            ]
        }
        
    ]
}

我有的代码

import React from "react";
import People from "./data.json";

const Data = () => {
  return (
    <div>
      {People.data.map((details) => (
          <div>
        <p>
          Type: {details.type}
        </p>
        <p>
         place: {details.place}
        </p>
     /*{   <p>name: {}</p> } */
       /* { <p>gender: {}</p> */ }
        /* {<p>phone number: {}</p> } */
 
        </div>
      ))}
    </div>
  );
};

export default Data;

Answer 1

使用 details.attributes 中的方法过滤器为 select 具体显示名称

details.attributes.filter(x => x.displayName === 'name')[0]

Answer 2

由于您在这种 api 响应中有嵌套数组，因此您应该迭代第一个列表，然后对于每个属性列表，您可以迭代并获取数据。 希望它会有所帮助，干杯。

import React from "react";
import People from "./data.json";

const Data = () => {
    return (
      <div>
        {People.data.map((place) => (
          <div>
            // place data
            {place.type}
            {place.place}
            {place.attributes.map(attribute => (
              <div>
              // attributes
                {attribute.displayName}
                {attribute.value}
              </div>
            )}
          </div>
        ))}
      </div>
    );
};

export default Data;

Answer 3

import React from "react";
import People from "./data.json";
function App() {
  const people = {
    "data": [
        {
            "type": "Other",
            "place": "US",
            "attributes": [
                {
                    "displayName": "name",
                    "value": "Jenna"
                },
                {
                    "displayName": "Gender",
                    "value": "Female"
                },
                {
                    "displayName": "Phone_number",
                    "value": "+12346543"
                }
            ]
        }
        
    ]
}
  return (
    <div>
      {people.data.map((details) => (
        <div>
          <p>
            Type: {details.type}
          </p>
          <p>
          place: {details.place}
          </p>
          <p>
            Name: {details.attributes.filter(x => x.displayName === 'name')[0].value}
          </p>
          <p>
            Gender: {details.attributes.filter(x => x.displayName === 'Gender')[0].value}
          </p>
          <p>
            Phone Number: {details.attributes.filter(x => x.displayName === 'Phone_number')[0].value}
          </p>                
        </div>
      ))}
    </div>
  );
}

export default App;