AngularJS 从 JSON 本地文件获取数据

Question

我在使用以下结构从 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);


});

在那个 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"
           }
           ]
       }
     ]
}

最后是我的 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>

我没有收到任何回复，也没有任何错误... 我想要的是一个带有酒店名称的 ul li 和另一个类似的 div 我想再次列出类别名称以及酒店下类别的其他数据。请注意，CatCtrl 与 AppCtrl 相同...

知道第一个我做错了什么吗？我应该在其他控制器中更改什么以获得我需要的东西？

谢谢。

Answer 1

现在你已经猜对了第一部分，获取类别应该需要将代码更改为：

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

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

AngularJS 从 JSON 本地文件获取数据

AngularJS getting data from JSON local file

javascript

jquery

json

angularjs