AngularJS从JSON本地文件获取数据

时间:2022-08-09 19:43:48

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

我正在使用以下结构从json文件中检索数据时遇到麻烦。在我的controller.js文件中,我有:

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:

在该name.json文件中,我有以下结构:

{
   "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:

最后是我的html结构:

<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...

我没有得到任何回报,我没有任何错误...我想要的是一个ul li与酒店的名称和另一个类似的div我想再次列出与类别名称一起来自酒店类别的其他数据。请注意,CatCtrl与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.

1 个解决方案

#1


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.

我会依靠你的CSS技巧来正确安排显示。

#1


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.

我会依靠你的CSS技巧来正确安排显示。