JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="container"></ul>
JavaScript
(function(){
var person = function(o){
if(!(this instanceof person)){
return new person(o);
}
if(typeof o === 'undefined'){
o = {};
}
this.id = o.id || -1;
this.age = o.age || 'unknown';
this.name = o.name || 'unknown';
this.gender = o.gender || 'transexual';
};
person.fn = person.prototype = {
toString: function(){
return '<strong>Id:</strong> ' + this.id + ', <strong>name:</strong> ' + this.name + ', <strong>gender:</strong> ' + this.gender + ', <strong>age:</strong> ' + this.age;
}
};
var personHandler = function(tar){
if(!(this instanceof personHandler)){
return new personHandler(tar);
}
this.target = tar || 'unknown';
//list of all people -- initialized with nothing
this.rawData = '';
this.persons = [];
};
personHandler.fn = personHandler.prototype = {
loadRawData: function(callback){
$.getJSON('http://www.json-generator.com/api/json/get/bPFaIYWLpK?indent=2', function(data){
//applying data to rawdata
this.rawData = data;
if(typeof callback != 'undefined'){
callback.apply(this);
}
}.bind(this)).fail(function(){
console.log('Uh oh an error occured');
});
//for chainability
return this;
},
//PART 1 HERE ===============================
load: function(callback){
//TODO: Make the for loop asynchronous with callback
setTimeout(function(){
for(var i = 0; i < this.rawData.length; i++){
var personRawData = this.rawData[i];
...