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

I have one big div where it should show the list of JSON objects. Each object should be different DIV element with few details of each object, similarly one behind another.

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

I have a comments in a page, where it's details are stored in JSON object as {author,id,comments,time}, so wanted to get list of all comments in a particular page into one DIV. Each comment should be a child Div's (showing author name, comment and time commented)for a Parent DIV

我在页面中有一个注释,其中的详细信息作为{author,id,comments,time}存储在JSON对象中,因此希望将特定页面中的所有注释列表放入一个DIV中。每个评论应该是父DIV的子Div(显示作者姓名,评论和时间评论)

2 个解决方案

#1

Html Code

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

The problem is finding a DIV big enough to hold the data. Most are just average size DIVs and those won't work for this kind of application. ;)

问题是找到一个足以容纳数据的DIV。大多数只是平均大小的DIV,这些不适用于这种应用。 ;)

The code snippet below downloads Yahoo weather data, converts the key-value pairs to text, and displays them each in a DIV within the BIG DIV.

下面的代码片段下载雅虎天气数据,将键值对转换为文本,并在BIG DIV中的每个DIV中显示它们。

update: Modified slightly for OP's new requirements.

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

Run the code snippet to see it in action:

运行代码段以查看其运行情况:

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

#1