CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
ksernow
ksernow

Reputation: 714

How to render array of JSON data in React Redux

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?

Upvotes: 0

Views: 6475

Answers (3)

Evil Dr. PorkChop
Evil Dr. PorkChop

Reputation: 379

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>

Upvotes: 1

Ori Drori
Ori Drori

Reputation: 191976

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.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>

Upvotes: 1

rafahoro
rafahoro

Reputation: 1257

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

Upvotes: 5

Related Questions