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.sstatic.net/sqREQ.png

Any help would be much appreciated. Thank you

stackoverflow.com/a/51615692/12871777 This should be similar to your question, hope it helps. — whatismyname123
– whatismyname123, Commented Oct 26, 2020 at 9:55
stackoverflow.com/a/51615692/12871777 This should be similar to your question, hope it helps. — whatismyname123
– whatismyname123, Commented Oct 26, 2020 at 10:00

topdev87 · Accepted Answer · 2020-10-26 10:24:36Z

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, 2020 at 10:24

answered Oct 26, 2020 at 9:15

topdev87

8,7913 gold badges11 silver badges33 bronze badges

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

12 Comments

sanjay srinivasa Over a year ago

I tried this now, but still no luck. it is not trowing out error as well. what might be the problem?

topdev87 Over a year ago

what is your exact requirement? and what is the error that you can see?

sanjay srinivasa Over a year ago

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.

topdev87 Over a year ago

remove </ul> in line 4

sanjay srinivasa Over a year ago

I did. But still no luck :(

|

Sam Apostel · Accepted Answer · 2020-10-26 13:08:39Z

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>

sharun k k · Accepted Answer · 2020-10-26 10:03:31Z

0

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>
)})}

answered Oct 26, 2020 at 10:03

sharun k k

4678 silver badges16 bronze badges

1 Comment

sanjay srinivasa Over a year ago

did not work. cannot specify the if statement. any other solutions if possible?

Collectives™ on Stack Overflow

Map over nested array of objects

3 Answers 3

12 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

12 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related