如何在英特尔 xdk 的列表视图中显示 json 数据答案

【问题标题】：how to display json data in my listview in intel xdk如何在英特尔 xdk 的列表视图中显示 json 数据
【发布时间】：2015-07-23 06:47:15
【问题描述】：

我正在使用英特尔 xdk 和 jquerymobile UI 框架开发混合应用程序。我正在尝试从 url 获取 json 数据并将其显示到 listview 中。我已经从 url 获得了 json 数据，但我不知道如何在 listview 中显示这些数据

这是我的 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 数据（标题）

【问题讨论】：

标签： json intel-xdk jquery-mobile-listview

【解决方案1】：

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

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

【讨论】：

【解决方案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) ;

附言：可能有一些逗号错误或类似的东西，但我希望你明白这背后的逻辑。

【讨论】：