JSFiddle - React, Tailwind, and code Playground

by Gary Scott

HTML

<button>Load Data</button>

<ul>
    <li>Name: <span id="name"></span>
    </li>
    <li>Age: <span id="age"></span>
    </li>
    <li>Active: <span id="active"></span>
    </li>
    <li>Favorite Desserts:
        <ul id="desserts"></ul>
    </li>
    <li>Address:
        <ul>
            <li id="street"></li>
            <li id="city"></li>
            <li id="state"></li>
        </ul>
    </li>
</ul>
<p id="generator">Source: </p>

JavaScript

var url = "/gh/get/response.json/garster/garster.github.io/tree/master/presentations/json/examples/json/";

$("button").click(function(){

    $.get(url, function (data) {
        //alert( "success" );

        // Info
        $("#name").html(data.Name);
        $("#age").html(data.Age);
        $("#active").html(data.Active ? "Yes" : "No");

        // Desserts
        for (var i = 0; i < data.FavoriteDesserts.length; i++) {
            $("#desserts").append("<li>" + data.FavoriteDesserts[i] + "</li>");
        }

        // Address
        $("#street").html(data.Address.Street);
        $("#city").html(data.Address.City);
        $("#state").html(data.Address.State);
        
        // Source
        $("#generator").append(data.Generator);
        
    }).fail(function () {
        alert("error");
    });
    
});