在HTML中迭代JSON数组
问题描述：
我想通过使用下面的代码在我的HTML中打印此JSON。我有点困惑。 JSON中有嵌套的对象和数组项。有关该问题的更多信息，您可以查看附加的JSon数据和ajax调用片段。 基本上我试图从包含多本书和教程的json数据中制作一个书籍/教程循环。在HTML中迭代JSON数组
如果json结构错误或者可以编写更好的json结构，请提出正确/更好的结构。
请提前HELP
感谢。
{
"main_heading":"Best Firebase Tutorials & Books",
"sub_heading":"Firebase is a Backend-as-a-Service platform that allows you to develop mobile and web application first introduced in 2011. It was acquired by Google in 2014. Here’s a list of some of the best Firebase books, courses, videos and tutorials to help you learn Firebase in 2017.",
"tutorials":[
{
"0":{
"title":"Starting with Firebase",
"description":"Starting with Firebase by Stone River eLearning will teach you how to code a Firebase application.",
"img_URL":"http://img.cloudimages.us/2012/06/02/computer.jpg",
"link_URL":"#"
},
"1":{
"title":"Angular and Firebase – Build a Web App with Typescript",
"description":"Angular and Firebase – Build a Web App with Typescript by Angular University will teach you to build full-stack applications using Angular and Firebase.",
"img_URL":"http://img.cloudimages.us/2012/06/02/computer.jpg",
"link_URL":"#"
},
"2":{
"title":"Angular 4 and Firebase 3: Create a Instagram-like portal",
"description":"Angular 4 and Firebase 3: Create a Instagram-like portal by Essential Courses will teach you how to code and deploy a complete front-end single page application built using Angular 4 and Firebase 3.",
"img_URL":"https://udemy-images.udemy.com/course/480x270/1283576_e198_3.jpg",
"link_URL":"#"
},
"3":{
"title":"Create a Basic Real-Time Chat App with Angular4 and Firebase",
"description":"Create a Basic Real-Time Chat App with Angular4 and Firebase by Bluelime Learning Solutions will teach you Angular4 and Firebase by creating a real-time chat app from scratch.",
"img_URL":"https://udemy-images.udemy.com/course/480x270/1309766_9048_3.jpg",
"link_URL":"#"
}
}
],
"books":[
{
"0":{
"title":"Firebase Essentials",
"description":"Firebase Essentials – Android Edition by Neil Smyth will teach everything you need to successfully integrate Firebase cloud features into your Android apps.",
"img_URL":"https://reactdom.com/wp-content/uploads/2017/10/51ECBwTcOUL.SL160.jpg",
"link_URL":"#"
},
"1":{
"title":"Firebase Jumpstart",
"description":"Firebase Jumpstart by Angular University is aimed at developers that want to get a practical understanding of the Firebase Realtime Database.",
"img_URL":"https://reactdom.com/wp-content/uploads/2017/10/51zkVSwu7uL.SL160.jpg",
"link_URL":"#"
},
"2":{
"title":"Build Mobile Apps with Ionic 2 and Firebase: Hybrid Mobile App Development",
"description":"Build Mobile Apps with Ionic 2 and Firebase: Hybrid Mobile App Development by Fu Cheng will teach you to build hybrid mobile apps using Ionic and Firebase.",
"img_URL":"https://reactdom.com/wp-content/uploads/2017/10/41atb3tZPiL.SL160.jpg",
"link_URL":"#"
}
}
]
}
答
我已经改变了所有制结构，我已删除键0,1,2,3和"tutorials" array and books array直接object {}看到这个例子中，如果不是你想告诉我，我会尽量没有帮助你得到溶液
var result={
"main_heading":"Best Firebase Tutorials & Books",
"sub_heading":"Firebase is a Backend-as-a-Service platform that allows you to develop mobile and web application first introduced in 2011. It was acquired by Google in 2014. Here’s a list of some of the best Firebase books, courses, videos and tutorials to help you learn Firebase in 2017.",
"tutorials":[
{
"title":"Starting with Firebase",
"description":"Starting with Firebase by Stone River eLearning will teach you how to code a Firebase application.",
"img_URL":"http://img.cloudimages.us/2012/06/02/computer.jpg",
"link_URL":"#"
},
{
"title":"Angular and Firebase – Build a Web App with Typescript",
"description":"Angular and Firebase – Build a Web App with Typescript by Angular University will teach you to build full-stack applications using Angular and Firebase.",
"img_URL":"http://img.cloudimages.us/2012/06/02/computer.jpg",
"link_URL":"#"
},
{
"title":"Angular 4 and Firebase 3: Create a Instagram-like portal",
"description":"Angular 4 and Firebase 3: Create a Instagram-like portal by Essential Courses will teach you how to code and deploy a complete front-end single page application built using Angular 4 and Firebase 3.",
"img_URL":"https://udemy-images.udemy.com/course/480x270/1283576_e198_3.jpg",
"link_URL":"#"
},
{
"title":"Create a Basic Real-Time Chat App with Angular4 and Firebase",
"description":"Create a Basic Real-Time Chat App with Angular4 and Firebase by Bluelime Learning Solutions will teach you Angular4 and Firebase by creating a real-time chat app from scratch.",
"img_URL":"https://udemy-images.udemy.com/course/480x270/1309766_9048_3.jpg",
"link_URL":"#"
}
],
"books":[
{
"title":"Firebase Essentials",
"description":"Firebase Essentials – Android Edition by Neil Smyth will teach everything you need to successfully integrate Firebase cloud features into your Android apps.",
"img_URL":"https://reactdom.com/wp-content/uploads/2017/10/51ECBwTcOUL.SL160.jpg",
"link_URL":"#"
},
{
"title":"Firebase Jumpstart",
"description":"Firebase Jumpstart by Angular University is aimed at developers that want to get a practical understanding of the Firebase Realtime Database.",
"img_URL":"https://reactdom.com/wp-content/uploads/2017/10/51zkVSwu7uL.SL160.jpg",
"link_URL":"#"
},
{
"title":"Build Mobile Apps with Ionic 2 and Firebase: Hybrid Mobile App Development",
"description":"Build Mobile Apps with Ionic 2 and Firebase: Hybrid Mobile App Development by Fu Cheng will teach you to build hybrid mobile apps using Ionic and Firebase.",
"img_URL":"https://reactdom.com/wp-content/uploads/2017/10/41atb3tZPiL.SL160.jpg",
"link_URL":"#"
}
]
};
for(var i in result.tutorials) {
var tutorial = result.tutorials[i];
$('div').append('<h3>'+tutorial.title+'</h3>')
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>+0
它会这样工作吗？ （var i在result.books中）{ var tutorial = result.books [i]; } – DesignerAshish
+0
是的，如果你拿我编辑的对象。 –
+0
in'var tutorial = result.books [i]'change'tutorial'to'''in your comment –
答
var my_json={
"main_heading":"Best Firebase Tutorials & Books",
"sub_heading":"Firebase is a Backend-as-a-Service platform that allows you to develop mobile and web application first introduced in 2011. It was acquired by Google in 2014. Here’s a list of some of the best Firebase books, courses, videos and tutorials to help you learn Firebase in 2017.",
"tutorials":[
{
"0":{
"title":"Starting with Firebase",
"description":"Starting with Firebase by Stone River eLearning will teach you how to code a Firebase application.",
"img_URL":"http://img.cloudimages.us/2012/06/02/computer.jpg",
"link_URL":"#"
},
"1":{
"title":"Angular and Firebase – Build a Web App with Typescript",
"description":"Angular and Firebase – Build a Web App with Typescript by Angular University will teach you to build full-stack applications using Angular and Firebase.",
"img_URL":"http://img.cloudimages.us/2012/06/02/computer.jpg",
"link_URL":"#"
},
"2":{
"title":"Angular 4 and Firebase 3: Create a Instagram-like portal",
"description":"Angular 4 and Firebase 3: Create a Instagram-like portal by Essential Courses will teach you how to code and deploy a complete front-end single page application built using Angular 4 and Firebase 3.",
"img_URL":"https://udemy-images.udemy.com/course/480x270/1283576_e198_3.jpg",
"link_URL":"#"
},
"3":{
"title":"Create a Basic Real-Time Chat App with Angular4 and Firebase",
"description":"Create a Basic Real-Time Chat App with Angular4 and Firebase by Bluelime Learning Solutions will teach you Angular4 and Firebase by creating a real-time chat app from scratch.",
"img_URL":"https://udemy-images.udemy.com/course/480x270/1309766_9048_3.jpg",
"link_URL":"#"
}
}
],
"books":[
{
"0":{
"title":"Firebase Essentials",
"description":"Firebase Essentials – Android Edition by Neil Smyth will teach everything you need to successfully integrate Firebase cloud features into your Android apps.",
"img_URL":"https://reactdom.com/wp-content/uploads/2017/10/51ECBwTcOUL.SL160.jpg",
"link_URL":"#"
},
"1":{
"title":"Firebase Jumpstart",
"description":"Firebase Jumpstart by Angular University is aimed at developers that want to get a practical understanding of the Firebase Realtime Database.",
"img_URL":"https://reactdom.com/wp-content/uploads/2017/10/51zkVSwu7uL.SL160.jpg",
"link_URL":"#"
},
"2":{
"title":"Build Mobile Apps with Ionic 2 and Firebase: Hybrid Mobile App Development",
"description":"Build Mobile Apps with Ionic 2 and Firebase: Hybrid Mobile App Development by Fu Cheng will teach you to build hybrid mobile apps using Ionic and Firebase.",
"img_URL":"https://reactdom.com/wp-content/uploads/2017/10/41atb3tZPiL.SL160.jpg",
"link_URL":"#"
}
}
]
};
function json_to_html(_json){
\t if(_json.main_heading){
\t document.title = _json.main_heading;
\t }
\t if(_json.sub_heading){
$('body').append('<h2>'+_json.sub_heading+'</h2>');
\t }
\t if(_json.tutorials){
\t \t $('body').append('<h3>Tutorals</h3><div class="cls_for_tutorials" style="display: flex;" ></div>');
\t \t var tutorials=_json.tutorials[0];
\t \t for(var key in tutorials){
\t \t \t var cur_tut='';
\t \t \t cur_tut+='<label class="book" onClick="location.htef=\''+tutorials[key].link_URL+'\'">';
\t \t \t cur_tut+='<label class="title">'+tutorials[key].title+'</label>';
\t \t \t cur_tut+='<label class="img"><img width="175" height="150" src="'+tutorials[key].img_URL+'" border="0"></label>';
\t \t \t cur_tut+='<label class="desc">'+tutorials[key].description+'</label>';
\t \t \t cur_tut+='</label>';
\t \t \t $('.cls_for_tutorials').append(cur_tut);
\t \t }
\t }
\t if(_json.books){
\t var books=_json.books[0];
\t $('body').append('<h3>Books</h3><div class="cls_for_books" style="display: flex;" ></div>')
\t \t for(var key in books){
\t \t \t var cur_books='';
\t \t \t cur_books+='<label class="book" onClick="location.htef=\''+books[key].link_URL+'\'">';
\t \t \t cur_books+='<label class="title">'+books[key].title+'</label>';
\t \t \t cur_books+='<label class="img"><img width="175" height="150" src="'+books[key].img_URL+'" border="0"></label>';
\t \t \t cur_books+='<label class="desc">'+books[key].description+'</label>';
\t \t \t cur_books+='</label>';
\t \t \t $('.cls_for_books').append(cur_books);
\t \t }
\t }
}
json_to_html(my_json); .book{
\t display:inline-block;
\t border-style:solid;
\t border-color:gray;
\t border-radius:4px;
\t border-width:2px;
\t width:200px;
\t height:500px;
\t margin:10px;
\t cursor:pointer;
}
.title{
\t display:block;
\t height:100px;
\t margin:10px;
\t font-weight:bold;
\t cursor:pointer;
}
.img{
\t display:block;
\t height:150px;
\t width:175px;
\t margin:10px;
\t cursor:pointer;
}
.desc{
\t display:block;
\t height:200px;
\t margin:10px;
\t cursor:pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
请写出更多的细节，你想怎样在HTML打印出来？ –
我猜这里有一些东西留在了我的问题中......这里是JS部分打印HTML 中的vaues（var i = 0; i
DesignerAshish
你想把它放在桌子上吗？ –