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

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

{
    "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;

---

使用details.attributes中的方法筛选器选择specifical displayName

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

---

使用details.attributes中的方法筛选器选择specifical displayName

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

---

因为在这种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;

---

因为在这种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;

---

你的预期产出是多少？是否要以正确的命名约定显示displayName？预期的输出是什么？是否要以适当的命名约定显示displayName？@RowanFrank欢迎使用。如果成功了，请你接受答案并投赞成票。@RowanFrank欢迎。如果成功的话，请你接受答案并投赞成票。