Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Niall Maher
Niall Maher
16,985 Points
Posted by Niall Maher
Niall Maher
16,985 Points

Help using a API in angular.

I've been working on a challenge the last few days. I am about 90% finished. The problem is I'm trying to get an API to work in Angular and have no idea how to do it. Here's my workspace.

  • https://w.trhou.se/7531kzn06y Where I have an image placeholder I'm trying to iterate over JSON (news-article-feed.json) file and retrieve images from Getty Images (I think). I've never used an API with angular so I am really stuck.

HELP!!!

Please :P

Arul Paul
Arul Paul
540 Points
Arul Paul
Arul Paul
540 Points

I took a look at your code. Do you understand promises? Or how $q works? It might be better solved using those. When you get the success for retrieving your JSON use the array filter function to grab the links into a new array. Then use a forEach to call every image with $http. If the image is byte stream you will need to encode it, and you can display it. It is important you cannot be outside the context of success. This is because all the code is executed in serial while $http is a promise that runs asynchronously.

Niall Maher
Niall Maher
16,985 Points
Niall Maher
Niall Maher
16,985 Points

Arul Paul I don't have a clue about either of those. I may start looking I don't think I'll meet the deadline at this rate unfortunately :/ Do you have a sample of how I could achieve this?

1 Answer

Arul Paul
Arul Paul
540 Points
Arul Paul
Arul Paul
540 Points

Niall Maher I wrote some code for you. Take a look here-

$http.get('data/news-article-feed.json').success(function (data) {
    $scope.newsFeed = data;
    parseTheFeed(data);
});

var parseTheFeed = function (dataFromGet) {
    var reformattedLinks = dataFromGet.map(function (dataFromGet) {
        return dataFromGet.links; // This maps the appropriate links
    });
    console.log(reformattedLinks);
    getImages(reformattedLinks);
}

var getImages = function (dataFromParse) {
    dataFromParse.forEach(function (eachLinkArray) {
        eachLinkArray.forEach(function (eachLink) {
            console.log(eachLink.url); // You could probably push and then call API
        })
    });
}

Here is the getty image API guide that I got from googling. I am not sure what was going on with the URL's in your JSON file, so I didn't write that - https://github.com/gettyimages/gettyimages-api/blob/master/code-samples/JavaScript.md

Here is documentation for array map that I use- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Here is documentation for array forEach that I use- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

For could just as easily write a for loop. However, since Javascript provides these capabilities I like using it. Good luck!