ReactJS nested looping on JSON object

Question

I did not get the exact answer I needed to fix the issue I am seeing. I have a JSON object like below,

   {  
      "id":1,
      "time":"2018-04-15 22:04:21",
      "alert":{  
         "id":6,
         "name":"Alert Test 416"
      },
      "source":{  
         "type":"Service",
         "id":37379,
         "name":"489-127-2367"
      },
      "value":1310384.000000    },    {  
      "id":1,
      "time":"2018-04-15 22:04:21",
      "alert":{  
         "id":6,
         "name":"Alert Test 416"
      },
      "source":{  
         "type":"Service",
         "id":37826,
         "name":"489-332-4137"
      },
      "value":1352071.000000    },    {  
      "id":2,
      "time":"2018-04-16 22:04:36",
      "alert":{  
         "id":6,
         "name":"Alert Test 416"
      },
      "source":{  
         "type":"Service",
         "id":37364,
         "name":"489-776-9604"
      },
      "value":6021.000000    }

There are two entries with id = 1 and one entry with id = 2. I would like to see an output like below,

<tbody> 
<tr id="1" role="row"> 
<td>2018-04-15 22:04:21</td><td>Alert Test 416</td><td>Service</td><td>489-127-2367</td></tr> 
<tr id="1" role="row"> 
<td>2018-04-15 22:04:21</td><td>Alert Test 416</td><td>Service</td><td>489-332-4137</td></tr> 
<tr id="2" role="row"> 
<td>2018-04-16 22:04:36</td><td>Alert Test 416</td><td>Service</td><td>489-776-9604</td></tr> 
</tbody>

But I get an output like below instead,

<tbody> 
<tr id="1" role="row"> 
<td>2018-04-15 22:04:21</td><td>Alert Test 416</td><td>Service</td><td>489-127-2367</td></tr> 
<tr id="2" role="row"> 
<td>2018-04-16 22:04:36</td><td>Alert Test 416</td><td>Service</td><td>489-776-9604</td></tr> 
</tbody>

The code only takes the very first entry for each top level id and then moves to the next id.

Here is the code,

<tbody>
              {history.map((item) => {
  return <tr key={item.id} id={item.id} role='row'>
  <td>{item.time}</td>
  <td>{item.alert.name}</td>
  <td>{item.source.type}</td>
  <td>{item.source.name}</td>
</tr>
  })}
</tbody>

The history is the object containing the JSON input shown above. How should the above be modified so that I get the desired result?

Ramya Velivala · Accepted Answer · 2018-04-24 20:32:45Z

2

_.map(history, (item, index) => {
   return (<tr key={index} id={item.id} role='row'>
            <td>{item.time}</td>
         </tr>)
});

You should always use Key for displaying unique attributes instead of ids. I have used Lodash map here, which is a good library to use.

answered Apr 24, 2018 at 20:32

Ramya Velivala

5671 gold badge4 silver badges12 bronze badges

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

Comments

Shubham Khatri · Accepted Answer · 2018-04-24 18:32:03Z

1

Since you are specifying the id as the key which is not unique, only one of the elements with duplicate key is rendered, if you don't have any option for using a unique key form the data you might prefer to go for the index like

<tbody>
  {history.map((item, index) => {
     return <tr key={index} id={item.id} role='row'>
        <td>{item.time}</td>
        <td>{item.alert.name}</td>
        <td>{item.source.type}</td>
        <td>{item.source.name}</td>
     </tr>
  })}
</tbody>

answered Apr 24, 2018 at 18:32

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

2 Comments

Sowjanya Ravuri Over a year ago

Thanks a lot, Shubham. That was the exact solution I needed and it worked like a charm. I did not quite know the use of index, thank you for the suggestion.

Shubham Khatri Over a year ago

index is an option to provide as a key, but if possible you must avoid using it as it doesn't quite have the best of performance since the index to data mapping can change if the order of data is changed or a data is deleted from the middle

Joey Nelson · Accepted Answer · 2018-04-24 18:36:58Z

0

This is because you can't have two elements with the same key or id, so only one of them is being shown.

Instead of having multiple 's with the same id, just use 1, and then use additional 's if you want to display more data about the same id.

answered Apr 24, 2018 at 18:36

Joey Nelson

3852 silver badges7 bronze badges

1 Comment

Sowjanya Ravuri Over a year ago

Thanks Joey, yes I had understood why it was happening but was wondering if there was a way to fix it in the jsx code, instead of having to edit the object itself, as that would be more complex in my scenario.

Ikram Ud Daula · Accepted Answer · 2018-04-24 20:15:43Z

0

Make sure your key does not duplicate. One of the ways of it's avoiding duplicate, concat somethings with the array index. there is no change for duplicates. like..

{history.map((item, index) => {
 return <tr key={index + item.id} id={item.id} role='row'>
     <td>{item.time}</td>
      ....
   </tr>
})}

answered Apr 24, 2018 at 20:15

Ikram Ud Daula

1,33116 silver badges24 bronze badges

Collectives™ on Stack Overflow

ReactJS nested looping on JSON object

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related