Question

i try to develop a little web calendar. The user get a week overview and if he push ‘show me next week’, the next 7 days should be loaded asynchronous with jQuery. The JSON-data looks like:

{
   "user":[
      {
         "id":"12345",
         "days":{
            "09-07-2012":{
               "10:00":{
                  "time":"10:00",
                  "length":"30",
                  "appointmentid":"159487"
               },
               "11:00":{
                  "time":"11:00",
                  "length":"30",
                  "appointmentid":"159487"
               },
               "12:00":{
                  "time":"12:00",
                  "length":"30",
                  "appointmentid":"159487"
               }
            },
            "10-07-2012":{
               "10:00":{
                  "time":"10:00",
                  "length":"30",
                  "appointmentid":"159487"
               },
               "11:00":{
                  "time":"11:00",
                  "length":"30",
                  "appointmentid":"159487"
               },
               "12:00":{
                  "time":"12:00",
                  "length":"30",
                  "appointmentid":"159487"
               }
            },
            "11-07-2012":{
               "10:00":{
                  "time":"10:00",
                  "length":"30",
                  "appointmentid":"159487"
               },
               "11:00":{
                  "time":"11:00",
                  "length":"30",
                  "appointmentid":"159487"
               },
               "12:00":{
                  "time":"12:00",
                  "length":"30",
                  "appointmentid":"159487"
               }
            }
         }
      }
   ]
}

How i can process these data and display it in a html table? With jQuery function i can only walk throw the 2nd dimension … so i only get id and days …

$.each(data.user, function(i,data){
...
}

So how i can walk throw the whole array and fill my ui with the data? Should i use nested each functions?

Greets
Thomas

Answer 1

Once it’s parsed, you can simply walk inside properties as what you have is a javascript object.

In this specific case, you have maps inside maps.

To iterate over the properties of this kind of object, use the for (var key in object) construct :

Your user id is data.user.id

for (var date in data.user.days) {
   var day = data.user.days[date];
   for (var hour in day) {
      var appointement = day[hour];
      // use the hour and appointement objects and their properties.

I don’t know what size is this object you qualify of “big” but there is no problem (apart the download duration) in iterating over an object of a few MB.