Iterate through a nested json object array in the render (ReactJS)

Question

I'm trying to iterate and display certain values of a JSON on my web application using ReactJS.

My render looks like this:

render() {

  const orders = 
  Object.keys(this.state.data).map((e,i) => {
   return (
     <div key = {i}>
       <div>ID: {this.state.data[e].id}</div>
       <div>Email: {this.state.data[e].email}</div>
       <div>Note: {this.state.data[e].note}</div>
       <div>{this.findValue(e)}</div>
     </div>
   )
 })

 return (
   <div>
     <div>
       {orders}
     </div>
   </div>
 );
}

Now everything looks fine until I run this.findValue where it immediately returns after the first iteration instead of returning multiple divs.

findValue = (e) => {
    for(let key2 in this.state.data[e].line_items) {    
        return (
          <div>
            Line item: {this.state.data[e].line_items[key2].title}
         </div>
        )
   }

How would I be able to return every line item? Thanks in advance.

Tholle · Accepted Answer · 2018-08-08 19:55:57Z

1

When you return something from the function given to map, you are just returning what the current element should be mapped to in the new array. When you return inside the for..in, you are returning from the findValue method instead.

You could use map on the array of keys in line_items as well.

findValue = e => {
  const { line_items } = this.state.data[e];
  return Object.keys(line_items).map(key => (
    <div key={key}>Line item: {line_items[key].title}</div>
  ));
};

answered Aug 8, 2018 at 19:55

Tholle

113k22 gold badges209 silver badges198 bronze badges

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

Collectives™ on Stack Overflow

Iterate through a nested json object array in the render (ReactJS)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related