Generating dynamic clickable list items

Question

I am new to jquery mobile. I am trying to generate dynamic clickable list items, where list items are names coming from ajax as response.I am getting Email of Ravi Tamada in secondpage,for each list item. Why email id is not changing for each list item? Is there any wrong in my code?

My script:

//When DOM loaded we attach click event to button
    $(document).on("pageinit","#authors-list-page",function() {

            //start ajax request
                 $.ajax({
                        url: “myURL/contacts.json",

                        dataType: "json",
                        success: function(data) {

                        var listItem = "";
                        for(var i=0;i<data.contacts.length;i++){ 
                              listItem += '<li><a href="#">' + data.contacts[i].name + '</a></li>'; 
                         }

                         $("#dynamicFieldList").append(listItem).promise().done(function () {
                              //refresh list here
                              $(this).listview("refresh");
                              //then add click event using delegation
                              $(this).on("click", "li", function () {

                               var currentItem = $(this).index();
                               alert(currentItem);

                               var newPage = $("<div data-role='page' id='secondpage'><div data-    role=header><a data-iconpos='left'  data-icon='back' href='#' data-role='button' data-rel='back'>Back</a><h1>"+data.contacts[currentItem].name+"</h1></div><div data-role=content>Email: "+ data.contacts[currentItem].email+"</div></div>");

                                // Append the new page into pageContainer
                                newPage.appendTo($.mobile.pageContainer);

                                // Move to this page by ID '#page'
                                $.mobile.changePage('#secondpage');

                                          });
                                 });

                           }
                   });

          });

contacts.json :

    {
"contacts": [
    {
            "id": "c200",
            "name": "Ravi Tamada",
            "email": "[e-mail]",
            "address": "xx-xx-xxxx,x - street, x - country",
            "gender" : "male",
            "phone": {
                "mobile": "[phone]",
                "home": "00 000000",
                "office": "00 000000"
            }
    },
    {
            "id": "c201",
            "name": "Johnny Depp",
            "email": "[e-mail]",
            "address": "xx-xx-xxxx,x - street, x - country",
            "gender" : "male",
            "phone": {
                "mobile": "[phone]",
                "home": "00 000000",
                "office": "00 000000"
            }
    },
    .
    .
    .
    .
]}

Answer 1

You are iterating in whole response and then setting list item.

Use this:

for(var i=0;i<data.contacts.length;i++){ 
    listItem += '<li><a href="#">' + data.contacts[i].name + '</a></li>'; 
    $("#dynamicFieldList").append(listItem).promise().done(function () {                 
        //Your code of function.
    });
}

Answer 2

Use below code, added append code in side for loop.

                     for(var i=0;i<data.contacts.length;i++){ 
                              listItem += '<li><a href="#">' + data.contacts[i].name + '</a></li>'; 

                         $("#dynamicFieldList").append(listItem).promise().done(function () {
                              //refresh list here
                              $(this).listview("refresh");
                              //then add click event using delegation
                              $(this).on("click", "li", function () {

                               var currentItem = $(this).index();
                               alert(currentItem);

                               var newPage = $("<div data-role='page' id='secondpage'><div data-    role=header><a data-iconpos='left'  data-icon='back' href='#' data-role='button' data-rel='back'>Back</a><h1>"+data.contacts[currentItem].name+"</h1></div><div data-role=content>Email: "+ data.contacts[currentItem].email+"</div></div>");

                                // Append the new page into pageContainer
                                newPage.appendTo($.mobile.pageContainer);

                                // Move to this page by ID '#page'
                                $.mobile.changePage('#secondpage');

                                          });
   }