CODEWITHSUNDEEP
javascriptreactjs
Vinod Kumar
Vinod Kumar

Reputation: 337

How to render my multidimensional array of objects in react

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>

Upvotes: 0

Views: 1566

Answers (3)

HMR
HMR

Reputation: 39250

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

Upvotes: 1

bflemi3
bflemi3

Reputation: 6790

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

Upvotes: 1

Aobo Cheng
Aobo Cheng

Reputation: 4528

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.

Upvotes: 1

Related Questions