AngularJS从JSON本地文件获取数据

AngularJS getting data from JSON local file

本文关键字:文件 获取 数据 JSON AngularJS      更新时间:2023-09-26

使用以下结构从 json 文件中检索数据时遇到问题。在我的控制器.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);

});

在该名称.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 相同...

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

谢谢。

现在您已经正确掌握了第一部分,获取类别应该需要将代码更改为:

<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技能来正确安排显示。