I'm trying to read JSON data using jquery. Specifically I'm trying to read the JSON from this url: http://mkweb.bcgsc.ca/color-summarizer/?url=http://scontent-a.cdninstagram.com/hphotos-xfa1/t51.2885-15/10643840_701797013239098_657737630_a.jpg&precision=low&num_clusters=3&json=1&callback=?
However I keep getting this error:
Uncaught SyntaxError: Unexpected token :
Here is my jquery:
$(document).ready(function () {
var one = "1"
$.getJSON('http://mkweb.bcgsc.ca/color-summarizer/?url=http://scontent-a.cdninstagram.com/hphotos-xfa1/t51.2885-15/10643840_701797013239098_657737630_a.jpg&precision=low&num_clusters=3&json=1&callback=?', function(result) {
document.write(result.clusters.one.rgb[0]);
});
});
I'm getting the error at the very first colon in the JSON code.
From what I understand, the JSON data is actually being read as Javascript. How can I fix this.
Reading the API Docs I found that you need to specify a jsnop=1 parameter in order to retrieve data via JSONP.
Tthe correct code would be something like this:
$(document).ready(function () {
$.ajax({
url: 'http://mkweb.bcgsc.ca/color-summarizer/',
type: 'GET',
dataType: 'jsonp',
jsonpCallback: 'colorsummary',
data:{
url: 'http://scontent-a.cdninstagram.com/hphotos-xfa1/t51.2885-15/10643840_701797013239098_657737630_a.jpg',
precision: 'low',
num_clusters: '3',
jsonp: '1'
},
success: function(result){
document.write(result.clusters['1'].rgb[0]);
}
});
});
I also structured the request so you can change parameters easily.
PS: watch out with that JSON notation ( the ['1'] in clusters and so)
Related
I have a little experience in JSON I did it on my Android application now using JSON again in my webpage as AJAX reponse, I did research about ajax and found a tutorial to get my data in database using JSON so I tried but I didn't know how to parse the object.
My Jquery Code.
$.ajax({
type: 'GET',
dataType: 'json',
url: 'functions/json.php',
success: function(response){
var json = $.parseJSON(response);
alert(json.firstname) //where my response is $response['firstname']
},
error: function(data){
var json = $.parseJSON(data);
alert(json.error);
}
});
Using the php I echo the jsonArray as json_encode and heres the json output
{"id":"2","firstname":"john","lastname":"Doe"}
using google chrome console i got this error
Uncaught SyntaxError: Unexpected token o in JSON at position 1
at JSON.parse (<anonymous>)
when the function response output as alert(reponse)
output was
[object Object]
Don't parse it. You've told jQuery to:
dataType: "json"
So response is the parsed object, not JSON. Just use it directly:
$.ajax({
type: 'GET',
dataType: 'json',
url: 'functions/json.php',
success: function(response){
alert(response.firstname);
},
error: function(data) {
// `data` will not be JSON
}
});
Also note that the first parameter to the error callback will not be JSON or the result of parsing JSON in the error callback.
See the documentation for details.
I am trying to do a GET request to solr search engine using $.ajax() from jQuery. This is the code I am using for doing an ajax call:
$.ajax({
url : 'http://xxx.xxx.xxx.xxx:port#/solr/mycore/select?indent=on&q=myparam:value&wt=json',
type: "GET",
dataType: "jsonp",
jsonp : "callback",
success: function(data) {
console.log("Success", data);
},
error: function(data) { alert("Error"); }
});
So I am getting a valid json object in the response but somehow the browser throws an Uncaught Syntax Error. The actual error is:
Uncaught SyntaxError: Unexpected token :
select?indent=on&q=myparam:value&wt=json&callback=…....somevalue...
The tricky part is that the response header is text/plain when I checked in the browser. How can I solve this? Please help me...
Colons require encoding in query strings.
Your url should look like this:
http://xxx.xxx.xxx.xxx:port#/solr/mycore/select?indent=on&q=myparam%3Avalue&wt=json
If you're generating the query string dynamically, use encodeURIComponent() to correctly encode special characters.
I got this solved. Actually I had to use jsonpCallback:"mysuccesscallbackfunction" in the ajax call and json.wrf=mysuccesscallbackfunction in the URL. It looks like this now:
$.ajax({
url : 'http://xxx.xxx.xxx.xxx:port#/solr/mycore/select?indent=on&q=myparam:value&wt=json&json.wrf=mysuccesscallbackfunction',
type: "GET",
dataType: "jsonp",
jsonp : "callback",
jsonpCallback:"mysuccesscallbackfunction",
success: function(data) {
console.log("Success", data);
},
error: function(data) { alert("Error"); }
});
and my mysuccesscallbackfunction is:
function mysuccesscallbackfunction(resp) {
console.log('inside mysuccesscallbackfunction: ', resp );
}
Now, first it executes whatever is inside mysuccesscallbackfunction and then goes to default success callback. I found it somewhere on web. I would still like to know why it worked now.
I am using below code to access rest service hosted on another domain.
$.ajax({
type: 'GET',
url: url,
async: false,
jsonpCallback: 'jsonCallback',
contentType: "application/json",
dataType:"jsonp",
success: function(json) {
alert(json);
},
error: function(e) {
console.log(e.message);
}
});
I am able to get the data correctly, but I get this error in firebug in mozilla:
SyntaxError: missing ; before statement
{"Hello":"World"}
Can anyone suggest me what I am doing wrong here? Even though Json data is valid. I tried all the suggestions posted in this question But still I am getting same error.
If it's really JSON you ask for, don't set "jsonp" as dataType, and don't provide a callback :
$.ajax({
type: 'GET',
url: url,
contentType: "application/json",
success: function(json) {
alert(json);
},
error: function(e) {
console.log(e.message);
}
});
the format of JSON and JSONP are slightæy different
JKSONP is a function invocation expression
callback({"hellow":"world"});
whereas JSON is simply a serialized object
{"Hello":"world"}
fromyour posting it would seem that the server is returning JSON and not JSONP
So you either need to change the server to reply correctly (The actual callback name is a get parameter to the request). You should do this if you are using the ajax call across domains
If you are not using ajax across domains stick to regular JSON
I am trying to retrieve data from a web service using an ajax call. The call is succeeding, because I am able to successfully print the data in the console using console.log(). However when I attempt to take my data, and convert from a string into an array, the code fails. I am currently trying to use eval, but have also tried to use JSON.parse. Both fail with an error of Uncaught SyntaxError: Unexpected identifier. Any ideas on how to get around this?
$.ajax({
type: "POST",
url: (redacted)
data: (redacted)
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
console.log(response.d);
var data = eval("[" + response.d + "]");
This is where my code fails. Like I said, console.log(response.d) works, with an output simlilar to this: { 'code':'1234', 'description':'Record 1'}, { 'code':'1234', 'description':'Record 2'}, { 'code':'1234', 'description':'Record 3'}
Is my problem the use of eval? Any input would be greatly appreciated
First, I would use JSON.parse() here instead of eval for decoding JSON strings.
However in this case I believe the return data has already been decoded by jQuery. console.log(response.d) returns a nice looking object and not a "{...}...." string correct?
Essentially, if I'm in Firebug and look at the net objects I see the status 200
If I click on the JSON tab I can see my access_token, but how do I extract it from there so I can use for API calls?
Here's the latest code tried.
var jsonUrl = url +"&callback=?";
var access_token;
$("#getJSON").click(function() {
$.getJSON(jsonUrl, { dataType: "JSONP" }, function(json){
...
access_token = json.access_token;
...
});
});
also tried:
$.ajax({
dataType: 'jsonp',
jsonp: 'callback',
url: url,
success: function (json) {
console.log(json.access_token);
},
});
But when I try and alert(access_token); or run a foursquare api call I get the following errors
Resource interpreted as Script but transferred with MIME type application/json.
Uncaught SyntaxError: Unexpected token : checkinsGET https://api.foursquare.com/v2/users/self/checkins?oauth_token=undefined&format=json 401 (Unauthorized)
I feel like its ready and waiting for me to call it, but how on earth do I print it from the Dom into a var that I can use? Been fighting for hours and been trying all my research techniques for some reason this one's elluding me. Thanks for everyone's help so far, I'm really hoping to get passed this!
Browsers natively implement a global function JSON.parse(), and if for some reason that doesn't work you can use jQuery's parseJSON() function.
Here's how it works. Let's say your JSON object has the following format:
{
Status: "Success",
Resource: {
Name: "Person's Name",
URL: "http://blahblahblah.com/extrastuffhere?querystuff=here"}}
Then you can access the "URL" element by using JSON.parse() like so:
var url = JSON.parse(json).Resource.URL;
(I'm unfamiliar with Foursquare but it should look similar, and you can do console.log(json) to see its structure.)
So your code might look something like this:
$("#getJSON").click(function() {
$.getJSON(jsonUrl, { dataType: "JSONP" }, function(json){
var parsed = JSON.parse(json);
console.log(parsed);
access_token = parsed.access_token;
});
});
Hope that helps!