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

I have a JSON which comes back like this from a API call:

我有一个JSON,它从API调用回来:

"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 (i.e 22, 23, etc) in ReactJs. I need to use the name of the array to display the seat Row in table format.

如何在ReactJs中访问数组的名称(即22,23等)。我需要使用数组的名称以表格格式显示座位行。

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

2 个解决方案

#1

blocks_by_row is an object and you want to access the key names. There are multiple ways of doing the same.

blocks_by_row是一个对象,您想要访问密钥名称。有多种方法可以做到这一点。

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.

如果您只想显示blocks_by_keys对象的名称(键),请在其上使用Object.keys,它将返回所有键名称的数组。

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'/>

#2

You can use Object.keys() to get the key names of the blocks_by_row object.

您可以使用Object.keys()来获取blocks_by_row对象的键名。

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

#1