如何在AngularJS中访问此JSON数据? [英] How would I access this JSON data in AngularJS?

问题描述

我正在尝试学习如何使用Angular加载JSON.我是同时涉及这两个主题的新手，并且坚持某些真正的初学者主题.

I am trying to learn how to load JSON with Angular. I'm a beginner with both topics, and am stuck on some really beginner topics.

我有一个名为food.json的JSON文件.它具有这样的结构:

I have a JSON file called food.json. It has structure like this:

 [
  {"uid":"55","title":"Nussbrot","code":"U VP 0000030","unit":[{"title":""}],"unitgram":"0","unitgram_second":"0","sorting":"0"},
  {"uid":"58","title":"Walnu\u00dfbrot","code":"X 39 2000002","unit":[{"title":"Scheiben"}],"unitgram":"45","unitgram_second":"0","sorting":"0"}
 ]

遵循 http://toddmotto中的说明. com/ultimate-guide-to-learning-angular-js-in-day/，我有一个像这样的控制器:

Following instructions from http://toddmotto.com/ultimate-guide-to-learning-angular-js-in-one-day/, I have a controller like this:

myApp.controller('EmailsCtrl', ['$scope', function ($scope) {

$scope.foodlist = {};
$scope.foodlist.foodtitle = '';

$http({
  method: 'GET',
  url: 'food.json'
})
.success(function (data, status, headers, config) {
  $scope.foodlist = data.; //I don't know what to call here as my data elements have no names?
})
.error(function (data, status, headers, config) {
  //error
});
}]);

我要坚持的第一点是，如果JSON对象没有名称，如何将数据分配给"$ scope.foodlist"?

The first point I am stuck in is, how do I assign data to my ´$scope.foodlist´ if the JSON objects have no names?

到目前为止，我已经针对我的无效尝试构建了一个Plunkr ，并且感谢您提供以下指导:a)读取JSON和b)将JSON数据分配给控制器中的值.

I've built a Plunkr of my not-working attempts so far, and would appreciate any guidance in a) reading in the JSON and b) assigning the JSON data to values in controller.

推荐答案

ng-repeat在您的情况下将迭代数据中的对象数组

ng-repeat in your case will iterate the array of objects in your data

您只需要使用:

<li ng-repeat="food in foodlist">

然后在循环的每次通过中，angular将引用数组中的当前对象以产生类似{{ food.title }}

Then on each pass of the loop, angular will reference the current object in array to produce output like {{ food.title }}

我更新了您的 此处演示

I updated your demo here

编辑:强烈建议您逐步完成有关Angular Docs网站的教程

Edit Strongly suggest you go through the tutorial on angular docs site step by step

这篇关于如何在AngularJS中访问此JSON数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！