AngularJS accessing a JSON file within a ng-repeat

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.

I am using Angular successfully to access a JSON file.

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.

Each event ALSO contains a URL to JSON file about that event. 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 file so that I display all information on one page.

I am stuck with being able to understand how to "call" that second JSON file of information while being in a ng-repeat.

and as a beginner to Angular I struggled to search for the correct terminology to help myself.

thanks

EDITED -----

I have created a plunkr here of part of what I am trying to achieve.

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.

the main JSON file is here: 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.

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.

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. it happens to be 24 today, but it could be 36 tomorrow etc.

thanks

Would it be possible to show an example of the JSON in a gist, or pastebin so that it makes it easier to assist you. — Sean Larkin, Nov 16 '15 at 18:05
Have you taken the [tutorial](https://docs.angularjs.org/tutorial)? It has functionality that's very close to what you're asking. — Amy Blankenship, Nov 16 '15 at 18:07
can you add your code here as sample..then it possible to help you.. — roshini, Nov 16 '15 at 18:13
Do you want to display all the content of 150 JSON in one single page or do you want to show the content of each JSON when the user click on the event? — pasine, Nov 16 '15 at 18:13
My best guess for you would be to use another directive that will read the file via $http and load the returning contents into a variable. — Vince, Nov 16 '15 at 18:15
hello all, i have attached some sample code, thank you so much for you patience with me. — w3littlebird, Nov 17 '15 at 17:52

jfab fab · Answer 1 · 2015-11-16T18:26:00.700

let's say you have the following json object:

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:

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

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>

score 0 · Answer 2 · answered Nov 16 '15 at 18:29

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. Something like this:

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

score 0 · Accepted Answer · edited May 23 '17 at 12:15

0

I managed to find an answer for this question. I followed the chosen answer in this stackoverflow post:

How to bind multiple JSON files in ng-repeat (AngularJS)?

This was written in a way I understood, and it worked for me when I followed it.

edited May 23 '17 at 12:15

Community

1
1

answered Nov 20 '15 at 09:59

w3littlebird

11
4

AngularJS accessing a JSON file within a ng-repeat

3 Answers3