JSFiddle - React, Tailwind, and code Playground

by nathanlogan

HTML

<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<marquee id="loading">Loading...</marquee>
<ul id="people"></ul>

CSS

#loading {
    display:block;
    width:100px;
    margin:0 auto;
}

li {
    padding:5px;
    border:1px solid #999;
}

/* just to show that the li's got the intended template IDs */
#person_2 {
    background:#ccc;
}
}

JavaScript

APP = {
    
    initialize: function(){
        this.getPeople();
    },
    
    
    getPeople: function(){
        var that = this;
        
        $.ajax({
            type:"POST",
            url: "/echo/json/",
            dataType:"json",
            // the data attribute here is just to make JSFiddle's AJAX stuff work (same with the jQuery JSON script, included as an external resource)
            data: {
                json: $.toJSON({
                    people: [
                        {'id':1, 'name': 'Bob'},
                        {'id':2, 'name': 'Suzy'},
                        {'id':3, 'name': 'Tom'}
                    ]
                }),
                delay: 1.5
            },
            success: function(data){
                that.renderPeople(data.people);
            }
        }); 
    },
    
    
    renderPeople: function(people){
        var tmpl = this.templates.peopleTemplate;
        var html = '';
        
        // this really isn't the best way to do templating, just a quick way to show it without including a tmeplating library
        for (var i=0; i<people.length; i++) {
            html += tmpl
                .replace('{{name}}', people[i].name)
                .replace('{{id}}', people[i].id);
        }
        
        $('#loading').hide();
        $('#people').append( html );
    },
    
    
    templates: {
        peopleTemplate: '<li id="person_{{id}}">{{name}}</li>'
    }
};
    

APP.initialize();