遍历JSON对象数组并在2列中显示

Question

我在向DOM显示这2个JSON对象时遇到了麻烦。 我是为了：
A）为2个不同的人编写一个JSON对象数组，其中包括几个键/值和
B）遍历对象数组。 创建一个2列的页面，在一侧显示第一人称详细信息，在另一侧显示第二人称详细信息。

我相信我将使用jQuery在浏览器窗口中显示对象，但我不知道如何完成此任务。 因此，在花了很长时间在“ google”上寻找答案并尝试了许多试验和所有错误之后。 我正在向比我了解更多（不难）的人寻求帮助。谢谢。

<!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>

*

Answer 1

您正确创建了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>

遍历JSON对象数组并在2列中显示

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-03-19 19:29:46

遍历JSON对象数组并在2列中显示

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-03-19 19:29:46

解决方案1
0 已采纳 2018-03-19 19:29:46