遍历JSON对象数组，并在2列中显示
遍历JSON对象数组，并在2列中显示
提问于 2018-03-19 19:21:57
我在向DOM显示这2个JSON对象时遇到了问题。我要：
( A)为两个不同的人编写一个JSON对象数组，其中包括几个键/值和
( B)遍历对象数组。创建一个二次页面，显示第一个人详细信息的一面和第二个人的详细信息在对方。
我相信我将使用jQuery将对象显示到浏览器窗口，但我不知道如何完成这一任务。因此，花了很长时间在“谷歌”上寻找答案，并尝试了大量的尝试和所有的错误。我请求那些知道得更多的人提供一些帮助--这并不难--比我更难--谢谢。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Iterate Through JSON Array Object</title>
<!-- Bootstrap -->
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media
queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
</script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6" id="div0">
<h1>Column 1</h1>
</div>
<div class="col-sm-6" id="div1">
<h1>Column 2</h1>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://sabioapi2.azurewebsites.net/scripts/sabio.js"></script>
<!-- All your code goes below here-->
<script type="text/javascript">
myObj = {
"people": [
{
"firstName": "Juana"
, "lastName": "Doe"
, "age": 23
, "streetAddress": "123 Main St."
, "city": "Culver City"
, "state": "CA"
, "zip": 92340
},
{
"firstName": "Juan"
, "lastName": "Doe"
, "age": 47
, "streetAddress": "123 Main St."
, "city": "Culver City"
, "state": "CA"
, "zip": 92340
}
]
}
for (var i = 0; i < myObj.people.length; i++) {
$("#div" + i).append("<h1>" + i + ": " + myObj.people[i] + "</h1>");
//document.getElementById("div" + i).innerHTML += i + ": " +
myObj[i] + "<br>";
//console.log(myObj.people[i]);
}
</script>*
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-03-19 19:29:46
您的json对象创建是正确的，for循环是一个很好的开始，每个键都是person对象的一个属性，所以在您的循环中这样做：
var myObj = {
people: [{
"firstName": "Juana",
"lastName": "Doe",
"age": 23,
"streetAddress": "123 Main St.",
"city": "Culver City",
"state": "CA",
"zip": 92340
},
{
"firstName": "Juan",
"lastName": "Doe",
"age": 47,
"streetAddress": "123 Main St.",
"city": "Culver City",
"state": "CA",
"zip": 92340
}
]
}
for (var i = 0; i < myObj.people.length; i++) {
//Now that you are iterating the people objects, iterate the keys of the object
for (key in myObj.people[i]) {
//Append h1 with key name and its value
$("#example").append("<p><b>" + key + "</b>: " + myObj.people[i][key] + "</p>");
}
$("#example").append("<hr />")
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="example"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49370797
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号