I have a JSON which comes back like this from a API call:
"free_seat_blocks": {
"blocks_by_row": {
"22": [
[
"2218"
]
],
"23": [
[
"2315",
"2316",
"2317",
"2318"
]
],
"24": [
[
"2411",
"2412",
"2413",
"2414",
"2415",
"2416",
"2417",
"2418"
]
]
},
}
How can I access the name of the array (ie 22, 23, etc) in ReactJs
. I need to use the name of the array to display the seat Row in table format.
Update:
I want to get the values of the keys also and display them like below -
Row Seat Number
22 2218
23 2315,2316,2317,2318
24 2411,2412,2413,2415,2416,2417,2418
您可以使用Object.keys()
来获取blocks_by_row
对象的键名。
const keys = Object.keys(free_seat_blocks.blocks_by_rows); // Will return an array ['22', '23', '24'];
blocks_by_row
is an object
and you want to access the key names. There are multiple ways of doing the same.
If you just want to display the name (keys) of blocks_by_keys
object, use Object.keys on it, it will return an array of all the key names.
Like this:
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'/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.