0

I am learning API's at school, so I am not really good at jQuery. But I must make an API call and do something with that information.

I did an ajax request to the Instagram gathering JSONP data.

               $.ajax(
                   {
                    type: "GET",
                    dataType: "jsonp",
                    cache: false,
                    url: "https://api.instagram.com/v1/tags/" + boxInput + "/media/recent?client_id=8d1631975f2c42fdb8fb628ee9ac8f13",
                    success: toonResults,  

                });


               function toonResults (Data){
                    console.dir(Data);

My goal is to say:

Hey JSON Data, I want to select all images from all the 20 Objects you gave me, ( I get 20 results), and place those on my HTML div called #imagearea.

But I have really no idea where to start, exept I've heard that json.parse might do the trick, I just don't know how to apply json.parse in my situation.

Thanks a lot,

Mark.

user3771895
  • 1
  • 1
  • jQuery should call `JSON.parse` for you in this situation. `Data` should be the result of parsing the JSON string which instagram sends as a result of your query. – Aaron Digulla Jun 24 '14 at 15:34
  • 1
    possible duplicate of [how to use json file in html code](http://stackoverflow.com/questions/12070631/how-to-use-json-file-in-html-code) – Alexandru Chichinete Jun 24 '14 at 15:37
  • Take a look at the jQuery documentation at http://api.jquery.com/jquery.getjson/ and at http://instagram.com/developer/endpoints/tags/ for the expected result object. – flob Jun 24 '14 at 16:03

1 Answers1

1

A very contrived example might be:

function toonResults(Data) {
    var imageAreaDiv = $('#imagearea');

    // Assuming Data is an array of objects.
    $.each(Data, function(index, item) {
        // The `append` function allows dynamic HTML to be appended to the main div.
        imageAreaDiv.append('<img src="' + item.imageUrl + '" />');
    });
}

See this for append: http://api.jquery.com/append/

Hayes
  • 848
  • 4
  • 10
  • 1
    I'd suggest against `map`. Thought it does a loop, it is meant to generate a new array based on the returned values of each iteration. `forEach` is the better method for this since it just does a loop. For cross-browser compatibility, use `$.each()` instead. – Joseph Jun 24 '14 at 15:41
  • I think jQuery returns `item` as second parameter. First parameter is `index`. – Joseph Jun 24 '14 at 15:44
  • Thanks for your reply. I get 3 thumbnails on my website instead of the actual image, so just an image icon :(. Also I get an error in my console, which might explain this: GET file://localhost/Users/Mark/Desktop/twitter/undefined net::ERR_FILE_NOT_FOUND Edit: When I copy the URL code, I figured that the name of the image is undefined, instead of the actual image from the JSON data. – user3771895 Jun 24 '14 at 15:57
  • Thanks for another catch, Joseph. – Hayes Jun 24 '14 at 16:19
  • user3771895, Check the code update I just made `function(index, item)` that may help with your url. If not, please post your code so we can see what else might be going on. – Hayes Jun 24 '14 at 16:20