0

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

Improve this question
1
  • There is only one array? Commented Oct 1, 2018 at 14:11

3 Answers 3

Reset to default
3

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>
)
))}
Improve this answer
Sign up to request clarification or add additional context in comments.

16 Comments

Hmm using the first method where tickets.issues is an array, not relating to fields, i get an error, TypeError: Cannot convert undefined or null to object
hmm, test if they exist, {tickets && tickets.issues && Object.keys(...)} because they only becomes available after api call.
Yeah.. I see what's happening now, it renders before i fetch my JSON data in my componentDidMount function, how do i go from there, that's why the object is null. Is there a way to get the data before it renders?
It was a dumb mistake XDDDD
No problem, it happens sometimes to me either.
|
2

tickets.issues is an Array of Objects, so:

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

3 Comments

Let me try this :D
How would i display it in the render function?
Not on the Mount function
1

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>
Improve this answer

8 Comments

It doesn't display anything o.o
It should work now I made small mistake. Please check the updated answer
Still nothing o.o
Ohh i just realized theres no fields
It's only tickets.issues.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.