AngularJS在ng-repeat中访问JSON文件

Question

Is something like this possible in Angular, I have tried searching but I don't know the exact terms to search for, so first of all, my apologies. 在Angular中可能会发生这种情况，我尝试搜索，但是我不知道要搜索的确切术语，因此首先，我要道歉。

I am using Angular successfully to access a JSON file. 我正在成功使用Angular访问JSON文件。

My JSON file contains a list of over 150 events, each event has some basic information like image, title, price, whether the event is sold out etc. 我的JSON文件包含超过150个事件的列表，每个事件都有一些基本信息，例如图像，标题，价格，事件是否售罄等。

Each event ALSO contains a URL to JSON file about that event. 每个事件还包含有关该事件的JSON文件的URL。 This file contains much more in depth information about the individual event such as location, difficulty, wheelchair accessible etc. 该文件包含有关单个事件的更多深度信息，例如位置，难度，轮椅可入性等。

How can I loop through the first JSON but still extract the information for the "embedded"? 如何遍历第一个JSON，但仍提取“嵌入式”信息？ JSON file so that I display all information on one page. JSON文件，以便我在一页上显示所有信息。

I am stuck with being able to understand how to "call" that second JSON file of information while being in a ng-repeat. 我坚持能够理解在ng-repeat中如何“调用”第二个JSON文件信息。

and as a beginner to Angular I struggled to search for the correct terminology to help myself. 作为Angular的初学者，我一直在努力寻找正确的术语来帮助自己。

thanks 谢谢

EDITED ----- 编辑-----

I have created a plunkr here of part of what I am trying to achieve. 我在这里创建了一个plunkr，这是我要实现的目标的一部分。

http://plnkr.co/edit/zYAhNKdM18pxuK5roPjj?p=preview http://plnkr.co/edit/zYAhNKdM18pxuK5roPjj?p=preview

<!DOCTYPE html>
<html>


<head>
<style>
#event-list span{display:block;}
#event-list li{clear:both;}
#event-list ul{list-style: none;}
#event-list img{float:left;}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("exampleApp", []);

app.controller("eventCtrl", function ($scope, $http, $location) {

  var eventList = "http://ajax.wiggle.co.uk/api/list/events/?ris=1";

  $scope.host = $location.host;
  $scope.wiggleEvents = [];


  $http({
      method: 'JSONP',
      url: eventList + '&callback=JSON_CALLBACK'
  }).success(function (data, status, headers, config) {
      $scope.wiggleEvents = data.Results.Products;


      // data contains the response
      // status is the HTTP status
      // headers is the header getter function
      // config is the object that was used to create the HTTP request
  }).error(function (data, status, headers, config) {
  });
});

</script>

</head>

<body ng-app="exampleApp">
<div ng-controller="eventCtrl">
    <div class="row">
        <div class="col-md-12" id="event-list">
            <ul>
                <li ng-repeat="p in wiggleEvents" >

                    <!-- i need to display a mixture of information from the first JSON file and information from each individual events JSON file -->
                    <img src="" ng-src="{{p.Image}}?w=125&h=125&a=7" />
                    <span class='name'>Title: {{p.Title}}</span>
                    <span>PID: {{p.pid}}</span>

                    <!--Each of these events has an Apirl which is a JSON file of the information on the event -->
                    <span>ApiUrl: {{p.ApiUrl}}</span>

                    <!--AND here i want to add short description of each event. found in the API of each individual event -->
                    <!--AND here i want to add difficulty rating from API of each individual event -->
                    <!--AND here i want to add location area of each individual event  etc etc etc -->
                </li>
            </ul>
        </div>                             
    </div>
</div>    
  </body>
</html>

I can successfully get information from the main JSON file, and display the 24 events in the page. 我可以从JSON主文件中成功获取信息，并在页面中显示24个事件。

the main JSON file is here: http://ajax.wiggle.co.uk/api/list/events/?ris=1 主要的JSON文件在这里： http : //ajax.wiggle.co.uk/api/list/events/?ris=1

each "product" in that JSON has it's own APIUrl to it's own individual JSON file which contains more information about that individual product. JSON中的每个“产品”都有自己的APIUrl，它是自己的单独JSON文件，其中包含有关该单独产品的更多信息。

I am trying to output in my html some information from the main JSON and some information from each idividual JSON at the same time. 我正在尝试在html中同时输出来自主要JSON的一些信息和来自每个固有JSON的一些信息。

I am really stuck with how to access each of those individual JSON files, especially as there could be varying amount of "products" contained within the first main file. 我真的对如何访问每个单独的JSON文件一无所知，特别是因为第一个主文件中可能包含不同数量的“产品”。 it happens to be 24 today, but it could be 36 tomorrow etc. 今天恰好是24点，明天可能是36点，等等。

thanks 谢谢

Answer 1

let's say you have the following json object: 假设您有以下json对象：

myJsonObj= {
   user: {
       firstname : "jane",  
       lastname : "doe"
   },
   friend: {
       firstname: "hancock",
       lastname : "john"
   }
}

To iterate over properties an object litteral (your json object) using ng-repeat, you must use (key, value) like: 要使用ng-repeat遍历对象对象（您的json对象）的属性，您必须使用（键，值），如：

<div ng-repeat="(key,value) in myJsonObj">  
    <span ng-bind="key"></span>    // displays "user" , then "friend"
    <span ng-bind="value.firstname"></span>     // displays "jane"  
    <span ng-bind="value.lastname"></span>     // displays doe  
</div>

read more about iterating over object properties here : ng-repeat . 在此处阅读有关迭代对象属性的更多信息： ng-repeat 。

Edit: you can also do more stuff by passing some data to a scope function. 编辑：您还可以通过将一些数据传递给作用域函数来做更多的事情。 like 喜欢

<div ng-repeat="(key,value) in myJsonObj">  
    // assuming retrieveUrl() is a scope function you wrote
    // in order to extract and return the url from the data you passed
    // as parameter
    <span ng-bind="retrieveUrl(value.url)"></span>    
</div>

Answer 2

The best way to fetch json data from a url in the data nested within an ng-repeat would be to write a directive that runs a $http GET. 从嵌套在ng-repeat中的数据中的URL中获取json数据的最佳方法是编写运行$ http GET的指令。 Something like this: 像这样：

http://plnkr.co/edit/xFCG1p8WwDw9bt6jO49q?p=preview http://plnkr.co/edit/xFCG1p8WwDw9bt6jO49q?p=preview

html HTML

<div ng-repeat="thing in things track by $index">
  <get-url-data url="thing"></get-url-data>
</div>

js: JS：

app.directive('getUrlData', function() {
  return {
    restrict: 'E',
    template: '<div>{{vm.jsonData}}</div>',
    scope: {
      url: '=?'
    },
    controllerAs: 'vm',
    bindToController: true,
    controller: function($http) {
      vm = this;
      $http.get(vm.url).then(function(response) {
        vm.jsonData = response;
      });
    }
  };
});

Answer 3

I managed to find an answer for this question. 我设法找到了这个问题的答案。 I followed the chosen answer in this stackoverflow post: 我在这个stackoverflow帖子中关注了选定的答案：

How to bind multiple JSON files in ng-repeat (AngularJS)? 如何在ng-repeat（AngularJS）中绑定多个JSON文件？

This was written in a way I understood, and it worked for me when I followed it. 这是我理解的方式，当我遵循它时，它对我有用。

AngularJS在ng-repeat中访问JSON文件

问题描述

3 个解决方案

解决方案1
0 2015-11-16 18:18:39

解决方案2
0 2015-11-16 18:29:31

解决方案3
0 已采纳 2015-11-20 09:59:03

AngularJS在ng-repeat中访问JSON文件

问题描述

3 个解决方案

解决方案1 0 2015-11-16 18:18:39

解决方案2 0 2015-11-16 18:29:31

解决方案3 0 已采纳 2015-11-20 09:59:03

解决方案1
0 2015-11-16 18:18:39

解决方案2
0 2015-11-16 18:29:31

解决方案3
0 已采纳 2015-11-20 09:59:03