如何在英特尔 xdk 的列表视图中显示 json 数据
Posted
技术标签:
【中文标题】如何在英特尔 xdk 的列表视图中显示 json 数据【英文标题】：how to display json data in my listview in intel xdk 【发布时间】：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 数据（标题）
【问题讨论】：
【参考方案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) ;
【讨论】：
以上是关于如何在英特尔 xdk 的列表视图中显示 json 数据的主要内容，如果未能解决你的问题，请参考以下文章