Display array list of object in React JS

Question

Hi I have this list array of object in react js and I don't know how to display in my render view. Anyone can give an idea on how to do it?

Post:{
  Store1: [
     0:{Id:"0001", Business:"Ministop"}
   ]
  Store2: [{
     0:{Id:"0002", Business:"Grocery Store"}
  }]
  Store3: [
     0:{Id:"0003", Business:"Seven Eleven"}
  ]
  Store4: [
     0:{Id:"0004", Business:"Big Store"},
     1:{Id:"0005", Business:"Medium Store"}
  ]
}

This is the sample output:

**Store 1**
   **Id      Business**
   0001    Ministop
**Store 2**
   **Id      Business**
   0002    Grocery Store
**Store 3**
   **Id      Business**
   0003    Seven Eleven
**Store 4**
   **Id      Business**
   0004    Big Store
   0005    Medium Store

I have this code and I've got an error this.state.post.map is not a function

render() {
   const groupList = this.state.post.map((data, index) => {
       return  (
           <div key={index}>
              <div>{data}</div>
           </div>
       )
   });

   return (
     <div>{groupList}</div>
   )
}

Thank you

You will have to loop over data and create an array of React.NodeElement. Then just put it in render — Rajesh Dixit
– Rajesh Dixit, Commented Nov 15, 2018 at 5:42
We will be able to help you quicker if you could share an attempt that did not work — Ahmad
– Ahmad, Commented Nov 15, 2018 at 5:44

Delgee B · Accepted Answer · 2018-11-15 06:11:30Z

2

This is how you map it. just change post with this.state.post

const post = {
  Store1: [
    { Id: '0001', Business: 'Ministop' }
  ],
  Store2: [
    { Id: '0002', Business: 'Grocery Store' }
  ],
  Store3: [
    { Id: '0003', Business: 'Seven Eleven' }
  ],
  Store4: [
    { Id: '0004', Business: 'Big Store' },
    { Id: '0005', Business: 'Medium Store' }
  ]
};

console.log(Object.keys(post).reduce((acccumilator, iterator) => {
  return [...acccumilator, ...post[iterator]];
}, []));

/*
  Object.keys(this.state.post).reduce((acccumilator, iterator) => {
    return [...acccumilator, ...post[iterator]];
  }, []).map(data => {
    return  (
           <div key={data.id}>
              <div>{data.Business}</div>
           </div>
       )
  })
*/

answered Nov 15, 2018 at 6:11

Delgee B

1662 silver badges9 bronze badges

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

4 Comments

Ruan Mendes Over a year ago

OP needs access to top level keys like Store1 but you are throwing them out

Delgee B Over a year ago

Well I thought he wanted to render list of Businesses

Jay Ar Viluan Over a year ago

Yes Store1 (businesses was removed from the array

Ruan Mendes Over a year ago

@DelgeeB You must have missed the desired output the OP posted

Ruan Mendes · Accepted Answer · 2018-11-15 06:16:10Z

1

map is not a method of an object. You can map over its keys using Object.keys.

render() {
   const groupList = Object.keys(this.state.post).map((key) => {
       return  (
           <div key={key}>
              <div>{this.state.post[key]}</div>
           </div>
       )
   });

   return (
     <div>{groupList}</div>
   )
}

However, there are other problems once you fix that but you should try to solve them yourself and ask other questions if you can't

edited Nov 15, 2018 at 6:16

answered Nov 15, 2018 at 6:10

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

Collectives™ on Stack Overflow

Display array list of object in React JS

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related