Accessing array within javascript object

JavaScript
1

Hello Everyone, I am trying to access object inside array inside object.
I think i am not getting it right trying to access {“Number”:210, “GuestCount”:2, “Price”:100}.
Here is my full code:

 var hotels = [{
        "name": "Radisson",
        "Address": "N Harrisson Road",
        "Rooms":[
        {"Number":210, "GuestCount":2, "Price":100},
        {"Number":211, "GuestCount":2, "Price":110},
        {"Number":212, "GuestCount":2, "Price":109}]}, {
        "name": "Holiday Inn",
        "Address": "S Harrison Road",
        "Rooms":[
        {"Number":11, "GuestCount":2, "Price":100},
        {"Number":15, "GuestCount":1, "Price":58},
        {"Number":22, "GuestCount":2, "Price":80},
        {"Number":23, "GuestCount":2, "Price":99}]}];
   
       /* Hotel number 1 Name and Address */
       document.getElementById("radisson").innerHTML = hotels[0]["name"];
       document.getElementById("first_hotel_address").innerHTML = hotels[0]["Address"];   
       
       /* Hotel Number 1 Room Information */
       document.getElementById("firstHotelRoomNumber1").innerHTML = hotels["Rooms"["Number[0]"]];
       
       
       /* Hotel number 2 Name and Address */
       document.getElementById("holiday").innerHTML = hotels[1]["name"];   document.getElementById("second_hotel_address").innerHTML = hotels[1]["Address"];

Thank you!

2

close – try this:

       document.getElementById("firstHotelRoomNumber1").innerHTML = hotels[0]["Rooms"][0]["Number"];
    // OR this would work too:
       document.getElementById("firstHotelRoomNumber1").innerHTML = hotels[0].Rooms[0].Number;

The hotels array is accessed by index, as you have done. The rooms for that first hotel are at hotels[0].Rooms orhotels[0]["Rooms"], they both mean the exact same thing. Now if you had done something like let rooms = hotels[0].Rooms; you would then simply have said rooms[0].Number or rooms[0]["Number"] – so you can string them together that same way: hotels[0].Rooms[0].Number.

3

Thank you so much for your reply!

It worked!!!

4

Glad to help. Did it make sense AND work? That’s what I really strive for. :wink:

5

Yes, I can send you my full code, it is not finished, but it will get you an idea of what I trying to make.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        
        #container {
            color: #fff;
            margin: 0;
            padding: 0;
            background-color: #333;
        }
        
        #container h1 {
            margin: 0;
            background-color: darkgray;
            padding: 20px;
            text-align: center;
        }
        
        table {
            border-collapse: collapse;
            padding: 10px;
        }
        
        table th.first_number,
        table th.second_number,
        table th.third_number {
            background-color: lightgray;
            border-collapse: collapse;
            padding: 10px;
            color: #333;
        }
        
        
    </style>    
</head>

<body>
  
  <div id="container">
      <h1 class="heading1">Hotels (with empty rooms)</h1>
      
      <h2 id="radisson"></h2>
      <h3 id="first_hotel_address"></h3>
    
      <table style="width:100%">
          <tr>
            <th class="first_number">Room Number</th>
            <th class="second_number">Number of guests</th> 
            <th class="third_number">Price</th>
          </tr>
          <tr>
            <td id="firstHotelRoomNumber1"></td>
            <td id="firstHotelGuestNumber1"></td> 
            <td id="firstHotelPrice"></td>
          </tr>
          <tr>
            <td id="firstHotelRoomNumber2"></td>
            <td id="firstHotelGuestNumber2"></td> 
            <td id="secondHotelPrice"></td>
          </tr>
          <tr>
            <td id="firstHotelRoomNumber3"></td>
            <td id="firstHotelGuestNumber3"></td> 
            <td id="thirdHotelPrice"></td>
          </tr>
       </table>
       
      <h2 id="holiday"></h2>
      <h3 id="second_hotel_address"></h3>
  
  
  </div>
   
   <script>
       var hotels = [{
        "name": "Radisson",
        "Address": "N Harrisson Road",
        "Rooms":[
        {"Number":210, "GuestCount":2, "Price":100},
        {"Number":211, "GuestCount":2, "Price":110},
        {"Number":212, "GuestCount":2, "Price":109}]}, {
        "name": "Holiday Inn",
        "Address": "S Harrison Road",
        "Rooms":[
        {"Number":11, "GuestCount":2, "Price":100},
        {"Number":15, "GuestCount":1, "Price":58},
        {"Number":22, "GuestCount":2, "Price":80},
        {"Number":23, "GuestCount":2, "Price":99}]}];
   
       /* Hotel number 1 Name and Address */
       document.getElementById("radisson").innerHTML = hotels[0]["name"];
       document.getElementById("first_hotel_address").innerHTML = hotels[0]["Address"];   
       
       /* Hotel Number 1 Room Information */
       document.getElementById("firstHotelRoomNumber1").innerHTML = hotels[0]["Rooms"][0]["Number"];
       document.getElementById("firstHotelRoomNumber2").innerHTML = hotels[0]["Rooms"][1]["Number"];
       document.getElementById("firstHotelRoomNumber3").innerHTML = hotels[0]["Rooms"][2]["Number"];
       
       document.getElementById("firstHotelGuestNumber1").innerHTML = hotels[0]["Rooms"][0]["GuestCount"];
       document.getElementById("firstHotelGuestNumber2").innerHTML = hotels[0]["Rooms"][1]["GuestCount"];
       document.getElementById("firstHotelGuestNumber3").innerHTML = hotels[0]["Rooms"][2]["GuestCount"];
       
       document.getElementById("firstHotelPrice").innerHTML = hotels[0]["Rooms"][0]["Price"];
       document.getElementById("secondHotelPrice").innerHTML = hotels[0]["Rooms"][1]["Price"];
       document.getElementById("thirdHotelPrice").innerHTML = hotels[0]["Rooms"][2]["Price"];
       
       
       /* Hotel number 2 Name and Address */
       document.getElementById("holiday").innerHTML = hotels[1]["name"];   document.getElementById("second_hotel_address").innerHTML = hotels[1]["Address"]; 

              
    </script>       

</body>
</html>

The only thing that bothers me is that I do not exactly know how to combine those document.getElementById.

6

You can get value by dot notation.
Example:
let my_hotel =hotel.room.number;
console.log(my-hotel);
Reault : 20 //room number.

7

Bear in mind, though – hotel is an Array of Objects, not an Object itself. And within each Hotel, there is another Array of Objects, Rooms. So it takes the combination of dot and bracket (or LOTS of brackets).

8

Yes, I understand that…now :slight_smile:

9

So, a suggestion. You are hard-coding all your DOM nodes, when there’s really no need. Suppose you don’t KNOW how many hotels you’ll get, or how many rooms?

Ideally, you should be able to create the hotel section dynamically. The structure is the same for every hotel: an h2 for the name, an h3 for the address, and a table full of room data.

But all that can be generated from the hotel information, rather than being limited by the static DOM.

To see what I mean, here’s a repl doing much what you’re looking for, from what I understand.

10

Wow, that is incredible. A bit too complicated for a beginner like me :slight_smile:

11

Less so than you might think. Start by looking at the tiniest part, and see if you understand that bit.

Look at the function that outputs the hotel name, ignore the rest. Follow the logic. Can you explain just that one piece?