Angular - populate list with AJAX

Question

I am working on a web app, and I want to show data in a list, by category. I am getting back AJAX data that has a title, and a category. The code to get that is like this:

angular.module('getImageData', ['ngResource'])
  .factory('images', function ($resource)
  {
      return $resource('/ImageData/GetImages', {}, {
          query: { method: 'GET', isArray: true }
      });
  });

and then like this:

$scope.imageData = images.query(function (response)
{
    // This has become superfluous
    return response;
});

The AJAX call us occurring and I can see my data in Chrome.

Then here is my HTML:

<ul>
    <li data-ng-repeat="image in imagedata">
        <a href="">{{image.Title}}</a>
    </li>
</ul>

I intend to do this:

<ul>
    <li data-ng-repeat="image in imagedata | filter : {TypeFilter : 'a' }">
        <a href="">{{image.Title}}</a>
    </li>
</ul>

but for now I'm keeping it simple.

The list is never rendered. This is the HTML I see in chrome:

<ul>
  <!-- ngRepeat: image in imagedata -->
</ul>

I am assuming this means it ran before the data came back. How do I make it wait ?

Thanks.

try this link: http://stackoverflow.com/questions/15243506/angularjs-resolve-data-before-showing-view — spyder, Apr 21 '14 at 13:11

score 3 · Accepted Answer · answered Apr 21 '14 at 13:35

3

You have a spelling mistake in image in imagedata. It should be image in imageData

You also do not need to write callback function for query

 $scope.imageData = images.query();

answered Apr 21 '14 at 13:35

Fizer Khan

88,237
28
143
153

score 0 · Answer 2 · answered Apr 21 '14 at 11:31

0

try changing this:

$scope.imageData = images.query(function (response)
{
    // This has become superfluous
    return response;
});

to this:

$scope.imageData = images.query(function (response)
{
    $scope.imageData = response;
});

answered Apr 21 '14 at 11:31

J.Wells

1,749
12
13

Angular - populate list with AJAX

2 Answers2