Ajax/Json example

nested calls

by Salmin Skenderovic

HTML

<ul id="list">
        
</ul>

JavaScript

(function(){
    //getJSON example
    var jqxhr = $.getJSON( "https://api.myjson.com/bins/2emll", function(data) { 

        for (key in data) {
            $("#list").append("<li class='" + key + "'>" + data[key] + "</li>");
        }

    }).done(function( data ) {
        
		$("#list li").on("click", function(e){
            
            var target = e.target.className;
            
            //ajax example
             $.ajax({ 
             	url: 'https://api.myjson.com/bins/309x5',         
             	type: 'get',
                data: target,
             	dataType: 'json',    
             	success: function(data) {
                    var title = $("." + target).text();
                    $("." + target).html(title + '<ul id="ul-' + target + '"></ul>'); 
				}
                 
           }).done(function(data){
				
                for (key in data) {
            		$("#ul-" + target).append("<li class='" + key + "'>" + data[key] + "</li>");
                }
                 
           });

		});
    });
})();