Populating Nested JSON from remote data

i want to populate this json http://www.godsgypsychristianchurch.net/music.json using a get request, there are multiple level's data which i would like to have parsed using jquery and using some hidden div's (this json hold's music from multiple church's in different cities)

the idea of the parsing is this

Cities>Albums>Tracks>Div with Mp3 Link/Player

detailed explaination

Church with the string church i'd like to list firstly a list of cites which you click on and then the string Album is to populate & list each album for the selected city (while hiding the city list) once a album is selected the string tracks is to be populated and listed (again while hiding the album list)

once a track is selected id'd like to have a hidden dive which links to the mp3 (which will have to be combined with the baseurl string to complete the url, but once i can get to this div i am capable of creating the template for it, it just parsing the nested json in that type of manner thats the problem..

please help and if you would please include full code (i get very confused when just a snippet of code is shown, and JSfiddle is a big help too, i know it's asking a lot but i really need some help, thank you in advance

to get more of a idea of what i am trying to do, go to you can download the iOS app from the app store "GGCC MOBILE" I'm basically trying to duplicate that but for the website http://www.ggcc.tv

i've rewritten the JSON format and got it working in Sencha touch http://www.ggcc.tv/app/STNL the rewritten data is here http://www.ggcc.tv/app/data.json but the problem with that is scrolling with a mouse, ST would require you having to click and drag in order to scroll, i can't seem to find a way to disable is, so i'm asking for your help in parsing this data for our website without using sencha touch, thank you very much for all your help, time and effort.


"Populating Nested JSON from remote data" is worrying.

Think of it this way :

  • Web page issues a .getJSON() request (or its $.ajax() equivalent).
  • Remote server application receives the request.
  • Script on the remote server responds to the request by retrieving data from database and composing a data structure (deep-object or deep-array or a combination of the two).
  • Script on the remote server JSON-encodes the data and sends it back to the client in its response.
  • Client receives the response and jQuery automatically JSON-decodes it into a javascript data structure that mirrors the server's original data structure.

Exactly what you then do with the data is up to you and your application building skills, which, as a byproduct of the exercise, will be honed to perfection.

Need Your Help

How to use data.frame columns as vectors


I'm trying to separate the columns (Grith, Height and Volume) from the data.frame of a given data set package. How to I extract the columns as "plain" R vectors?

How to compile Qt as static

c++ qt user-interface

I am currently writing code in Qt. How to compile the code statically?