在javascript中将JSON输出为不带jquery的列表
var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe","time":"9:15am","email":"john_doe@gmail.com" },' +
'{"firstName":"Anna","lastName":"Smith","time":"9:15am","email":"anna@gmail.com" },' +
'{"firstName":"Peter","lastName":"Jones" ,"time":"9:15am","email":"peter@gmail.com"}]}';
>
john_doe@gmail.com
安娜·史密斯
@gmail.com
<div class="info">
<ul>
<li id="name"></li>
<li id="time"></li>
<li id="email"></li>
</ul>
</div>
<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<div id="output">
</div>
<script type="text/javascript">
var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe","time":"9:15am","email":"john_doe@gmail.com" },' +
'{"firstName":"Anna","lastName":"Smith","time":"9:15am","email":"anna@gmail.com" },' +
'{"firstName":"Peter","lastName":"Jones" ,"time":"9:15am","email":"peter@gmail.com"}]}';
var employees=JSON.parse(txt).employees;
var container=document.getElementById("output");
for (i=0;i<employees.length;i++) { //Loops for the length of the list
var info=document.createElement('div');
info.className='info'; //Creates a new <div> element and adds the class info to it
var ul=document.createElement('div'); //Creates <ul> element
info.appendChild(ul); //Adds the <ul> to the newly created <div>
var name=document.createElement('li');
name.className='name'; //Should use class, not id, as ID must be unique
name.innerHTML=employees[i].firstName+' '+employees[i].lastName; //Adds name
ul.appendChild(name);
var time=document.createElement('li');
time.className='time';
time.innerHTML=employees[i].time;
ul.appendChild(time);
var email=document.createElement('li');
email.className='email';
email.innerHTML=employees[i].email;
ul.appendChild(email);
container.appendChild(info); //Adds the final generated HTML to the page
} //Will repeat for each item in list.
</script>
</body>
</html>
共有1个答案
首先，将字符串转换为对象：
var employees=JSON.parse(txt).employees;
然后，设置一个循环来构造HTML
var container=//Link to the containing element using getElementById or similar
for (i=0;i<employees.length;i++) { //Loops for the length of the list
var info=document.createElement('div');
info.className='info'; //Creates a new <div> element and adds the class info to it
var ul=document.createElement('div'); //Creates <ul> element
info.appendChild(ul); //Adds the <ul> to the newly created <div>
var name1=document.createElement('li'); //Chrome seems not to like the variable "name" in this instance
name1.className='name'; //Should use class, not id, as ID must be unique
name1.innerHTML=employees[i].firstName+' '+employees[i].lastName; //Adds name
ul.appendChild(name1);
var time=document.createElement('li');
time.className='time';
time.innerHTML=employees[i].time;
ul.appendChild(time);
var email=document.createElement('li');
email.className='email';
email.innerHTML=employees[i].email;
ul.appendChild(email);
container.appendChild(info); //Displays the elements on the page
} //Will repeat for each item in list.
这也可以使用container.innerhtml来实现，但是构造这样的元素会混淆DOM，因此通常只建议用于文本节点，不过理想情况下还是使用document.createtextnode()。
-
问题内容： 我需要将一个对象序列化为JSON。我正在使用jQuery。有没有“标准”的方式来做到这一点？ 我的具体情况：我有一个定义如下的数组： 我需要将其转换为字符串以像这样传递： 问题答案： JSON-js -JavaScript中的JSON。 要将对象转换为字符串，请使用： 要将JSON字符串转换为对象，请使用： John Resig最近推荐了它： …请开始将使用JSON的应用程序迁移到Cr
-
问题内容： 我想序列化我的查询集，并希望它以该视图输出的格式： 我只是不知道如何输出查询集而不是示例中的手动数据。 我试过了 和 但它行不通。我究竟做错了什么？我需要制作自定义JSON编码器吗？ 问题答案： 您可以将JsonResponse与values一起使用。简单的例子： 或Django内置序列化器的另一种方法： 在这种情况下，结果会略有不同（默认情况下没有缩进）： 我不得不说，使用像棉花糖之
-
问题内容： 这个问题已经在这里有了答案 ： 将对象序列化为JSON （3个答案） 3年前关闭。 我需要将一个对象序列化为JSON。我正在使用jQuery。有没有“标准”的方式来做到这一点？ 我的具体情况：我有一个定义如下的数组： 我需要将其转换为字符串以像这样传递： 问题答案： JSON-js -JavaScript中的JSON。 要将对象转换为字符串，请使用： 要将JSON字符串转换为对象，请使
-
问题内容： 有没有办法在Golang中将XML（[] byte）转换为JSON输出？ 我有下面的功能在哪里，但我想经过一些操作后将此XML响应转换为JSON。我已经尝试过打包但没有成功： 我也在使用Go-restful软件包 问题答案： 如果需要使用未知结构将XML文档转换为JSON，则可以使用goxml2json。 范例： 注意：我是该库的作者。
-
问题内容： 我想将此yaml字符串转换为json，因为源数据是动态的，所以我无法将其映射到结构： 然后我想再次将该接口转换为json字符串： 但是发生错误： 问题答案： 前言： 我优化并改进了以下解决方案，并将其作为库发布在这里：。以下功能可作为。 问题在于，如果您使用最通用的类型来解组，则包用于解组键- 值对的默认类型将是。 第一个想法是使用： 但是，如果yaml配置的深度大于一，则此尝试将失败
-
本文向大家介绍将JavaScript的jQuery库中表单转化为JSON对象的方法，包括了将JavaScript的jQuery库中表单转化为JSON对象的方法的使用技巧和注意事项，需要的朋友参考一下 大家知道Jquery中有serialize方法，可以将表单序列化为一个“&”连接的字符串，但却没有提供序列化为Json的方法。不过，我们可以写一个插件实现。 我在网上看到有人用替换的方法，先用se