How to iterate an array of objects through each object element?

Question

I'm trying to iterate an array of objects to display each object element in a table.

Thats my array:

     list: [
                {header: ['id', 'name', 'date', 'verified']},
                {body: [1, 'abc', '26-10-2019', true]}
            ]

I want to render a table in a vertical position like this:

That's how I'm trying to do:

const render = list.map((result, idx) => (
            <tr key={idx}>
                <td>{result.header}</td>                
                <td>{result.body}</td>                
            </tr>
        ))

But the result is

<tr>
   <td>id name date verified</td>
</tr>
<tr>
   <td>1 abc 26-10-2019 true</td>
</tr>

You need to loop over result.header and result.body as well — Deckerz
– Deckerz, Commented May 22, 2019 at 14:55
how long will the list array be ? it's really unpractical to do it this way. — k.s.
– k.s., Commented May 22, 2019 at 14:56

Shridhar Sharma · Accepted Answer · 2019-05-22 15:48:47Z

4

You need to repeat the whole table, like this

const render = list[0].header.map((name, i) => <tr key={i}>
                <td>{name}</td>
                <td>{String(list[1].body[i])}</td>
            </tr>)

edited May 22, 2019 at 15:48

answered May 22, 2019 at 15:03

Shridhar Sharma

2,3871 gold badge12 silver badges13 bronze badges

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

7 Comments

mr.abdo Over a year ago

Tks for your help. I got this error Uncaught TypeError: Cannot read property 'map' of undefined but I'm trying to solve it.

Shridhar Sharma Over a year ago

maybe the list variable is not defined on the initial load

Shridhar Sharma Over a year ago

or there will be an element not containing header property

mr.abdo Over a year ago

It was my mistake. I fix it and I got this error Uncaught TypeError: Cannot read property '0' of undefined

Shridhar Sharma Over a year ago

I've updated your fiddle at jsfiddle.net/2x3f5hqr and also updated my answer

|

Nikko Khresna · Accepted Answer · 2019-05-22 15:01:28Z

-3

try:

      const render = list.map((result, idx) => (
        <tr key={idx}>
            <td>{result.header[idx].toString()}</td>                
            <td>{result.body[idx].toString()}</td>                
        </tr>
      ))

answered May 22, 2019 at 15:01

Nikko Khresna

1,0099 silver badges10 bronze badges

3 Comments

mr.abdo Over a year ago

I got this error Uncaught TypeError: Cannot read property '0' of undefined

Shridhar Sharma Over a year ago

why are you using toString() here?

Nikko Khresna Over a year ago

just to be sure integers, array and whatnot are converted to string

Collectives™ on Stack Overflow

How to iterate an array of objects through each object element?

2 Answers 2

7 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Related