Reactjs / JSON object, stuck trying to display the data within a nested JSON object

Question

I am stuck trying to display a certain value in a nested object in reactjs. This approach i'm using works for the a one nested object as follows:

CODE DOESN'T WORK, UNABLE TO DISPLAY THIS DATA(Unable to fetch the data from customfield_11400 'value')

    {this.state.tickets && this.state.tickets.issues && this.state.tickets.issues.fields && this.state.tickets.issues.fields.customfield_11400 && Object.keys(this.state.tickets.issues.fields.customfield_11400).map((issue, i) =>
    (
       <tr key={i}>
          <td> {this.state.tickets.issues.fields.customfield_11400[i].value} </td>
       </tr>
    ))}

CODE WORKS ABLE TO DISPLAY THIS DATA (I'm able to fetch the 'key' value)

      {this.state.tickets && this.state.tickets.issues && Object.keys(this.state.tickets.issues).map((issue, i) =>
      (
         <tr key={i}>
            <td> {this.state.tickets.issues[i].key} </td>
         </tr>
      ))}

Trying this solution doesnt seem to work

  { this.state.tickets && this.state.tickets.issues && Object.keys(this.state.tickets.issues).map((issue, issue_index) => (

      this.state.tickets && this.state.tickets.issues && this.state.tickets.issues.fields && this.state.tickets.issues.fields.customfield_11400 && Object.keys(this.state.tickets.issues.fields.customfield_11400).map((airlineName, field_index)=>(
       <li key={field_index}>
         Airline Name: {this.state.tickets.issues[issue_index].fields.customfield_11400[field_index].value }
       </li>
     )
   )))}

Trying this solution 2 doesnt seem to work

const fields = () => this.state.tickets && this.state.tickets.issues && Object.keys(this.state.tickets.issues).map((issue, issue_i) => {
  return this.state.tickets && this.state.tickets.issues && this.state.tickets.issues.fields && this.state.tickets.issues.fields.customfield_11400 && Object.keys(this.state.tickets.issues.fields.customfield_11400).map((field, field_i) => {
    return (<div> {this.state.tickets.issues[issue_i].fields.customfield_11400[issue_i].value} </div>)
  })
});

  return 
  (
   {fields()}
  );

Lasse Sviland · Accepted Answer · 2018-10-01 18:45:27Z

0

According to your image above, issues and customfield_11400 are arrays, therefor, you need to access it like this:

this.state.tickets.issues[issue_index].fields.customfield_11400[field_index].value

Since you are looping over the issues i is the index of the issue. You might need another loop looping over customfield_11400, or if customfield_11400 only have one element you can use something like this:

this.state.tickets.issues[i].fields.customfield_11400[0].value

Edit:

To loop over both arrays, you could do something like this, however, you will have to add null checks:

const fields = this.state.tickets.issues.map(issue => {
  return issue.fields.customfield_11400.map(field => {
    return (<div> {field.value} </div>)
  })
});

edited Oct 1, 2018 at 18:45

answered Oct 1, 2018 at 18:12

Lasse Sviland

1,52711 silver badges23 bronze badges

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

6 Comments

leo jr silao Over a year ago

Oh I just realized it, yeah, issues is an array and customfield_11400 is an array as well

leo jr silao Over a year ago

So there would be 2 Object.keys.map?

leo jr silao Over a year ago

Hmm can you check what I did, i did what you suggested still doesnt seem to work

Lasse Sviland Over a year ago

Updated with an example of how you can loop over both arrays

leo jr silao Over a year ago

Hmm still doesn't work, i posted how I did it similarly to what you did to loop over 2 arrays

|

Collectives™ on Stack Overflow

Reactjs / JSON object, stuck trying to display the data within a nested JSON object

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related