Extract data from API Object in React

Question

I'm trying to retrieve data from an API with the following JSON output and I have a function in react that I call.

I can see the api output in console.log(users) so the data is being passed into the function.

I am trying to output the array contained in "data" but can't seem to access the data.

{
  "dataCount": 2,
  "data": [
    {
      "name": "Test review header",
      "text": "This is  adescription for a test review",
      "img": "http://pngimg.com/upload/pigeon_PNG3423.png"
    },
    {
      "name": "Test review header2",
      "text": "This is  adescription for a test review2",
      "img": "http://pngimg.com/upload/pigeon_PNG3422.png"
    }
  ]
}

renderUsers() {

    const { users } = this.props;

    console.log(users);

    Object.keys(users).map(name => users[name])
        console.log(users[name]);
    };

Perhaps you can provide (a part) of the object you receive from the api? — Jules
– Jules, Commented Mar 7, 2017 at 14:35
I have updated the question to make it clearer, In chrome it appears as an Object and I'm trying to access the data array within this object — tom harrison
– tom harrison, Commented Mar 7, 2017 at 14:47

Srinivas Damam · Accepted Answer · 2017-03-07 15:14:36Z

1

The data you need to iterate over is present in the data field of users.

When you are using lists you have to specify the key property, to make react keep track of each item in list.

renderUsers() {
  const { users } = this.props;
  return (
    <ul>
     { 
        users.data.map(name => {
            <li key={name}>users[name]</li>
        }) 
     }
    </ul>
  )
}

answered Mar 7, 2017 at 15:14

Srinivas Damam

3,0652 gold badges20 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tom harrison Over a year ago

This works fine when I attempt to access api.github.com/users but when I hit my own api I get caught (in promise) TypeError: users.map is not a function, presumably because map is not available on an object?

tom harrison Over a year ago

or I get Uncaught TypeError: Cannot read property 'map' of undefined

Jules · Accepted Answer · 2017-03-07 15:02:54Z

First of all, I don't use react but what you want should be the same in other javascript frameworks.

Are you sure that it is JSON you receive?

We need to be sure that you receive a JSON object and not normal text. Lets say you have a function parseResponse(data). We can call JSON.parse(data) to parse the data param to a json object. It is also possible that you store the result in a variable.

Using the JSON object

When we are sure you have the param parsed to a JSON object, we get it's data. For example, if you want to get the name of the first object in data, you can call: parsedJson.data[0].name where parsedJson is the result of JSON.parse(data), data is an array of objects in the JSON, 0 is the first object in the array

It is possible that you have this kind of function then:

function parseResponse(data) {
  var parsedJson = JSON.parse(data);
  for(var i = 0; i < parsedJson.data.length; i++) {
      console.log(parsedJson.data[i].name);
  }
}

see jsfiddle

Collectives™ on Stack Overflow

Extract data from API Object in React

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related