このJSONを反復でマップして反復する方法

Question

私はテーブルを作ることができるようにこのJSONを反復しようとしていますが、多くのヘッダとデータがあるので、どうやってこれをやりなおすことができますか？

const BBDDCustomer = { 
     ui_labels: { 
     name: 'Name', 
     address: 'address', 
     postalCode: 'Postal Code', 
     city: 'City', 
     country: 'Country', 
     telephone: 'Telephone', 
     email: 'Email', 
     modified: 'Modified', 
     delete: 'Delete' 

     }, 
    data: [ 
    { 
     name: 'n1', 
     address: 'a1', 
     postalCode: 'PC 1', 
     city: 'c 1', 
     country: 'cou 1', 
     telephone: 'tel 1', 
     email: 'em 1' 
    } 
} 

私はこのように記述する必要はありません。

<table striped bordered condensed hover responsive> 
     <thead> 
     <tr> 
     <th>{BBDDCustomer.ui_labels.name}</th> 
     <th>{BBDDCustomer.ui_labels.address}</th> 
     <th>{BBDDCustomer.ui_labels.postalCode}</th> 
     <th>{BBDDCustomer.ui_labels.city}</th> 
     <th>{BBDDCustomer.ui_labels.country}</th> 
     <th>{BBDDCustomer.ui_labels.telephone}</th> 
     <th>{BBDDCustomer.ui_labels.email}</th> 
     <th>{BBDDCustomer.ui_labels.modified}</th> 
     <th>{BBDDCustomer.ui_labels.delete}</th> 
     </tr> 
</table> 

Answer 1

あなたは

const columns = ['name', 'address', ...]; 

とmap

<Table striped bordered condensed hover responsive> 
     <thead> 
     <tr> 
      { 
      columns.map(column => (
       <th key={column}>{BBDDCustomer.ui_labels[column]}</th> 
      )) 
      } 
     </tr> 
     </thead> 
     <tbody> 
     { 
      BBDDCustomer.data.map((data, i) =>(
      <tr key={i}> 
       { 
       columns.map(column => (
        <td key={column + i}>{data[column]}</td> 
       )) 
       } 
      </tr> 
     )) 
     } 
     </tbody> 
</Table>