使用jquery將json對象嵌套到html使用jquery

Question

我一直在使用這一段時間，我似乎無法弄清楚 我發佈了一個問題，它有幾個很好的答案我目前正在使用代碼第二個答案（你應該閱讀我的第一篇文章，以瞭解在那裏我來自）parsing nested JSON String objects with JQuery/PHP?

因此基於代碼的用戶：

它的工作完美無用代碼，但問題是該數據包括在同一個頁面文件中，並且只是一次專輯...我需要將json從

http://www.ggcc.tv/json2php/posts.php

，並有主索引頁ggcc.tv/json2php/index.html列出所有從post.php中

相冊和內容

請大家幫忙，並使用完整的代碼（因爲我是新來的json/PHP/jquery的等...被使用

代碼從用戶建議：無用代碼

所以基本上我需要的代碼（如從用戶建議：無用代碼）提取數據/從http://www.ggcc.tv/json2php/posts.php每張專輯和列出每張專輯及其曲目

請仔細閱讀本帖我原來的職位，並在這裏留下您的回答，謝謝

Answer 1

試試這個：

<script type="text/javascript"> 
    $(document).ready(function() { 
    var url="/json2php/posts.php"; 
    $.getJSON(url,function(data){ 
     $.each(data.posts,function(i,post) { 
     var content, 
     trackInfo = '', 
     tracks = post.tracks; 

     // loop over the tracks and collect info 
     $.each(tracks, function (i) { 
      trackInfo += '<a href="' + tracks[i].url + '">' + tracks[i].name + '</a> '; 
     }); 

     content = '<div class="post">'+ 
     '<h1>'+post.album+'</h1>'+ 
     '<p><img src="'+post.artwork+'"width="250"></img></p>'+ 
     '<p><strong>'+post.church+'</strong></p>'+ 
     '<p>Description: <strong>'+post.des+'</strong></p>'+ 
     '<p>Base url: <em>'+post.baseurl+'</em></p>'+ 
     '<p>Tracks: <li>'+ trackInfo +'</li></p>'; 
     '<hr>'+ 
     '</div>' 

     $("#content").append(content); 
     }); 
    }); 
    }); 
</script> 

而且，是你要連接在同一個域的posts.php作爲這個列表頁面？我認爲它是，但如果它不是，那麼你應該知道，瀏覽器將阻止跨域通信，但服務器不會，所以你可以通過在webroot/json2php/posts.php創建一個文件來解決這個問題，具體如下：

<?php 
    echo file_get_contents('http://www.ggcc.tv/json2php/posts.php'); 
?> 

Answer 2

保持從嘗試自行解析JSON路程。使用專門的JSON轉換爲HTML像json2html一個jQuery模板引擎。

下面是一個完整的代碼示例（可以減去一些您想要顯示的專輯細節，應該很容易添加剩下的內容），它會接受您的專輯之一併呈現曲目列表。

注意嵌套軌道使用子調用json2html

{tag:'div',children:function(obj){return($.json2html(obj.tracks,track_transform));}} 

它使用變換「track_transform」軌道呈現到的鏈接呈現。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://json2html.com/js/jquery.json2html-2.3-min.js"></script> 

<div id='list'></div> 

<script> 

//JSON that you wanted to render from your earlier post 
var json = 
[{ 
"id":"All Things Are Possible", 
"key":"All Things Are Possible", 
"doc":"All Things Are Possible", 
"album":"All Things Are Possible", 
"artwork":"http://godsgypsychristianchurch.net/music_artwork/DEFAULT_COVER2.png", 
"baseurl":"http://www.godsgypsychristianchurch.net/music", 
"church":"Atlanta GA", 
"des":"All Things Are Possible from the Atlanta GA Church, Pastor Nick White", 
"tracks":[ 
    {"name":"1 Intro", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/01%20Intro.mp3"}, 

      {"name":"2 Wo si O Drom", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/02%20Wo%20si%20O%20drom.mp3"}, 

      {"name":"3 Nas Murrgo Shov", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/03%20Nas%20murrgo%20shov.mp3"}, 

      {"name":"4 To Cho Vos", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/04%20To%20cho%20vos.mp3"}, 

      {"name":"5 Tu Son Kai Sastridas", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/05%20Tu%20son%20kai%20sastridas.mp3"}, 

      {"name":"6 Now I Am Strong", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/06%20Now%20I%20am%20strong.mp3"}, 

      {"name":"7 Sorr Nevee", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/07%20Zorr%20nevee.mp3"}, 

      {"name":"8 Preaching", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/08%20Preaching.mp3"}, 

      {"name":"9 Arkadyan Amey", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/09%20Arkadyan%20amey.mp3"}, 

      {"name":"10 O Christo Ka Wudarr", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/10%20O%20Christo%20ka%20wudarr.mp3"}, 

      {"name":"11 Eloi, Eloi", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/11%20Eloi%2C%20Eloi.mp3"}, 

      {"name":"12 Amadow Dell", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/12%20Amadow%20Dell.mp3"}, 

      {"name":"13 Sastiar Amey Devla", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/13%20Sastiar%20amey%20Devla.mp3"}, 

      {"name":"14 Tu Skepeese", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/14%20Tu%20skepeese.mp3"}, 

      {"name":"15 Dov Ma Godgee", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/15%20Dov%20ma%20godgee.mp3"}, 

      {"name":"16 The Lord is my strength", 
     "url":"/Atlanta%20GA/All%20things%20are%20possible/16%20The%20Lors%20is%20my%20strength.mp3"} 
    ] 

      }]; 

//Transform used to create a link for the track 
var track_transform = {tag:'a',html:'.name',href:'.url'}; 

//Transform used to create an album 
var album_transform = 
    {tag:'div',class:'post',children:[ 
     {tag:'h1',html:'.album'}, 
     {tag:'img',src:'.artwork'}, 
     {tag:'p',children:[ 
      {tag:'span',html:'Tracks: '}, 
      {tag:'div',children:function(obj){return($.json2html(obj.tracks,track_transform));}} 
     ]} 
    ]}; 

//Render the json into a list of albums 
$('#list').json2html(json, album_transform); 
</script>