使用jquery将json对象嵌套到html

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 的 jquery 模板引擎，例如 json2html。

下面是一个完整的代码示例（可以减去您想要显示的一些专辑详细信息，应该很容易添加其余部分），它获取您的一张专辑并呈现曲目列表。

注意嵌套轨道是使用对 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>