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://openstates.org/api/v1//bills/ak/29/HJR%2028/?apikey=5e2583f2e8a842ccb0ffbfe9ad8cd4bc=processJSON'></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);
};