如何使用ReactJs获取json数据中的数组名称？

Question

我有回来这样从API调用JSON：

"free_seat_blocks": { 
    "blocks_by_row": { 
     "22": [ 
      [ 
       "2218" 
      ] 
     ], 
     "23": [ 
      [ 
       "2315", 
       "2316", 
       "2317", 
       "2318" 
      ] 
     ], 
     "24": [ 
      [ 
       "2411", 
       "2412", 
       "2413", 
       "2414", 
       "2415", 
       "2416", 
       "2417", 
       "2418" 
      ] 
     ] 
    }, 
} 

我怎样才能在ReactJs访问数组（即22，23等）的名称。我需要使用数组的名称以表格格式显示座位Row。

更新：

我想拿到钥匙的价值观也和像下面显示出来 -

Row  Seat Number 
22  2218 
23  2315,2316,2317,2318 
24  2411,2412,2413,2415,2416,2417,2418 

Answer 1

blocks_by_row是object，你要访问的键名。有多种方法可以做到这一点。

如果您只想显示blocks_by_keys对象的名称（键），请使用Object.keys，它将返回一个包含所有键名的数组。

像这样：

let data = { 
 
    "free_seat_blocks": { 
 
    "blocks_by_row": { 
 
     "22": [ 
 
      [ 
 
       "2218" 
 
      ] 
 
     ], 
 
     "23": [ 
 
      [ 
 
       "2315","2316","2317","2318" 
 
      ] 
 
     ], 
 
     "24": [ 
 
      [ 
 
       "2411","2412","2413","2414","2415","2416","2417","2418" 
 
      ] 
 
     ] 
 
    }, 
 
    } 
 
} 
 

 
var App =() => { 
 
    return(
 
    <div> 
 
     <table> 
 
      <tr> 
 
       <td>Rows</td> 
 
       <td>Seat No</td> 
 
      </tr> 
 
      { 
 
       Object.entries(data.free_seat_blocks.blocks_by_row).map(([row, seats]) => <tr key={row}> 
 
        <td>{row}</td> 
 
        <td>{seats.join(',')}</td> 
 
       </tr>) 
 
      } 
 
     </table> 
 
    </div> 
 
    ) 
 
} 
 

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

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

 
<div id='app'/>

Answer 2

您可以使用Object.keys()得到blocks_by_row对象的键名。

const keys = Object.keys(free_seat_blocks.blocks_by_rows); // Will return an array ['22', '23', '24'];