AngularJS在ng重复中访问JSON文件

AngularJS accessing a JSON file within a ng-repeat

本文关键字：访问 JSON 文件 ng AngularJS      更新时间：2023-09-26

在Angular中可能会出现这样的情况吗？我已经尝试过搜索，但我不知道要搜索的确切术语，所以首先，我很抱歉。

我正在成功地使用Angular访问JSON文件。

我的JSON文件包含150多个事件的列表，每个事件都有一些基本信息，如图像、标题、价格、事件是否售罄等。

每个事件还包含一个指向该事件的JSON文件的URL。该文件包含更多关于个人活动的深入信息，如地点、难度、轮椅可及性等。

如何循环第一个JSON，但仍然提取"嵌入"的信息？JSON文件，以便在一个页面上显示所有信息。

我一直无法理解如何在ng重复中"调用"第二个JSON信息文件。

作为Angular的初学者，我努力寻找正确的术语来帮助自己。

感谢

编辑-----

我在这里创造了一个庞克，这是我努力实现的目标的一部分。

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>

我可以成功地从主JSON文件中获取信息，并在页面中显示24个事件。

主JSON文件如下：http://ajax.wiggle.co.uk/api/list/events/?ris=1

JSON中的每个"产品"都有自己的APIUrl，指向自己的单个JSON文件，该文件包含有关该单个产品的更多信息。

我试图在我的html中同时输出来自主JSON的一些信息和来自每个单独JSON的某些信息。

我真的很难理解如何访问每一个单独的JSON文件，尤其是因为第一个主文件中可能包含不同数量的"产品"。今天正好是24点，但明天可能是36点等等

感谢

假设您有以下json对象：

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

要使用ng repeat迭代对象litral（json对象）的属性，必须使用（key，value），如：

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

阅读更多关于在对象属性上迭代的信息：ng-reeat。

编辑：您还可以通过将一些数据传递给scope函数来完成更多的工作。像

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

从嵌套在ng repeat中的数据中的url获取json数据的最佳方法是编写一个运行$http GET的指令。类似这样的东西：

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

html

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

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;
      });
    }
  };
});

我设法找到了这个问题的答案。我遵循了这个stackoverflow帖子中选择的答案：

如何在ng repeat（AngularJS）中绑定多个JSON文件？

这是以我理解的方式编写的，当我遵循它时，它对我有效。

相关文章：