Javascript AngularJS从JSON本地文件获取数据

使用以下结构从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"
           }
           ]
       }
     ]
}

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

最后是我的html结构：

{
   "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"
           }
           ]
       }
     ]
}

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

{{hotel.name}




{{cat.name}

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

知道我在第一个控制器上做错了什么吗？我应该在另一个控制器上做些什么来得到我需要的

---

谢谢。

既然您正确地理解了第一部分，那么获取类别需要将代码更改为：

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

{{hotel.name}


{{cat.name}

---

我将依靠您的CSS技能来正确安排显示。

不应该改为

$scope.list=data.data

吗<代码>数据应该是JSON本身，并且

列表

没有属性

酒店

或

类别

。。它有

酒店

和

汽车旅馆

。一点也不清楚你想要什么

类别

数组看起来像一些微小的变化：@lucasnadalutti如果我删除这些数据，我会得到第一个correct@charlietfl好的，我想循环浏览酒店类别并在页面上显示它们。我已经有了第一个建议中的名字。我在编辑器中遇到了这个错误：未解析变量hotel。请尝试

list.hotels

。在原始代码中，您使用了

list.hotels

，但您提供的JSON中的属性是

hotel

，因此我不确定。可能与

category

/

categories

相同。好吧，我做了更改，但什么也没发生，我将s添加到了酒店，所以现在是json格式的酒店，还有汽车旅馆。。。下一步我应该试试什么？我在页面上没有得到任何关于类别的输出…请注意

category

中的

category

在您的JSON中，category也应该与每个

hotel

中的

category

相同。如果属性名称为

类别

，则也应相应更改。即使如此，没有运气？还是没有什么，所以在JSON中，我有

酒店

而不是

酒店

和

类别

而不是

类别

，然后我有了你说的：

ng repeat=“cat in hotels.categories”

，最后我没有得到任何回报。