所有这一切的新功能，但程序的开玩笑是json数据动态填充listview，以及当用户点击listview href时，它将它们发送到页面并动态加载该特定页面的内容（文本，图像和任何网址到特定的单独div。关键是使用json数据动态化。请帮忙。
这是我的JavaScript / HTML代码以及JSON数据：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"><link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!--<script type="text/javascript" src="cordova.js"></script>-->
<script>
$(document).on("pagebeforeshow", "#ccc", function() {
$.getJSON('js.json', function(data) {
var output = "";
var newpage = "";
for(var i in data.mydata) {
output += "<li>" +
"<a href=\"#page" + data.mydata[i].myId + "\">" +
"<h3>" + data.mydata[i].thename + "</h3>" +
"<p>" + data.mydata[i].description + "</p>" + "</a>" +
"</li>";
if ($("#page" + data.mydata[i].myId).length == 0 && (data.mydata[i].myId == 0)) {
newpage += "<div data-role=\"page\" id=\"page" + data.mydata[i].myId + "\">";
newpage += "<div data-role=\"header\">" + "<a data-role=\"button\" data-rel=\"back\" data-icon=\"back\">Back</a>" + "<h3>" + data.mydata[i].thename + "</h3></div>";
newpage += "<div role=\"main\" class=\"ui-content\">" + "<h1 >What type of Nursing is right for you?</h1>" +"</div>";
//how to grab nested objects with for loop such as link
// for loop that grabs myId AS WELL AS LINKid/textid/pictureID and displays
newpage += "<div data-role=\"footer\">" + "<h1>0Future Nurses</h1>"+ "<p class= \"center\">Telephone: <br/>" +
+"</div>"+"</div>";
}
output += "";
newpage += "";
$('body').append(newpage);
$("#mylist").html(output).listview('refresh');
};
});
});
</script>
</head>
<body>
<div data-role="page" id="ccc">
<div data-role= "header">
<h1>Future Nursings</h1>
<h2 class = "center">Action Coalition</h2>
<div role="main" class="ui-content">
<ul id="mylist" data-role="listview" data-inset="true">
</ul>
</div>
</div>
<div data-role="footer" >
<h1>Future Nurses</h1>
<p class= "center">Telephone: <br/>
Email: </p>
<h1>Get Social with us!</h1>
<div class = "centerButton">
<a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-btn-inline">Facebook</a></button><br/>
<a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-btn-inline">Twitter</a></button><br/>
<a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-btn-inline">Indeed</a></button><br/>
<a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-btn-inline">Join Us</a></button><br/>
</div>
</div>
</div>
<div data-role="page" id="ccc">
<div data-role= "header">
<h1>Future Nurses</h1>
<h2 class = "center">Action Coalition</h2>
<div role="main" class="ui-content">
<ul id="mylist" data-role="listview" data-inset="true">
</ul>
</div>
</div>
<div data-role="footer" >
<h1>Future Nurses </h1>
<p class= "center">Telephone: <br/>
Email: </p>
<h1>Get Social with us!</h1>
<div class = "centerButton">
<a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-btn-inline">Facebook</a></button><br/>
<a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-btn-inline">Twitter</a></button><br/>
<a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-btn-inline">Indeed</a></button><br/>
<a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-btn-inline">Join Us</a></button><br/>
</div>
</div>
</div>
</body>
</html>
{
"mydata": [
{
"myId": "0",
"thename": "Is Nursing for You?",
"description": "This is the zero description",
"links":[
"google.com",
"yahoo.com",
"worldstarhiphop.com"
],
"text": [
"random text 0000",
"random text 0000",
"random text 0000"
],
"imgPath": [
"image/0000.png",
"image/0001.png",
"image/0002.png"
],
"article" : [
{
"text": "random article 0",
"img" : "image/0000.png"
},
{
"text": "random article 0",
"img" : "image/0000.png"
}
]
}, {
"myId": "1",
"thename": "Nursing Schools",
"description": "This is the one description",
"links":[
"nordstrom.com",
"google.com",
"aol.com"
],
"text": [
"random text 0001"
],
"imgPath": [
"image/0100.png",
"image/0101.png",
"image/0102.png"
],
"article" : [
{
"text": "random article 0001",
"img" : "image/0001.png"
}
]
}
]
}
答案 0 :(得分：1)
我认为您的错误可能是因为您的json格式不正确，最后错过了一个。它应该像这样结束：
{
"image": "image/2.png"
}
]
}
]
};
为了访问深层元素，您可以使用此方法（更改要查找的元素的链接字符串：
for (var element of data.mydata) {
console.log(element.myId);
var linkElements = element.link.filter(linkObject => {
return linkObject["link"];
});
for (var linkElement of linkElements) {
console.log(linkElement["link"]);
}
}
这将是此代码的输出：
0
google.com
yahoo.com
worldstarhiphop.com
1
google.com
yahoo.com
worldstarhiphop.com
答案 1 :(得分：0)
看看这是否有帮助
$.getJSON('js.json', function(data) {
var output = [],
newpage = [];
for(var i in data.mydata) {
output.push('<li>');
output.push('<a href="#page' + data.mydata[i].myId + '">');
output.push('<h3>' + data.mydata[i].thename + '</h3>');
output.push('<p>' + data.mydata[i].description + '</p>');
output.push('</a>');
output.push('</li>');
if ($('#page' + data.mydata[i].myId).length === 0 && (data.mydata[i].myId === 0)) {
newpage.push('<div data-role="page" id="page' + data.mydata[i].myId + '">');
newpage.push('<div data-role="header">');
newpage.push('<a data-role="button" data-rel="back" data-icon="back">Back</a>');
newpage.push('<h3>' + data.mydata[i].thename + '</h3>');
newpage.push('</div>');
newpage.push('<div role="main" class="ui-content">');
newpage.push('<h1 >What type of Nursing is right for you?</h1>');
newpage.push('</div>');
if (data.mydata[i].link.length) {
for(var e in data.mydata[i].link) {
console.log(data.mydata[i].link[e]);
// Do stuff here i guess
}
}
newpage.push('<div data-role="footer">');
newpage.push('<h1>0Future Nurses</h1>');
newpage.push('<p class="center">Telephone:<br/></p>');
newpage.push('</div>');
}
}
$('body').append(output.join(''));
$('#mylist').html(output.join('')).listview('refresh');
};
同样@david提到，你的json对象出了问题，它错过了第一个数组对象的末尾[mydata]
{
"mydata": [
{
"myId": "0",
"thename": "Is Nursing for You?",
"description": "This is the zero description",
"link": [
{
"linkId": "0"
},
{
"link": "google.com"
},
{
"linkId": "1"
},
{
"link": "yahoo.com"
},
{
"linkId": "2"
},
{
"link": "worldstarhiphop.com"
}
],
"text": [
{
"textId": "0"
},
{
"text": "CareerTracks, this is the 1st"
},
{
"textId": "1"
},
{
"text": "this is the 2nd"
},
{
"textId": "2"
},
{
"textId": "1"
},
{
"text": "CareerTracks this is the 3rd"
}
],
"imgPath": [
{
"imageId": "0"
},
{
"image": "image/0.png"
},
{
"imageId": "1"
},
{
"image": "image/1.png"
},
{
"imageId": "2"
},
{
"image": "image/2.png"
}
]
},
{
"myId": "1",
"thename": "Nursing Schools",
"description": "This is the second description",
"link": [
{
"linkId": "0"
},
{
"link": "google.com"
},
{
"linkId": "1"
},
{
"link": "yahoo.com"
},
{
"linkId": "2"
},
{
"link": "worldstarhiphop.com"
}
],
"text": [
{
"textId": "0"
},
{
"text": "CareerTracks, this is the 1st"
},
{
"textId": "1"
},
{
"text": "this is the 2nd"
},
{
"textId": "2"
},
{
"textId": "1"
},
{
"text": "CareerTracks this is the 3rd"
}
],
"imgPath": [
{
"imageId": "0"
},
{
"image": "image/0.png"
},
{
"imageId": "1"
},
{
"image": "image/1.png"
},
{
"imageId": "2"
},
{
"image": "image/2.png"
}
]
}
]
}