Question

这是我正在处理的页面.... http://fremontchurch.net/json_test/

这是json http://fremontchurch.net/json_test/posts.php

我正在尝试列出通过简单的html链接<a href="URL_GOES_HERE">TRACK NAME GOES HERE</a>列出并链接到其网址的音轨名称

我得到了其他一切，只是嵌套的部分不断出现“[对象对象]，[对象对象]，[对象对象]”......等等...每个嵌套有两个项目的轨道名称和网址......这样做的正确方法是什么？

来自我的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"}
  ]

            }

继承我的所有代码到html / jquery / php

<html>
<body>
    <div id="content">
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
     <script type="text/javascript">
        $(document).ready(function(){
            var url="posts.php";
            $.getJSON(url,function(json){
                $.each(json.posts,function(i,post){
                    $("#content").append(
                        '<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>'+post.tracks+'</li></p>'+
                        '<hr>'+
                        '</div>'
                    );
                });
            });
      });
    </script>
</body>
</html>

请回复完整的代码，因为我对这种编码有点新鲜，有时我知道在哪里放...任何帮助都将非常感谢，谢谢......

Answer 1

你需要遍历post.tracks中的每个项目并在包含它之前将这些信息收集到一个字符串中，如下所示：

    $.each(json.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);
    });

这里的工作示例：http://jsfiddle.net/3SFE4/

Answer 2

与使用each迭代帖子的方式相同，您可以使用each来迭代曲目。我在下面提供了完整的代码。

<html>
<body>
    <div id="content">

    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

     <script type="text/javascript">
        $(document).ready(function(){
          var url="posts.php";

          $.getJSON(url,function(json){
            $.each(json.posts,function(i,post){

              // Here we generate a fragment for the tracks.
              var tracks = ''; 
              $.each(post.tracks, function(j, track) {
                tracks += '<a href="' + track.url + '">' + track.name + '</a>';
              })

              $("#content").append(
                '<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>'+
                'tracks' + 




                '<hr>'+
                '</div>'
              );
            });
          });
        });
      </script>

使用JQuery / PHP解析嵌套的JSON String对象？

2 个答案: