JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<h2>Monkey time! (With JSONP)</h2>
<h3>How JSONP really works</h3>
<hr/>
<div id='monkeys'></div>

<!-- The JSONP call just takes place in a normal script tag with a URL 
parameter that specifies your callback method name. -->

<script src='http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=processJSON&tags=monkey&tagmode=any&format=json'></script>


<!-- Of course, in a real-world application, you probably wouldn't want to
use a hard-coded script tag because it blocks your page load while the
script loads and executes. Adding a script tag to the page dynamically 
will effectively load the script asynchronously. -->

JavaScript

// This function will be called when the JSONP script returns. It needs to be evaluated
// before the script with the JSONP call.
var processJSON = function (json) {
    var monkey_photos = document.getElementById('monkeys');
    var container = document.createElement('div');

    // Initialize a var for new elements
    var div;

    // Build a list of images
    for (var item in json.items) {

        // Create an element to hold an image. It's easier to append
        // stuff to the page this way.
        div = document.createElement('div');

        // Stick html into the new div, append to the container.
        div.innerHTML = json.items[item].description;
        container.appendChild(div);
    }

    // Add the images to the DOM all at once (rather than one at a time, 
    // which can cause multiple reflows.
    monkey_photos.appendChild(container);
};