nested json objects to html using jquery

Question

i've been working with this for a while and i can't seem to figure it out i posted a question and it had a couple good answers I'm currently using the code from the second answer (you should read my first post to to understand where I'm coming from) parsing nested JSON String objects with JQuery/PHP?

so based on the code User: Useless Code

its working perfectly, but the problem is the data is included in the same page file and is only once album... i need to pull the json from

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

and have the main index page ggcc.tv/json2php/index.html list all the albums and content from post.php

please help and use full code (since I'm new to json/php/jquery etc...

Code being used as suggested from user: Useless Code

so basically i need the code (as suggested from user: useless code) to pull data/each album from http://www.ggcc.tv/json2php/posts.php and list each album and its tracks

please read this posts my original post and leave your answer here, Thank you

Answer 1

Try this:

<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>

Also, is the posts.php that you are connecting to on the same domain as this list page? I assumed it was, but if it is not then you should know that the browser will prevent cross-domain communications, but the server will not so you can get around this by creating a file at webroot/json2php/posts.php with the following:

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

Answer 2

Stay away from trying to parse the json yourself .. use a jquery templating engine that specializes in converting json to html like json2html.

Below is a complete code example (ok minus some of the album details you wanted to display, should be easy to add the rest in) that takes one of your albums and renders the track list.

Note the nested tracks are rendered using a sub call to json2html

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

which uses the transform 'track_transform' to render the track into a link.

<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>