如何从二维数组 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

Answer 1

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>