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]);
    };

Answer 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>
  )
}

Answer 2

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