Question

I’m trying to make a simple AJAX call to the Justin TV API, which seems to be failing consistently.

When making the AJAX call with url1, the console reports Object { readyState=4, status=200, statusText="success"}, yet it falls into the error function of the AJAX call. When visiting the URL with my browser, I notice the returned data is [{ ... json ...}].

When making the AJAX call with ‘url’, the call passes, entering the success function. I notice the returned object is { ...json... }.

How do I get a valid JSON object out of the AJAX request for url1?

Here’s a snip of what I’m doing:

var url1 = "http://api.justin.tv/api/stream/list.json"
var url = "https://api.twitch.tv/kraken/streams/";

channelNames = "";
for (channelName in streams)
{
    channelNames = channelNames + ',' + channelName;
}
channelNames = channelNames.slice(1);
console.log(channelNames);
console.log(url1);
$.ajax({
    url: url1,
    type: 'GET',
    crossDomain: true,
    dataType: 'jsonp',
    data: { channel : channelNames },
    success: function(data) 
    {
        console.log(data);
        if(data.streams.length > 0)
        {
            $("#streamStatus").html("<ul class='zebra'>");          
            for(i = 0; i < data.streams.length; i++)
            {
                stream = data.streams[i];
                channel = data.streams[i].channel;
                listItem = "<li id='stream"+i+"'>";
                streamName = "<span class='name'>" + streams[stream.name.slice(10)] + "</span>";
                viewers = "<span class='viewers'>viewers:" + stream.viewers + "</span>";
                gameName = "<div class='game'>" + ((channel.game != null) ? channel.game : "No Game Specified") + "</div>";
                listItem += streamName + viewers + gameName + "</li>"; 
                screenCap = "<div class='screenCap' style='display:none;'>" + channel.screen_cap_url_small + "</div>"
                $("#streamStatus ul.zebra").append(listItem);
                $("#streamStatus ul.zebra").append(screenCap);
                //console.log(channel);
            }
            $("#streamStatus").append("</ul>");
        }
    },
    error: function(data) 
    { 
        console.log(data);
    }

EDIT: Here is the working solution…

var url1 = "http://api.justin.tv/api/stream/list.json"
var url = "https://api.twitch.tv/kraken/streams/";

channelNames = "";
for (channelName in streams)
{
    channelNames = channelNames + ',' + channelName;
}
channelNames = channelNames.slice(1);
console.log(channelNames);
console.log(url1);
$.ajax({
    url: url1,
    type: 'GET',
    crossDomain: true,
    dataType: 'jsonp',
    jsonp: 'jsonp',
    data: { channel : channelNames },
    success: function(data) 
    {
         ...
    },
    error: function(data) 
    { 
        console.log(data);
    }

Answer 1

You’re passing jsonp as the dataType in the ajax call. They’re not interchangeable.

As you’ve noted yourself, the data returned from url1 is JSON, not JSONP: JSONP requires wrapping the returned JSON data in a javascript function call.

A mismatch like this between dataType and the data in the response body will always cause the ajax call to fail.