Lab - JSONP using Flickr feeds

Using JSONP, write a page that, when loaded, will display the latest 10 Flickr images that have some tag (e.g. "Dublin", "Louvre", "Ferrari").

Your page loads data from a 3rd party site. JSONP gets around same-origin policy.

Background

• JSONP
• We will implement JSONP with a Flickr public feed.
• Flickr API will format a JSON feed as a function call on data.
• e.g. See feed of images tagged with "Louvre" wrapped by a function myfn:

   flickr.com/feed?jsoncallback=myfn 
  

• To see the structure of the JSON returned:
  1. Read the Flickr docs.
  2. Type variable name in JS console and click through.
  3. Output complex objects to console.

Recipe

1. Define your own function called myfn(data) which just tells us it was called: alert("myfn called");
2. Below this, insert a script tag with src equal to the URL needed to do the Flickr call with callback function "myfn".
3. Check that myfn actually gets called.

4. Once myfn is being called, insert code into it to analyse data.
5. Hint: Make a global variable called x. Set x = data; Type x in the JS console to see structure.

6. Finally, extract n images and insert them in the page.
7. Define a div on the page with some id.
8. Define a variable to hold a string of HTML code: var s;
9. Cycle through the images:

    for ( var i = 0; i < 10; i++ ) 
    {
     // get url of image i ...
     s = s + "<img src=url>";
    }
   

10. Write the string with the images to the div: document.getElementById("id").innerHTML = s;