How to get the name of the array in json data using ReactJs?

Question

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 (i.e 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

Chase DeAnda · Accepted Answer · 2017-10-11 14:48:16Z

2

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

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

answered Oct 11, 2017 at 14:48

Chase DeAnda

16.5k3 gold badges34 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mayank Shukla · Accepted Answer · 2017-10-11 15:14:31Z

1

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

edited Oct 11, 2017 at 15:14

answered Oct 11, 2017 at 14:47

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

1 Comment

Rahul Nagrale Over a year ago

Thanks for the answer, its working but I also wants to get the seat numbers. I have updated the question for same, can you please have look and advise the solution to achieve this?

Collectives™ on Stack Overflow

How to get the name of the array in json data using ReactJs?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related