1

I've got a problem with displaying JSON data called via JSONP. I've got a complex JSON file delivered cross domain via a URL and I'm quite the novice at JSON and ajax. I followed a JSONP article here at https://learn.jquery.com/ajax/working-with-jsonp/ and that worked a treat. Now I am trying to iterate through the JSON object and display data in the HTML page after following this question How do I iterate through this JSON object in jQuery? and I'm not going anywhere. The data is not defined and I'm not sure what I am doing wrong:

// Using LibCal and JSONP
$.ajax({
    url: "https://api2.libcal.com/1.0/room_bookings_nickname/?iid=3356&group_id=12306&key=92a47e5c854dee620cca071648c3fc41",

    // The name of the callback parameter, as specified by the YQL service
    jsonp: "callback",

    // Tell jQuery we're expecting JSONP
    dataType: "jsonp",

    // Tell LibCal what we want and that we want JSON
    data: {
        q: "select Room name,booked timeslots,booking name from LibCal room bookings",
        format: "json"
    },

    // Work with the response
    success: function( response ) {
        console.log( response ); // server response
    }
});

$.each(data.bookings, function(index, element) {
    alert(element.timeslots.room_name); 
});

I hope it's an obvious fix to a more advanced user our there :)

Community
  • 1
  • 1
Ryan Coolwebs
  • 1,611
  • 5
  • 22
  • 44

2 Answers2

2

Thats because your data object doesn't exist. The data key you're referring to is a on the object you're passing to the $.ajax method.

You need to execute your function inside the success callback in order for it make any sense.

$.ajax({
    ...
    // keep all your original stuff
    ...
    success: function( response ) {
        var data = response;
        $.each(data.bookings, function(index, element) {
            alert(element.timeslots.room_name); 
        });
    }
});
Antiokus
  • 534
  • 3
  • 8
  • Ahhh 'rookie' error. I have fixed up the code now so it's not throwing out the error. Problem now is looking down the JSON data tree - getting lots of undefined objects. – Ryan Coolwebs Jan 19 '16 at 06:14
  • @RyanCoolwebs Happens to the best of us. As for the undefined objects, if thats what you're getting from the server - good luck. Don't know how I can help you there :D – Antiokus Jan 19 '16 at 06:17
1

I did the request like this. You need to go one level more to access the array to loop. 

var json_url = "https://api2.libcal.com/1.0/room_bookings_nickname/?iid=3356&group_id=12306&key=92a47e5c854dee620cca071648c3fc41"

$.ajax({
  url: json_url,
  crossDomain:true,
  dataType:"jsonp"
}).done(function(response) {
   // at the end of request 

   //Yours --->response.bookings
   //Mine  --->response.bookings.timeslots

     //access the array to loop
   var rooms = response.bookings.timeslots;

   $.each(rooms, function(index, element) {
      create_elem(element.room_name, index); 
  });
});

Here is a working version in jsFiddle - https://jsfiddle.net/9e746pkh/

Hope this helps.

devtye
  • 292
  • 2
  • 11
  • I didn't the see iteration part of question. my bad, let me give it a shot. – devtye Jan 19 '16 at 06:09
  • It works in JSFiddle? I had real issues with it there so i did my own in brackets. – Ryan Coolwebs Jan 19 '16 at 06:16
  • @RyanCoolwebs yea, it works. I just updated my answer. It works JSFiddle, because I allowed crossDomain:true. check https://jsfiddle.net/9e746pkh/ – devtye Jan 19 '16 at 06:59
  • Thanks @Devtye, you nailed it! I made the updates to my code and my console log pulled back the list of data that I wanted. Also did not realise JSFiddle had an option to allow crossDomain:true but it does look like JSFiddle has gone through a recent facelift/upgrade. Thanks again. – Ryan Coolwebs Jan 19 '16 at 07:15
  • @RyanCoolwebs yeah, jsFiddle is an excellent tool and they have done a lot with it recent days and you are welcome. I'm glad I can help : ) – devtye Jan 19 '16 at 07:22