AngularJS从JSON本地文件获取数据
AngularJS getting data from JSON local file
使用以下结构从 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技能来正确安排显示。
相关文章:
- 通过ajax到php文件获取单选按钮值
- jquery自动完成从本地文件获取数据
- 从外部js文件获取变量
- 应用程序脚本-自动从谷歌驱动器删除超过3天的文件-获取文件列表
- Ajax请求从php文件获取数据
- 从Javascript文件获取值
- 如何从外部JavaScript文件获取函数参数
- AngularJS从JSON本地文件获取数据
- 如何从另一个文件获取 HTML 元素值
- 从外部 json 文件获取数据
- 从HTML页面执行外部.js文件,通过发送输入.xml并从外部文件获取输出.xml.js文件
- 将数据从单独的 JavaScript 文件获取到数组中
- jQuery Ajax 文件获取问题
- AJAX/Jquery - 从 php 文件获取响应
- 根据 JSON 文件获取对象的架构
- 如何从输入类型=文件获取数据,修改它,然后将其插入到此输入JS中
- HTML和Javascript:使用输入文件获取完整的目录路径名
- 从本地文件获取JSON的角度服务不起作用
- 尝试从我的节点服务器加载脚本文件 - 获取 404
- 需要从外部文件获取JSON