Map over nested array of objects

Question

I am trying to map over array of objects which each array contains another nested array of objects. However, the map does not work on the nested array. How do i map over the contents of the nested array?

data structure for nested array of objects looks like this:

const items = [
  {
    page_num: 1,
    status: "PROCESSED",
    table_text_data:[
        {bottom:58, height:60, left:60, right:67, text:"recorded"},
        {bottom:75, height:67, left:50, right:60, text:"symbolic"},
        {bottom:80, height:80, left:77, right:89, text:"fever"},
    ]
  }
];

map for page_num and status looks like this:

{this.props.items.map(item =>{ 
   return (
        <ul><li> page_num={item.page_num} </li>
         <li> status:{item.status}</li>
          {item.table_text_data.map((c,i)=>( 
           <ul><li>bottom={c.bottom}</li>
           <li>height={c.height}</li>
           <li>left={c.right}</li>
           <li>right={c.left}</li>
           <li>text={c.text}</li></ul>  
         ))}
        </ul>
)})}

page_num and status works fine but not for table_text_data. how should i map through it?

screenshot of the warning i'm getting as well: https://i.stack.imgur.com/sqREQ.png

Any help would be much appreciated. Thank you

https://stackoverflow.com/a/51615692/12871777 This should be similar to your question, hope it helps. — whatismyname123, Oct 26 '20 at 09:55
https://stackoverflow.com/a/51615692/12871777 This should be similar to your question, hope it helps. — whatismyname123, Oct 26 '20 at 10:00

wangdev87 · Answer 1 · 2020-10-26T10:24:36.347

1

Why don't you use re-use array map?

{this.props.items.map((item, i) =>{ 
   return (
        <ul key={'parent' + i}><li> page_num={item.page_num} </li>
         <li> status:{item.status}</li>
          {item.table_text_data.map((c,j)=>( 
           <li  key={'child' + j}>
           <ul><li>bottom={c.bottom}</li>
           <li>height={c.height}</li>
           <li>left={c.right}</li>
           <li>right={c.left}</li>
           <li>text={c.text}</li></ul>
           </li>
         ))}
        </ul>
)})}

edited Oct 26 '20 at 10:24

answered Oct 26 '20 at 09:15

wangdev87

8,611
3
8
31

I tried this now, but still no luck. it is not trowing out error as well. what might be the problem? – sanjay srinivasa Oct 26 '20 at 09:29
what is your exact requirement? and what is the error that you can see? – wangdev87 Oct 26 '20 at 09:33
I want extract the contents inside `table_text_data`. its seems to be some logical error. i have edited my code above based on your given snippet. please do check it. – sanjay srinivasa Oct 26 '20 at 09:44
remove in line 4 – wangdev87 Oct 26 '20 at 09:45
I did. But still no luck :( – sanjay srinivasa Oct 26 '20 at 09:56
it seems like another issue. i updated the answer by wrapping the every inner ULs with an LI. – wangdev87 Oct 26 '20 at 10:03
still no luck. but i encountered this warning `Warning: Each child in a list should have a unique "key" prop` – sanjay srinivasa Oct 26 '20 at 10:21
try updated answer, it will remove such that "key" warning – wangdev87 Oct 26 '20 at 10:24
i tried with the updated answer, but still no luck :( – sanjay srinivasa Oct 26 '20 at 10:33
let me know your screenshot – wangdev87 Oct 26 '20 at 10:35
https://jsfiddle.net/sanjay_s/86npfk4a/ `contains 2 files app.js and popup.js` please do check it out. thank you – sanjay srinivasa Oct 26 '20 at 11:13
https://i.stack.imgur.com/z42bJ.png `data structure of table_text_data` – sanjay srinivasa Oct 26 '20 at 11:18

score 0 · Answer 2 · answered Oct 26 '20 at 10:03

you can use nested map function to acces the files. but you need to speciy that nested map() should work only for table_text_data property,other wise your parent map function will check for the contents inside table_text_data you can rewrite the code like

{this.props.items.map(item =>{ 
   return(
<ul>
<li> page_num={item.page_num} </li>
<li> status:{item.status}</li>
</ul>
   if(item ==='table_text_data'){
      {item.table_text_data.map((c,i)=>( 
          return (
 <ul><li>bottom={c.bottom}</li>
           <li>height={c.height}</li>
           <li>left={c.right}</li>
           <li>right={c.left}</li>
           <li>text={c.text}</li></ul> 
))
}
)}
        </ul>
)})}

did not work. cannot specify the if statement. any other solutions if possible? — sanjay srinivasa, Oct 26 '20 at 10:30

score 0 · Accepted Answer · answered Oct 26 '20 at 13:08

the error you give is has the answer in it.

Each child in a list should have a unique key prop

you're already halfway there by extracting the index that holds the nested object. Now you only have to add the property key={I} to your ul

const items = [
  {
    page_num: 1,
    status: "PROCESSED",
    table_text_data:[
        {bottom:58, height:60, left:60, right:67, text:"recorded"},
        {bottom:75, height:67, left:50, right:60, text:"symbolic"},
        {bottom:80, height:80, left:77, right:89, text:"fever"},
    ]
  },
  {
    page_num: 2,
    status: "PROCESSED",
    table_text_data:[
        {bottom:58, height:60, left:60, right:67, text:"recorded"},
        {bottom:75, height:67, left:50, right:60, text:"symbolic"},
        {bottom:80, height:80, left:77, right:89, text:"fever"},
    ]
  }
];
    
const ItemDisplay = (props) => (
  <React.Fragment>
    {props.items.map(item => (
      <ul key={item.page_num}>
        <li>page_num={item.page_num}</li>
        <li>status={item.status}</li>
        {item.table_text_data.map((c,i) => ( 
          <ul key={i}>
            <li>bottom={c.bottom}</li>
            <li>height={c.height}</li>
            <li>left={c.right}</li>
            <li>right={c.left}</li>
            <li>text={c.text}</li>
          </ul>  
        ))}
      </ul>
    ))}
  </React.Fragment>
  );

ReactDOM.render(
  <ItemDisplay items={items} />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Map over nested array of objects

3 Answers3