将javascript中的JSON输出为不带jquery的列表
Output JSON in javascript as a list without jquery
我有一个JSON对象:
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"}]}';
我想打印为div语句之间的列表:
- John Doe
- 上午9:15
john_doe@gmail.com
Anna Smith
- 上午9:15
anna@gmail.com
彼得·琼斯
- 上午9:15
- peter@gmail.com
我试图填充的HTML如下所示:
<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>
首先,将字符串转换为对象:
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字符串中的数组:
var employees = JSON.parse(txt).employees
然后创建像这样的HTML元素
var element = document.createElement('div'); // creates an empty div
然后你把HTML树和放在一起
someElement.append(otherElement); // makes otherElement a child of someElement
相关文章:
- 需要Jquery列表筛选帮助
- 如何让li项目在这个jQuery列表中滑动和/或淡出视图
- Jquery列表拖放
- 在PHP循环中动态创建jQuery列表视图
- ajax更新后jQuery列表刷新
- 您能否按字母顺序对从 JSON 文件动态创建的 jQuery 列表进行排序
- 给定两个连接的可排序 JQuery 列表,我怎么知道元素被放在哪个容器上
- 可通过Ajax从回显列表中排序jQuery列表
- jQuery列表中每个产品的基于悬停的弹出事件
- jquery列表项类切换
- 如何动态添加<李>jquery列表中的标记
- Jquery列表内部属性子选择
- 如何使用windows phone 8 c#中的jQuery列表功能
- JQuery列表追加项不可选择
- 当鼠标悬停在HTML/JS/JQUERY列表上时,图像弹出
- 如何从JQuery列表中获取JSON值
- JQuery列表下拉菜单问题
- 组排序JQuery列表元素
- 重置后,jquery列表使用connectWith停止工作
- 按字母顺序排序Jquery列表