如何显示在列表视图我在英特尔XDK JSON数据(how to display json data

2019-11-03 19:58发布

我正在使用英特尔XDK和UI jquerymobile框架开发混合应用程序。 我试图从URL获取JSON数据,并将其显示成列表视图。 我已经得到了来自URL JSON数据,但我不知道如何来显示列表视图的数据

这是我的JSON数据

{

 "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"
             }

           ]

}

这是JSON检索功能

 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(); 
} 

这是在列表视图显示JSON数据我的html代码

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

我想在我的列表视图(动态)显示从JSON称号。 我得到的JSON标题,只是在警告消息显示,但我需要在我的列表视图中显示。 在我的HTML代码,我只是一个创建列表视图静态项目。

我的问题:-

1)如何在我的列表视图显示JSON数据(标题)

2)如果我点击数据项,特别是PDF文件或图像文件应该使用JSON从文件路径下载并在我们的应用程序显示出来(我在我的JSON文件路径)

你能告诉我如何在我的列表视图动态显示JSON数据(标题)

Answer 1:

添加此而不是alert(out.title);

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


Answer 2:

它很容易实现。 假设list是你从服务器获取的对象。 现在,我们只需要处理每个数组项的对象。 使用此代码..

 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) ; 
PS:可能会有一些错误的逗号或类似的东西,但我希望你有这背后的逻辑。



文章来源: how to display json data in my listview in intel xdk