CODEWITHSUNDEEP
javascriptreactjs
Rowan Frank
Rowan Frank

Reputation: 117

How manage a json array of attributes for display in ReactJS

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;

Upvotes: 0

Views: 868

Answers (3)

Abu Sufian
Abu Sufian

Reputation: 1054

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;

Upvotes: 0

Marco Terzolo
Marco Terzolo

Reputation: 551

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;

Upvotes: 1

jguyet
jguyet

Reputation: 75

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

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

Upvotes: 1

Related Questions