How to render array of JSON data in React Redux

Question

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?

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

rafahoro · Accepted Answer · 2017-11-07 18:46:49Z

5

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

answered Nov 7, 2017 at 18:46

rafahoro

1,26713 silver badges19 bronze badges

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

Comments

Ori Drori · Accepted Answer · 2017-11-07 19:00:19Z

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:

Merge all object, into one by spreading the array into Object#assign
Add the length property
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.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

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

Ori Drori · Accepted Answer · 2017-11-08 09:33:03Z

1

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.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

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

edited Nov 8, 2017 at 9:33

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

answered Nov 7, 2017 at 18:46

Evil Dr. PorkChop

3792 silver badges9 bronze badges

6 Comments

Evil Dr. PorkChop Over a year ago

based on the pattern of the object you can achieve what you want by doing this as the index const items = this.data.map((d,i) => { return(<li>{d[i].name}</li>) }); else the other option is to extract the inner objects so the iterator would have direct access to the name property on the object.

Evil Dr. PorkChop Over a year ago

here's a reference to why it makes sense at least to me I'm assuming react is using the same params as the native map operator developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Ori Drori Over a year ago

Hey Dr. your idea works, and is really easy to implement. Move the comments into the answer. You can copy my demo code, and show your solution.

Evil Dr. PorkChop Over a year ago

Thanks Ori, as long as the OP figured out his issue I'm happy thanks for the comment :)

Evil Dr. PorkChop Over a year ago

Cool beans thanks Ori noted I'm new to the whole formatting will take my time next time :)

|

Collectives™ on Stack Overflow

How to render array of JSON data in React Redux

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related