2011-09-29 51 views
4

这是我工作的页面.... http://fremontchurch.net/json_test/用JQuery/PHP解析嵌套的JSON字符串对象?

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

我想有列出曲目名称的列表,并通过简单的HTML链接链接的JSON <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> 

,因为我还挺新来请回复将全额代码这种编码,有时我知道把它放在哪里...任何帮助将非常感谢,谢谢...

+0

你不不需要解析JSON就可以使用它,它已经是一个对象! – markus

回答

1

以同样的方式,您使用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> 
3

你需要循环在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/