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.

Do the images have a TypeFilter attribute?

a better oliver
– a better oliver

2014-04-21 12:10:48 +00:00
Commented Apr 21, 2014 at 12:10 — a better oliver
– a better oliver, Commented Apr 21, 2014 at 12:10
try this link: stackoverflow.com/questions/15243506/…

spyder
– spyder

2014-04-21 13:11:08 +00:00
Commented Apr 21, 2014 at 13:11 — spyder
– spyder, Commented Apr 21, 2014 at 13:11

Fizer Khan · Accepted Answer · 2014-04-21 13:35:21Z

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, 2014 at 13:35

Fizer Khan

93.6k30 gold badges147 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

J.Wells · Accepted Answer · 2014-04-21 11:31:01Z

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, 2014 at 11:31

J.Wells

1,75912 silver badges13 bronze badges

Collectives™ on Stack Overflow

Angular - populate list with AJAX

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related