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

Question

So, I have to return data from an API like the one below in the UI in React. Im a bit confused about the fact that in the attributes array, all data have the same names but point to different attributes. In a position it refers to name, the other gender and phone number. Whats the best way to deal with this type of api and return each atribute in the UI?

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

Code I have

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

Use the method filter in details.attributes for select specifical displayName

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

Answer 2

since you have nested array in this kind of api response you should iterate over the first list and then for each attributes list you can iterate and get your data. hope it will help, cheers.

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;