使用jquery将json对象嵌套到html使用jquery

我一直在使用这一段时间，我似乎无法弄清楚我发布了一个问题，它有几个很好的答案我目前正在使用代码第二个答案（你应该阅读我的第一篇文章，以了解在那里我来自）parsing nested JSON String objects with JQuery/PHP?使用jquery将json对象嵌套到html使用jquery

因此基于代码的用户：

它的工作完美无用代码，但问题是该数据包括在同一个页面文件中，并且只是一次专辑...我需要将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每张专辑和列出每张专辑及其曲目

请仔细阅读本帖我原来的职位，并在这里留下您的回答，谢谢

来源

2011-10-22 Michael

试试这个：

<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'); 
?>

来源

2011-10-23 01:11:31 ghbarratt

保持从尝试自行解析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>

来源

2011-12-29 08:10:24

使用jquery将json对象嵌套到html使用jquery

回答

相关问题