how to display json data in my listview in intel xdk

问题

i am developing hybrid application by using intel xdk and jquerymobile framework for UI. i am trying to get json data from url and display it into listview. i already got json data from url but i don't know how to display those data in listview

This is my json data

{

 "nl_wu":[
           {
              "id":"42",
              "year":"2015",
              "month":"jan",
              "title":"newsletter",
               "file":"http://school.com/sample.pdf"
            },

            {
               "id":"39",
               "year":"2015",
               "month":"jan",
               "title":"imagetest",
               "file":"http://school.com/sampleimage.jpg"
             }

           ]

}

This is json retrieving function

 function showsmsmessage(){
            var i;
            var out ="";
             var json;
            var arr ;
             var xhr = new XMLHttpRequest();
             xhr.open("GET", "URL", false);
             xhr.onload = function(){
           if(xhr.status == 200)
            {
                var json_string = xhr.responseText;
                json = eval ("(" + json_string + ")");
                var s = JSON.stringify(json);
                arr = $.parseJSON(s);
                for(i=0;i<arr.nl_wu.length;i++)
                {
                     out = arr.nl_wu[i];
                     alert(out.title);
                }

             }
          else if(xhr.status == 404)
           {
             intel.xdk.notification.alert("Web Service Doesn't Exist", "Error");
           }
         else
          {
           intel.xdk.notification.alert("Unknown error occured while connecting to server", "Error");
          }
     }
       xhr.send(); 
}

this is my html code for displaying json data in listview

 <body>
   <div data-role="listview" id="result">
        <ul data-role="listview" data-autodividers="false">
           <li><a href="#">Adele</a></li>
       </ul>
   </div>
 </body>

i want to display title from json in my listview (dynamically). i am getting title from json and just display it in alert message but i need to display in my listview. In my html code i just create one listview with static item.

My Question:-

1) how to display json data(title) in my listview

2) if i click the data item, particular pdf file or image file should download by using file path from json and display it in our app (i have file path in my json)

could you please tell me how to display json data(title) in my listview dynamically

回答1:

add this instead of alert(out.title);

$("#result ul").append('<li><a href="#">'+out.title+'</a></li>');

回答2:

Its very easy to implement. Suppose list is the object which you are getting from the server. Now we just need to process the object for each array item. use this code..


    var html = '' ;
    $.each(list.nl_wu, function(index, item){
        html = "<li>" ;
        html += "<a href='"+item.file+"'>"+item.title+"</a>" ;
        html += "</li>" ;
    }) ;
    $("#result ul").html(html) ;

P.S. : There may be some comma mistake or something like that but i hope you got the logic behind this.

来源：https://stackoverflow.com/questions/30190123/how-to-display-json-data-in-my-listview-in-intel-xdk

标签

json

intel-xdk

jquery-mobile-listview