How to render my multidimensional array of objects in react

Question

I am trying to render my array of objects inside my table but it shows "Cannot read property 'monthlytarget' of undefined", I am using axios to fetch the result and render inside the table

Axios :

   http.get(apiReportsEndpoint+"?empid="+this.props.match.params.id) 
        .then(response =>{  
            this.setState({
                report:response.data.data.monthlytarget
            })            
        });

Response I receive from API

   "data":{
      "monthlytarget":[
         {
            "quarter":1,
            "period_start":"2019-04-01",
            "monthlytarget":{
               "04":{
                  "targetpm":"213120",
                  "invoice_values":[

                  ],
                  "revenuepm":0,
                  "targetpercentage":0,
                  "joinees":0
               },
               "05":{
                  "targetpm":"213120",
                  "invoice_values":[

                  ],
                  "revenuepm":0,
                  "targetpercentage":0,
                  "joinees":0
               }
            } 
         },
         { quarter":2 ...},
         { quarter":3 ...},
      ] 
      
   }

I want to render values inside "monthlytarget" as rows inside table

<thead>
    <tr>
        <th>MONTH</th>
        <th>TARGET PER MONTH</th>
        <th>REVENUE PER MONTH</th> 
    </tr>
</thead>
<tbody>

      {
      this.state.report.map((revenuereport) =>{ 
         {Object.keys.map.monthlytarget(premise,index) => (
                <tr>
                   <td>{index}</td>
                   <td>{premise.targetpm}</td>
                   <td>{premise.revenuepm}</td>
                 </tr>
          ))}                                                   
      })
  }      
 </tbody>

So there is one table that has all rows data.monthyTarget[x].monthlyTarget[y]? Or each data.monthyTarget needs it's own table? — HMR
– HMR, Commented Jun 22, 2020 at 13:48
every month has monthlytarget, month name marked by key 0,1,2 — Vinod Kumar
– Vinod Kumar, Commented Jun 22, 2020 at 13:51

HMR · Accepted Answer · 2020-06-22 14:46:04Z

1

To create one table out of all the data you could do the following:

this.state.report
  .map(({ monthlytarget }) => Object.entries(monthlytarget))
  .flat()
  .map(([key,value], index) => (
    <tr key={index}>
      <td>{index}</td>
      <td>{value.targetpm}</td>
      <td>{value.revenuepm}</td>
    </tr>
  ));

edited Jun 22, 2020 at 14:46

answered Jun 22, 2020 at 13:54

HMR

39.5k26 gold badges99 silver badges175 bronze badges

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

3 Comments

Vinod Kumar Over a year ago

Thanks @HMR but Using flat() didnt help to display month numbers

HMR Over a year ago

@VinodKumar Updated the answer, you are not using the month numbers in your question but in my answer the month number is available as key.

Vinod Kumar Over a year ago

Sorry didn't notice that

Aobo Cheng · Accepted Answer · 2020-06-22 13:55:57Z

1

what do you mean by calling Object.keys.map.monthlytarget? if you are trying to loop the array and get JSX, do this:

this.state.report.map((revenuereport) =>
  Object.keys(revenuereport.monthlytarget).map((premise, index) => (
    <tr>
      <td>{index}</td>
      <td>{revenuereport.monthlytarget[premise].targetpm}</td>
      <td>{revenuereport.monthlytarget[premise].revenuepm}</td>
    </tr>
  ))
);

Do pay attention to indents and brackets, code snippet in the question seems not gonna work at all.

answered Jun 22, 2020 at 13:55

Aobo Cheng

4,5883 gold badges27 silver badges30 bronze badges

3 Comments

HMR Over a year ago

If you use Object.values you can replace revenuereport.monthlytarget[premise]. with premise.. You're still stuck with a multi dimensional array so maybe flatten that before generating jsx

Aobo Cheng Over a year ago

@HMR not gonna make too much modification to his original code, I just fix the syntax error.

Vinod Kumar Over a year ago

@ObooCheng It helped me to exactly get what I wanted

bflemi3 · Accepted Answer · 2020-06-22 14:04:11Z

1

It should be...

this.state.report.map(({ monthlytarget }, i) =>
    Object.values(monthlytarget).map({ targetpm, revenuepm }, i) => 
    <tr>
        <td>{i}</td>
        <td>{targetpm}</td>
        <td>{revenuepm}</td>
    </tr>
))

edited Jun 22, 2020 at 14:04

answered Jun 22, 2020 at 13:53

bflemi3

6,83021 gold badges96 silver badges160 bronze badges

2 Comments

HMR Over a year ago

Nope, that should be Object.values and maybe flatten the array before making the jsx

bflemi3 Over a year ago

Thank you :). I was in a frenzy to get this answer in, lol.

Collectives™ on Stack Overflow

How to render my multidimensional array of objects in react

3 Answers 3

3 Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related