Question

我有一个JSON，它从API调用返回：

"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     Seat Number
22      2218
23      2315,2316,2317,2318
24      2411,2412,2413,2415,2416,2417,2418

Answer 1

您可以使用DOM Parsing and Serialization spec获取blocks_by_row对象的密钥名称。

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

Answer 2

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

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

2 个答案: