CODEWITHSUNDEEP
javascriptjsonreactjs
leo jr silao
leo jr silao

Reputation: 37

How to loop through nested objects in reactjs?

Since this in an object i doing this but it doesn't work. How would I get the 'key' field through a loop? 

  <div>
      <ul>
        {tickets && tickets.issues && Object.keys(tickets.issues).map((issue, i) =>
        (
          <li key={i}>
            Issue number: {tickets.issues.key}
          </li>
         ))}
      </ul>
  </div>

SOLUTION

   <div>
      <ul>
       {this.state.tickets && this.state.tickets.issues && Object.keys(this.state.tickets.issues).map((issue, i) =>
       (
        <li key={i}>
           Issue number: {this.state.tickets.issues[i].key}
        </li>
      ))}
      </ul>
  </div>

enter image description here

Upvotes: 0

Views: 6359

Answers (3)

Hemadri Dasari
Hemadri Dasari

Reputation: 34014

A simple solution

  <div>
    <ul>
      {tickets && tickets.issues && Object.keys(tickets.issues).map((issue, i) => 
     (
      <li key={i}>
         Issue number: {tickets.issues.key}
      </li>
    ))}
    </ul>
  </div>

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85653

Looking at your response image the key field exists in issues[] but not in fields, so it should be fine just (no nesting required):

{ Object.keys(tickets.issues).map((issue, i) => (
  <li key={issue.key}>
   Issue number: {issue.key}
  </li>
))}

If you have the key in fields (not expanded in the image)

{ Object.keys(tickets.issues).map((issue, i) => (
  Object.keys(issue.fields).map(field=>(
 <li key={field.key}>
   Issue number: { field.key }
 </li>
)
))}

Upvotes: 3

Francesco
Francesco

Reputation: 1413

tickets.issues is an Array of Objects, so:

const { issues } = tickets;
issues.map(issue => console.log(issue.key));

Upvotes: 2

Related Questions