Как получить данные из массива 2d. Response.js

Question

Я получаю данные от одного компонента в реакции, который передается в другой компонент как 2d-массив.

console.log(this.props.cheatsheet) Результаты в [object Object],[object Object]

console.log(JSON.stringify(this.props.dashboards)); показывает мне значения массивов ниже

[ 
    { 
     "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" 
       } 
      ] 
     } 
     ] 
    } 
] 

, что это лучший способ для меня, чтобы отобразить массив фильтра из теста и активов Владелец Dashboard

Answer 1

Вы можете использовать вложенные карты для отображения данных. так же, как в примере ниже

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>