retrieve data from json file to create slider

Question

I have JSON file which code shown below. I try to retrieve it's data to create slider elements.

Here is the JSON object.

{
"slider":[{
    "img"    : "images/1.jpg",
    "title"  : "Beady little eyes",
    "expert" : "Little birds pitch by my doorstep"
},

{
    "img"    : "images/2.jpg",
    "title"  : "Beady little eyes",
    "expert" : "Little birds pitch by my doorstep"
},

{
    "img"    : "images/3.jpg",
    "title"  : "Beady little eyes",
    "expert" : "Little birds pitch by my doorstep"
},

{
    "img"    : "images/4.jpg",
    "title"  : "Beady little eyes",
    "expert" : "Little birds pitch by my doorstep"
}

]}

and I use below jquery code to retrieve data from JSON and generate html.

$.getJSON('data.json', function(data){
        $('.slider').append('<ul/>');

            $.each(data, function(key, val){

                for(var i = 0; i < val.length; i++ ){

                    var mhtml = '<li><div class="bannerImg"><img src="'+val[i].img+'" /></div>';
                        mhtml += '<h1 class="title">'+val[i].title+'</h1>';
                        mhtml += '<p class="expert">'+val[i].expert+'</p>';
                        mhtml += '</li>';


                    $('.slider ul').append( $(mhtml) );
                }   
            });


        });

is there any better way to do this. Because still it's not have preloader.

Answer 1

try something like this

$(function(){
    var json = {
        "slider":[{
            "img"    : "images/1.jpg",
            "title"  : "Beady little eyes",
            "expert" : "Little birds pitch by my doorstep"
        },
        {
            "img"    : "images/2.jpg",
            "title"  : "Beady little eyes",
            "expert" : "Little birds pitch by my doorstep"
        },
        {
            "img"    : "images/3.jpg",
            "title"  : "Beady little eyes",
            "expert" : "Little birds pitch by my doorstep"
        },
        {
            "img"    : "images/4.jpg",
            "title"  : "Beady little eyes",
            "expert" : "Little birds pitch by my doorstep"
        }]};

    // if you are getting json like above response in ajax
    // then simply retrive slider and iterate over it
    var mhtml = '';
    $.each(json.slider, function(key, val){
        mhtml += '<li><div class="bannerImg"><img src="'+val.img+'" /></div>';
        mhtml += '<h1 class="title">'+val.title+'</h1>';
        mhtml += '<p class="expert">'+val.expert+'</p>';
        mhtml += '</li>';
    });
    var $ul = $('<ul>').append($(mhtml));// append DOM only one time.
    $('.slider').append($ul);
})

Alternative

    var mhtml = '<ul>';
    $.each(json.slider, function(key, val){
        mhtml += '<li><div class="bannerImg"><img src="'+val.img+'" /></div>';
        mhtml += '<h1 class="title">'+val.title+'</h1>';
        mhtml += '<p class="expert">'+val.expert+'</p>';
        mhtml += '</li>';
    });
    mhtml += '</ul>';
    $('.slider').append($(mhtml));// append DOM only one time.