$http.get API in Angular JS

Question

I'm trying to do an ng-repeat in AngularJS that pulls from the uiFaces API. This is my code at the moment. This http.get is wrapped inside my .controller:

$http.get('http://uifaces.com/api/v1/random').success(function(data){
      $scope.uifaces = data;
});

And I'm trying to repeat a list of faces with ng-repeat:

<ul>
  <li ng-repeat="face in uifaces">
      <h6>{{ face.username }}</h6>
      <img ng-src="{{ face.image_urls.normal }}">
  </li>
</ul>

But I just keep getting two blank list items. I'm very new to Angular and APIs so trying to wrap my head around why nothing is being returned. Can anyone tell me what I'm doing wrong?

Any help is appreciated. Thanks in advance!

Are you logging data before set it to an scope? Are 100% sure that you are receiving a response? — Jobsamuel
– Jobsamuel, Commented Oct 13, 2014 at 17:14

Jonathan Lonowski · Accepted Answer · 2014-10-13 17:26:59Z

3

The data provided by /random isn't a collection of multiple faces to repeat for. It's just a single Object.

{
    "username": "...",
    "image_urls": {
        "normal": "...",
        ...
    }
}

Though, as an object, you could access its properties directly.

<ul>
  <li>
    <h3>{{ uifaces.username }}</h6>
    <img ng-src="{{ uifaces.image_urls.normal }}">
  </li>
</ul>

Or, if you want to use it as a collection to repeat, you'll have to define that part yourself:

// wrap `data` in an `Array` to `repeat`
$scope.uifaces = [ data ];

edited Oct 13, 2014 at 17:26

answered Oct 13, 2014 at 17:14

Jonathan Lonowski

124k35 gold badges203 silver badges202 bronze badges

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

3 Comments

realph Over a year ago

I see. So I take it there's no way to get a repeat directly from that API – is that right? Can I still use an ng-repeatto have say, a list of three usernames and images, or are you saying I have to write that part myself?

Jonathan Lonowski Over a year ago

@realph It doesn't appear /random has any options to provide more than a single user. You may try asking the owners if they'll add such an option. Otherwise, if you want a list of 3, you'll have to make 3 separate $http.get() requests and consolidate their individual data. Related: accessing data of multiple http calls - how to resolve the promises

realph Over a year ago

Would that be the most elegant way to do it? My sole purpose of using uiFaces is to generate a bunch of placeholder (but pretty) usernames and user pics for comment sections throughout my Angular app. So I need an easy way to pull usernames and pics for that.

John · Accepted Answer · 2014-10-13 17:20:09Z

Here is the result I got from that api call:

{
  "username": "jckieangel",
  "image_urls": {
    "epic": "https:\/\/s3.amazonaws.com\/uifaces\/faces\/twitter\/jckieangel\/128.jpg",
    "bigger": "https:\/\/s3.amazonaws.com\/uifaces\/faces\/twitter\/jckieangel\/73.jpg",
    "normal": "https:\/\/s3.amazonaws.com\/uifaces\/faces\/twitter\/jckieangel\/48.jpg",
    "mini": "https:\/\/s3.amazonaws.com\/uifaces\/faces\/twitter\/jckieangel\/24.jpg"
  }
}

So not sure why you are getting two blank LIs and not just one.

You'll need to strip out those backslashes in the image_urls before they will display right, so you'll probably want to add a helper method for that

  <h6>{{ face.username }}</h6>
  <img ng-src="{{ fixUrl(face.image_urls.normal) }}">

and then create fixUrl(url) in your controller

Also you'll need to either directly make it an array (or add the data to an existing one) $scope.uifaces = [data]; or remove the ng-repeat since its a single item.

Pedro Justo · Accepted Answer · 2014-10-13 17:34:14Z

0

don't use ng-repeat because its only one item.

<ul>
<h6>{{ face.username }}</h6>
      <img ng-src="{{ face.image_urls.normal }}">
</ul>

answered Oct 13, 2014 at 17:34

Pedro Justo

4,4191 gold badge19 silver badges21 bronze badges

Comments

Geo Jacob · Accepted Answer · 2014-10-13 18:29:14Z

0

<ul>
  <li ng-repeat="face in uifaces">
   <h6>{{ face.username }}</h6>
   <img ng-src="face.image_urls.normal">
  </li>
</ul>

answered Oct 13, 2014 at 18:29

Geo Jacob

6,0291 gold badge39 silver badges46 bronze badges

Collectives™ on Stack Overflow

$http.get API in Angular JS

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest