Can't Access individual JSON data [AngularJS]

Question

I have an external JSON file hotel.json.

{
    "hotel_info": [{
        "booking_id": "2",
        "hotel_name": "Ascot Lodging",
        "star_id": "2",
        "street": "Via Vincenzo da Seregno",
        "province": "Milan",
        "price_per_night": "417.00"
    }]
}

I'm using AngularJS to read this and display the data. In my controller I have:

app.controller('mainController', function($scope,$http) {
    $http.get('includes/hotel.json').success(function (data) {
    $scope.hotel = data;
   });
});

I should then be able to display the data on the HTML page using:

<h3>{{ hotel.hotel_info.hotel_name }}</h3>

This should display " Ascot Lodging " but it doesn't display anything.

The data is being passed through because if I remove .hotel_name from the handlebars it simply returns the whole JSON text.

Does anyone know why I can't access the individual information?

Thank you in advance.

Answer 1

In your JSON hotel_info is an array not an object (the square brackets [] are the array notation). Change to:

<h3>{{ hotel.hotel_info[0].hotel_name }}</h3>