AngularJS getting data from JSON local file

Question

I'm having troubles retrieving the data from json file using the following structure. In my controller.js file I have:

var controllers = angular.module('hotels.controllers', []);

controllers.controller('AppCtrl', function ($scope, $http){

   $scope.list;

   $http.get('json-folder/name.json').success(function(data, status, headers, config) {

    $scope.list = data.data;
    console.log(data);


});

And in that name.json file I have the following structure:

{
   "hotel": [
     {
       "id": 1,
        "name": "Some hotel name",
        "address": "123 Street",
        "category" : [{
            "id": 1,
            "name" : "Category 1",
            "bnb" : "yes",
            "simple" : "some value",
            "double" : "another value"
         },
         {
            "id": 2,
            "name" : "Category 2",
            "bnb" : "no",
            "simple" : "some value 2",
            "double" : "another value 2"
         },
        {
            "id": 3,
            "name" : "Category 3",
            "bnb" : "no",
            "simple" : "some value 3",
            "double" : "another value 3"
         }
         ]
      },
      {
        "id": 2,
        "name": "Some hotel name 2",
        "address": "33333 Street",
        "category" : [{
             "id": 1,
             "name" : "Category 1",
             "bnb" : "yes",
             "simple" : "some value",
             "double" : "another value"
         },
         {
            "id": 2,
            "name" : "Category 2",
            "bnb" : "no",
            "simple" : "some value 2",
            "double" : "another value 2"
         },
         {
            "id": 3,
            "name" : "Category 3",
            "bnb" : "no",
            "simple" : "some value 3",
            "double" : "another value 3"
         }
        ]  
        }
    ],
    "motel": [
        {
          "id": 1,
          "name": "Some motel name",
          "address": "321 Street",
          "category" : [{
              "id" : 1,
              "name" : "Category Motel 1",
              "bnb" : "yes",
              "simple" : "some motel value",
              "double" : "another motel value"
           },
           {
             "id" : 2,
             "name" : "Category Motel 2",
             "bnb" : "no",
             "simple" : "some motel value 2",
             "double" : "another motel value 2"
           }
           ]
       }
     ]
}

and finally my html structure:

<div ng-controller="AppCtrl">
    <ul class="pull-left">
        <li class="pull-left" ng-repeat="hotel in list.hotels">
            {{hotel.name}}
        </li>
    </ul>
</div>
<div ng-controller="CatCtrl">
      <ul class="pull-right">
          <li class="pull-right" ng-repeat="cat in list.categories">
              {{cat.name}}
          </li>
      </ul>
  </div>

I don't get anything back and I don't have any errors... What I want to have is one ul li with the name of the hotels and in another similar div I would like to have again list with categories names along with other data from categories under hotel. Please note that CatCtrl is the same as AppCtrl...

Any idea what I am doing wrong for first one, and what should I change in other controller to get what I need?

Thank you.

Shouldn't $scope.list = data.data be $scope.list = data instead? data is meant to be the JSON itself already — lucasnadalutti
– lucasnadalutti, Commented Mar 16, 2016 at 16:56
and list has no properties hotels or categories .. it has hotel and motel. Not clear at all what you want categories array to look like — charlietfl
– charlietfl, Commented Mar 16, 2016 at 17:06
some tiny changes: plnkr.co/edit/4ZV2TG7FATs7NoRIjF18?p=preview — ABOS
– ABOS, Commented Mar 16, 2016 at 17:15
@lucasnadalutti if I remove that data I get the first one correct — Morpheus
– Morpheus, Commented Mar 16, 2016 at 17:18
@charlietfl Ok, what I want is to loop through hotel categories and display them on the page. I already have names from first suggestion. — Morpheus
– Morpheus, Commented Mar 16, 2016 at 17:19

lucasnadalutti · Accepted Answer · 2016-03-16 17:27:20Z

1

Now that you got the first part right, getting the categories should require the code to be changed to:

<div ng-controller="AppCtrl">
    <ul class="pull-left">
        <li class="pull-left" ng-repeat="hotel in list.hotel">
            {{hotel.name}}
            <ul class="pull-right">
                <li class="pull-right" ng-repeat="cat in hotel.category">
                    {{cat.name}}
                </li>
            </ul>
        </li>
    </ul>
</div>

I'll rely on your CSS skills to arrange the display correctly.

answered Mar 16, 2016 at 17:27

lucasnadalutti

5,9882 gold badges30 silver badges49 bronze badges

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

9 Comments

Morpheus Over a year ago

I get this error in my editor: unresolved variable hotel.

lucasnadalutti Over a year ago

Try list.hotels then instead. In your original code you used list.hotels but the property was hotel in the JSON you provided, so I was unsure. Probably the same with category/categories.

Morpheus Over a year ago

Ok, I changed but nothing happened and I added that s to hotel, so it is hotels in json now and also motels... What should I try next? I don't get any output on page regarding categories...

lucasnadalutti Over a year ago

Note that category in cat in hotel.category should also be the same as category inside each hotel in your JSON. In case the property name is categories, it should also be changed accordingly. Even so, no luck?

Morpheus Over a year ago

Still nothing, so in JSON I have hotels instead of hotel and categories instead of category and then I have it like you said: ng-repeat="cat in hotels.categories" and finally {{cat.name}} and I don't get anything back.

|

Collectives™ on Stack Overflow

AngularJS getting data from JSON local file

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related