Develop Reference

Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse(<anonymous>)

I'm working on an ajax call to an API. and upon calling this call, I keep running into this error. Please help. Ive been trying at this for hours and not sure what the issue is. Ive taken out the
JSON.parse and added them back to see if that will help but still no progress.
$.ajax({
type: "POST",
//url: 'http://aeM/api/getDataId',
url: '/bin/soupservice.getDataAccordToId.html',
//async: false,
data: IDschema,
//contentType: "application/json",
beforeSend: function () {
// Show image container
$("#wait").css("display", "block");
},
success:function (data, textStatus, jqXHR) {
console.log(jqXHR.status);
if (JSON.parse(data)) {
let fileDeviceData = [];
let uploadDate = [];
fileDeviceData = data;
let deviceNameFromFileData = [];
$.each(JSON.parse(data), function (i, element) {
dataInFile.push(element.file);
deviceNameFromFileData.push(element.deviceName);
//push an object while interacting with API. used to get similar index locations for later use
duplicateIdCheckedList.push({
"deviceName":element.deviceName,
"lastUploadDate":element.lastUploadDate.split(" ")[0] ,
"fileName": element.deviceName+ " "+element.lastUploadDate.split(" ")[0],
"id":element.id
});
let utcTime = element.lastUploadDate;
let utcText = moment(utcTime).format("L LT");
let anotherway = moment.utc(utcTime).local().format("L LT");
let firstConvertedString = anotherway.split("/").join("-").replace(",", "");
uploadDate.push(firstConvertedString.split(":").join("-").replace(",", ""));
})
//call on the findDuplicateIndex function to organize all the files that will be consolidated together
duplicates=findDuplicateIndex(duplicateIdCheckedList);
valuesforBrowserTime = uploadDate
exportAsTxt(deviceNameFromFileData, valuesforBrowserTime);
}

I see you are requesting a .html file and passing data to JSON.parse that expect a JSON format.
You may need to parse using a different method.

sending openlayers3 event over ajax results in RangeError

The error in chrome console is RangeError: Maximum call stack size exceeded
I use the following code:
draw.on('drawend',
function(evt) {
var fe = evt.feature
console.log(fe);
var parser = new ol.format.GeoJSON();
var features = source.getFeatures();
var featuresGeoJSON = parser.writeFeatures(features);
$.ajax({
url: "http://0.0.0.0:3000/features.json",
method: "POST",
data: fe
});
},
this);
The evt.feature object looks ok in developer tools console.

Make sure you are serializing the feature that you get in the event and not the features from the source. And $.ajax either expects a string or an object with key-value-pairs. Because you want to send the whole object, you will have to use JSON.stringify() to serialize the object. Something like:
draw.on('drawend',
function(evt) {
var parser = new ol.format.GeoJSON();
var featureGeoJSON = parser.writeFeature(evt.feature);
$.ajax({
url: "http://0.0.0.0:3000/features.json",
method: "POST",
data: JSON.stringify(featureGeoJSON)
});
},
this);

Authenticating with Last.fm in Jquery - Invalid method signature supplied

I'm trying to auth a Last.fm session and am struggling to sign a request for a session key correctly.
I keep receiving Invalid method signature supplied However when I md5 hash what i believe the query should consist of outside of JS, I get the same signature. I must be including the wrong data in the string I guess, but can't figure out what.
I know there are a few other questions and i've ran through them all to see what's going wrong here, but I swear it looks right to me.
This is the signing algorithm and Ajax call. I've tried to leave enough sample data too.
// Set elsewhere but hacked into this example:
var last_fm_data = {
'last_token':'TOKEN876234876',
'user': 'bob',
'secret': 'SECRET348264386'
};
// Kick it off.
last_fm_call('auth.getSession', {'token': last_fm_data['last_token']});
// Low level API call, purely builds a POSTable object and calls it.
function last_fm_call(method, data){
// param data - dictionary.
last_fm_data[method] = false;
// Somewhere to put the result after callback.
// Append some static variables
data['api_key'] = "APIKEY1323454";
data['format'] = 'json';
data['method'] = method;
post_data = last_fm_sign(data);
$.ajax({
type: "post",
url: last_url,
data: post_data,
success: function(res){
last_fm_data[method] = res;
console.log(res['key'])// Should return session key.
},
dataType: 'json'
});
}
function last_fm_sign(params){
ss = "";
st = [];
so = {};
Object.keys(params).forEach(function(key){
st.push(key); // Get list of object keys
});
st.sort(); // Alphabetise it
st.forEach(function(std){
ss = ss + std + params[std]; // build string
so[std] = params[std]; // return object in exact same order JIC
});
// console.log(ss + last_fm_data['secret']);
// api_keyAPIKEY1323454formatjsonmethodauth.getSessiontokenTOKEN876234876SECRET348264386
hashed_sec = unescape(encodeURIComponent($.md5(ss + last_fm_data['secret'])));
so['signature'] = hashed_sec; // Correct when calculated elsewhere.
return so; // Returns signed POSTable object
}
Anything anyone can see that i'm missing here? I'm absolutely stumped why this isn't returning a correctly signed POSTable object in the format requested here. Thanks for your time.
Edit: can't thank anyone for their time if i don't get any advice! No one had any experience with last.fm?

After investigating your code and other posts related to last.fm api call, I found that #george lee in fact is correct. You don't need to provide format while generating the auth_sign.
Apart from that you need to apply $.md5() to auth_sign string after applying encodeURIComponent() and unescape() functions. Like this.
hashed_sec = $.md5(unescape(encodeURIComponent(ss + last_fm_data['secret'])));
Also while making ajax call you need to pass api_key, token & api_sig as data. But seeing your code, reveals that you are passing api_key, token, format, method & signature.
So you need to remove format, method & signature from the data field of ajax call.
Instead you need to pass api_key, token & api_sig to the data field.
So the final code after commenting the data['format'] = 'json'; line will look like this.
// Set elsewhere but hacked into this example:
var last_fm_data = {
'last_token':'TOKEN876234876',
'user': 'bob',
'secret': 'SECRET348264386'
};
// Kick it off.
last_fm_call('auth.getSession', {'token': last_fm_data['last_token']});
// Low level API call, purely builds a POSTable object and calls it.
function last_fm_call(method, data){
// param data - dictionary.
last_fm_data[method] = false;
// Somewhere to put the result after callback.
// Append some static variables
data['api_key'] = "APIKEY1323454";
//data['format'] = 'json';
data['method'] = method;
post_data = last_fm_sign(data);
$.ajax({
type: "POST",
url: last_url,
data: post_data,
success: function(res){
last_fm_data[method] = res;
console.log(res['key'])// Should return session key.
},
dataType: 'json'
});
}
function last_fm_sign(params){
ss = "";
st = [];
so = {};
so['api_key'] = params['api_key'];
so['token'] = params['token'];
Object.keys(params).forEach(function(key){
st.push(key); // Get list of object keys
});
st.sort(); // Alphabetise it
st.forEach(function(std){
ss = ss + std + params[std]; // build string
});
ss += last_fm_data['secret'];
// console.log(ss + last_fm_data['secret']);
// api_keyAPIKEY1323454formatjsonmethodauth.getSessiontokenTOKEN876234876SECRET348264386
hashed_sec = $.md5(unescape(encodeURIComponent(ss)));
so['api_sig'] = hashed_sec; // Correct when calculated elsewhere.
return so; // Returns signed POSTable object
}
Please refer to this link.

So on testing some of the responses, I found the solution. There were 2 issues.
EDITED see below (
The first was needing to remove
data['format'] = 'json';
as George Lee pointed out. Thanks George.
)
The other issue was that I'd named a variable incorrectly so was being POSTed with the wrong name. The line
so['signature'] = hashed_sec;
should have been
so['api_sig'] = hashed_sec;
I noticed this in Pankaj's answer but unfortunately the rest of his answer (i.e. including the method) was incorrect. Making these 2 changes resolved the call and signed it correctly.
Thanks for all the suggestions!
EDIT:
After some more playing, i've found that
data['format'] = 'json';
IS correct, however it DOESN'T get hashed with the signature.
Adding data['format'] = 'json'; to the POST object after hashing works, and in this instance will return JSON as opposed to XML - which was the preferred method. Adding after hashing is not documented anywhere that I can find, so there you go.
The new working code is as follows, and this shows the 2 lines indicated with --------------------
// Set elsewhere but hacked into this example:
var last_fm_data = {
'last_token':'TOKEN876234876',
'user': 'bob',
'secret': 'SECRET348264386'
};
// Kick it off.
last_fm_call('auth.getSession', {'token': last_fm_data['last_token']});
// Low level API call, purely builds a POSTable object and calls it.
function last_fm_call(method, data){
// param data - dictionary.
last_fm_data[method] = false;
// Somewhere to put the result after callback.
// Append some static variables
data['api_key'] = "APIKEY1323454";
data['method'] = method;
post_data = last_fm_sign(data);
// THEN ADD THE FORMAT ---------------------------------------
post_data['format'] = 'json';
$.ajax({
type: "post",
url: last_url,
data: post_data,
success: function(res){
last_fm_data[method] = res;
console.log(res['key'])// Should return session key.
},
dataType: 'json'
});
}
function last_fm_sign(params){
ss = "";
st = [];
so = {};
Object.keys(params).forEach(function(key){
st.push(key); // Get list of object keys
});
st.sort(); // Alphabetise it
st.forEach(function(std){
ss = ss + std + params[std]; // build string
so[std] = params[std]; // return object in exact same order JIC
});
// console.log(ss + last_fm_data['secret']);
// api_keyAPIKEY1323454formatjsonmethodauth.getSessiontokenTOKEN876234876SECRET348264386
hashed_sec = unescape(encodeURIComponent($.md5(ss + last_fm_data['secret'])));
so['api_sig'] = hashed_sec; // RENAMED THIS ----------------------------
return so; // Returns signed POSTable object
}

Passing string array from ASP.NET to JavaScript

I am trying to call the server side from JavaScript and then pass a string array back to JavaScript, but running into problems.
// Call the server-side to get the data.
$.ajax({"url" : "MyWebpage.aspx/GetData",
"type" : "post",
"data" : {"IdData" : IdData},
"dataType" : "json",
"success": function (data)
{
// Get the data.
var responseArray = JSON.parse(data.response);
// Extract the header and body components.
var strHeader = responseArray[0];
var strBody = responseArray[1];
// Set the data on the form.
document.getElementById("divHeader").innerHTML = strHeader;
document.getElementById("divBody").innerHTML = strBody;
}
});
On the ASP.Net server side, I have:
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object GetTip(String IdTip)
{
int iIdTip = -1;
String[] MyData = new String[2];
// Formulate the respnse.
MyData[0] = "My header";
MyData[1] = "My body";
// Create a JSON object to create the response in the format needed.
JavaScriptSerializer oJss = new JavaScriptSerializer();
// Create the JSON response.
String strResponse = oJss.Serialize(MyData);
return strResponse;
}
I am probably mixing things up, as I am still new to JSON.
UPDATE with error code:
Exception was thrown at line 2, column 10807 in http://localhost:49928/Scripts/js/jquery-1.7.2.min.js
0x800a03f6 - JavaScript runtime error: Invalid character
Stack trace:
parse JSON[jquery-1.7.2.min.js] Line 2
What is my problem?

I modified your ajax call script to :
// Call the server-side to get the data.
$.ajax({
url: "WebForm4.aspx/GetTip",
type: "post",
data: JSON.stringify({ IdTip: "0" }),
dataType: "json",
contentType: 'application/json',
success: function (data) {
// Get the data.
var responseArray = JSON.parse(data.d);
// Extract the header and body components.
var strHeader = responseArray[0];
var strBody = responseArray[1];
// Set the data on the form.
document.getElementById("divHeader").innerHTML = strHeader;
document.getElementById("divBody").innerHTML = strBody;
}
});
Note that I added contentType: 'application/json' and changed
var responseArray = JSON.parse(data.response);
to
var responseArray = JSON.parse(data.d);

This s purely out of guess work. But see if this is what you are getting:-
In your Ajax call, your data type is json and looking at the method you are returning a json string. So you do not need to do JSON.parse(data.response). Instead just see if the below works for you. Also i dont see a response object in your Json, instead it is just an array. So it must be trying to parse undefined
var strHeader = data[0];
var strBody = data[1];

Syntax:Error JSON.parse, When trying to load data for protovis

Hi I'm learning how to work with protovis, so far so good, but now I stumbled upon a problem I can't seem to solve.
The following is the code. (I have the latest jquery loaded in my headers)
<script type="text/javascript+protovis">
var dataURL = "http://eagereyes.org/media/2010/protovis-primer/earthquakes.json";
var JSONdata = $.ajax({ type: "GET", url: dataURL, async: false }).responseText;
var earthquakes = JSON.parse(JSONdata);
var width = 560;
var height = 245;
var barWidth = width/earthquakes.length;
var gap = 2;
new pv.Panel().width(width).height(height+5)
.add(pv.Bar)
.data(earthquakes)
.bottom(0)
.width(barWidth-gap)
.height(function(d) d.Magnitude * (height/9))
.left(function() this.index * barWidth)
.root.render();
When I try this in Firefox i get this alert:
Syntax:Error JSON.parse
I have validated the JSON on http://www.jsonlint.com/ already. So the problem must be elsewhere.
Anyone knows whats going on here?
Edit
I tried loading the same data in the protoviewer app: http://www.rioleo.org/protoviewer/ and it works. So it must be the code.

Have you tried a regular async callback instead of the synchronous approach? Like:
var dataURL = "http://eagereyes.org/media/2010/protovis-primer/earthquakes.json";
$.ajax({
type: "GET",
url: dataURL,
success: function(response) {
var earthquakes = JSON.parse(JSONdata);
var width = 560;
var height = 245;
var barWidth = width/earthquakes.length;
var gap = 2;
new pv.Panel().width(width).height(height+5)
.add(pv.Bar)
.data(earthquakes)
.bottom(0)
.width(barWidth-gap)
.height(function(d) d.Magnitude * (height/9))
.left(function() this.index * barWidth)
.root.render();
}
});
Also, is that JSON file located on the same server that the page making the request shows in the address bar (exactly http://eagereyes.org)?
Finally, the manual JSON.parse() step isn't necessary. If you add the dataType: 'json' parameter, $.ajax() will automatically deserialize as JSON and uses JSON.parse() where available.

Add a semi-colon ; to the end of your response

Which browser are you using? Some browsers don't define the JSON object. You can download a script from the URL below which will define the JSON object if it doesn't already exist.
https://github.com/douglascrockford/JSON-js
You can check whether JSON is defined as follows:
alert(JSON);
update
OK next thing I'd do is check that the ajax call is actually returning the corect data. Change your code to print the JSON returned from the ajax call.
var JSONdata = $.ajax({ type: "GET", url: dataURL, async: false }).responseText;
alert(JSONdata);
var earthquakes = JSON.parse(JSONdata);

$.ajax({
type: "POST",
url: "saveChangesInEditing.php",
data: idObject,
success: function(data){
dataObject = JSON.parse(data);
$("input[name = 'id']").val(dataObject.id);
$("input[name='full_name']").val(dataObject.full_name);
$("input[name='sport']").val(dataObject.sport);
$("input[name='idol']").val(dataObject.idol);
},
error: function(data){
alert("error!" + data);
}
});