I am learning React and came across a slightly tricky problem for my level. From my API call I get a response which is an array of objects. I want to display this in a list. To get the idea of how the response looks, this is an example (it is array of JSON)

data = [
  {0: {name: "tom"}},
  {1: {name: "Pope"}},
  {2: {name: "jack"}}
 ];

To render this information in my container I try something like this:

render() {
  const items = data.map((d) => <li>{d.name}</li>);

  return (
    <div>
      <ul>
        {items}
      </ul>
    </div>
  )
}

But it's not printing anything. I don't even get any error. I think the way I am parsing the response is wrong.

What is the correct way to solve my tricky problem?

I am learning React and came across a slightly tricky problem for my level. From my API call I get a response which is an array of objects. I want to display this in a list. To get the idea of how the response looks, this is an example (it is array of JSON)

data = [
  {0: {name: "tom"}},
  {1: {name: "Pope"}},
  {2: {name: "jack"}}
 ];

To render this information in my container I try something like this:

render() {
  const items = data.map((d) => <li>{d.name}</li>);

  return (
    <div>
      <ul>
        {items}
      </ul>
    </div>
  )
}

But it's not printing anything. I don't even get any error. I think the way I am parsing the response is wrong.

What is the correct way to solve my tricky problem?

• javascript
• reactjs
• redux
• react-redux

• if it really is JSON, then you have to parse it using JSON.parse – JJJ Commented Nov 7, 2017 at 18:41

3 Answers 3

On the

const items = data.map((d) => <li>{d.name}</li>);

Your d is the object: {0: {name: "tom"}, not only {name: "tom"}

So you will need to take the value for each such object first.

This (although probably not optimal) will do the job:

const items =data.map((d) => {
  const val= Object.values(d)[0];
  return (<li>{val.name}</li>)
});

Hope it helps

The problem, as @rafahoro explained, it sthat each object contains a unique property, and the actual object with the value is inside that property.

If you can, change the API, so the response would be simple objects. The other options are to extract the value from each object, or ff the properties in the objects are incremental (0, 1, 2 like the example), you can convert it to an object using by:

1. Merge all object, into one by spreading the array into Object#assign
2. Add the length property

3. Convert back to an array using Array#from

   const arr = Array.from(Object.assign({ length: data.length }, ...data));

Demo:

const data = [
  {0: {name: "tom"}},
  {1: {name: "Pope"}},
  {2: {name: "jack"}}
];

const arr = Array.from(Object.assign({ length: data.length }, ...data));

class Demo extends React.Component {
  render() {
    const items = this.props.data.map((d) => <li>{d.name}</li>);

    return (
      <div>
        <ul>
          {items}
        </ul>
      </div>
    )
  }
}

ReactDOM.render(
  <Demo data={arr} />,
  demo
);

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="demo"></div>

Your error is in the way you are extracting the data. The reference d is to an object that contains a 0, 1, 2 property, which values is another object that contains a name property.

Based on the pattern of the object you can get the name object by using the current index:

const items = data.map((d,i) => (<li>{d[i].name}</li>));

Demo:

const data = [
  {0: {name: "tom"}},
  {1: {name: "Pope"}},
  {2: {name: "jack"}}
];

class Demo extends React.Component {
  render() {
        const items = this.props.data.map((d,i) => (<li>{d[i].name}</li>));

    return (
      <div>
        <ul>
          {items}
        </ul>
      </div>
    )
  }
}

ReactDOM.render(
  <Demo data={data} />,
  demo
);

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="demo"></div>