2017-10-21 86 views
0

我想通過使用下面的代碼在我的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

請寫出更多的細節,你想怎樣在HTML打印出來? –

+0

我猜這裏有一些東西留在了我的問題中......這裏是JS部分打印HTML 中的vaues(var i = 0; i DesignerAshish

+0

你想把它放在桌子上嗎? –

回答

0

我已經改變了所有制結構,我已刪除鍵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 –

0

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>