How to retrieve data from 2d array react.js

Question

I am retrieving data from one component in react that is being passed into another component as a 2d array.

console.log(this.props.cheatsheet) Results in [object Object],[object Object]

console.log(JSON.stringify(this.props.dashboards)); shows me the arrays values below

[  
   {  
      "name":"Test",
      "description":"TEest",
      "filter":[  
         "201158",
         "200461",
         "201345"
      ],
      "KPIs":[  

      ]
   },
   {  
      "name":"Asset Owner Dashboard",
      "description":"Description for Asset Owner Dashboard",
      "filter":[  
         "201732",
         "222323",
         323244
      ],
      "KPIs":[  
         {  
            "name":"Asset",
            "charts":[  
               {  
                  "name":"Details"
               }
            ]
         },
         {  
            "name":"Incidents",
            "charts":[  
               {  
                  "name":"Count by AssignmentGroup"
               },
               {  
                  "name":"COE Open Tickets"
               },
               {  
                  "name":"NEW IM in Last 48hrs"
               }
            ]
         },
         {  
            "name":"Problem Tickets",
            "charts":[  
               {  
                  "name":"Count by Status"
               },
               {  
                  "name":"Open PMR"
               },
               {  
                  "name":"Details"
               }
            ]
         }
      ]
   }
]

what is the best way for me to map the filter array from test and Asset Owner Dashboard

You can use lodashJs filter method.

Amit Jamwal
– Amit Jamwal

2017-01-06 13:44:52 +00:00
Commented Jan 6, 2017 at 13:44 — Amit Jamwal
– Amit Jamwal, Commented Jan 6, 2017 at 13:44

Shubham Khatri · Accepted Answer · 2017-01-06 14:04:21Z

You can make use of nested maps to render you data. just like the below example

class App extends React.Component {
   render(){
      var arr = [  
   {  
      "name":"Test",
      "description":"TEest",
      "filter":[  
         "201158",
         "200461",
         "201345"
      ],
      "KPIs":[  

      ]
   },
   {  
      "name":"Asset Owner Dashboard",
      "description":"Description for Asset Owner Dashboard",
      "filter":[  
         "201732",
         "222323",
         323244
      ],
      "KPIs":[  
         {  
            "name":"Asset",
            "charts":[  
               {  
                  "name":"Details"
               }
            ]
         },
         {  
            "name":"Incidents",
            "charts":[  
               {  
                  "name":"Count by AssignmentGroup"
               },
               {  
                  "name":"COE Open Tickets"
               },
               {  
                  "name":"NEW IM in Last 48hrs"
               }
            ]
         },
         {  
            "name":"Problem Tickets",
            "charts":[  
               {  
                  "name":"Count by Status"
               },
               {  
                  "name":"Open PMR"
               },
               {  
                  "name":"Details"
               }
            ]
         }
      ]
   }
]
      
      return (
        <tbody>
           {arr.map(function(item){
               return (
                  <tr>
                     {item.filter.map(function(val){
                       return <td>{val}</td>
                       
                      })}
                  </tr>
               )
           })} 
        </tbody>
      )
   }
}

ReactDOM.render(<App/>, document.getElementById('app'));

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

Collectives™ on Stack Overflow

How to retrieve data from 2d array react.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related