使用 JSON 对象为使用 JavaScript 填充到 JSON 中的每个对象创建一个 div答案

【问题标题】：Using JSON objects create a div for every object that's getting populated in JSON using JavaScript使用 JSON 对象为使用 JavaScript 填充到 JSON 中的每个对象创建一个 div
【发布时间】：2015-07-18 15:34:50
【问题描述】：

我有一个大 div，它应该显示 JSON 对象的列表。每个对象应该是不同的 DIV 元素，每个对象的细节很少，类似地一个接一个。

我在页面中有一个 cmets，它的详细信息以 {author,id,cmets,time} 的形式存储在 JSON 对象中，因此希望将特定页面中所有 cmets 的列表放入一个 DIV 中。每个评论都应该是父 DIV 的子 Div（显示作者姓名、评论和评论时间）

【问题讨论】：

你试过什么？你有什么？给我们一些东西。做点什么。
编写一个循环，为 JSON 对象数组中的每个元素添加一个子 DIV。
既然你给了我们这样一个模棱两可的问题，这里有一个模棱两可的答案：你绝对应该做某事
我在一个页面中有一个 cmets，它的详细信息以 {author,id,cmets,time} 的形式存储在 Json 对象中，所以想在一个地方列出特定页面中的所有 cmets .每条评论都应显示为一个单独的 div，显示作者姓名、评论和评论时间。

标签： javascript json

【解决方案1】：

HTML 代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <!--<script src="app1.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>

</head>

<body> 
  <div id="placeholder1"></div>
  <div id="placeholder2"></div>
  <script>
    var data={
      "firstName":"Ray",
      "lastName":"Villalobos",
      "joined":2012
    };

    var data1={
      "firstName":"John",
      "lastName":"Doe",
      "joined":2013
    };
    document.getElementById("placeholder1").innerHTML=data.firstName+" "+data.lastName+" "+data.joined;
    document.getElementById("placeholder2").innerHTML=data1.firstName+" "+data1.lastName+" "+data1.joined;
  </script>

</body>
</html>

【讨论】：

希望对您有所帮助

【解决方案2】：

问题是找到一个足够大的 DIV 来保存数据。大多数只是平均大小的 DIV，它们不适用于这种应用程序。 ;)

下面的代码 sn-p 下载 Yahoo 天气数据，将键值对转换为文本，并将它们分别显示在 BIG DIV 内的 DIV 中。

更新：针对 OP 的新要求稍作修改。

运行代码 sn-p 以查看它的实际效果：

<html>
<body>
 <link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'> 
<style type="text/css">
	div {padding: 4px;border: 1px red dotted;font-family: monospace;font-size: 10px;}
    h2 {font-family: 'Permanent Marker', cursive; font-size:24px; color:steelblue;}
</style>
<h2>A REALLY SUPER BIG DIV WITH DATA</h2>
<div id="BIG_DIV"></div>
<script type="text/javascript">

function callback(data) {
	document.getElementById('BIG_DIV').innerHTML = getKeys( data );
}

function getKeys( obj ) {
	var key, html='';
	for( key in obj) {
		if (typeof obj[key] == 'object') html += '<div>' + getKeys( obj[key] ) + '</div>';
			else html += '<div>' + key + ':' + obj[key] + '</div>';
	}	
	return html;
}

</script>
<!-- Yahoo Weather data -->
<script type="text/javascript" src='https://query.yahooapis.com/v1/public/yql?q=select * from weather.forecast where woeid in (select woeid from geo.places(1) where text="Paris")&format=json&callback=callback'></script>
</body>
</html>

【讨论】：