Develop Reference

Can not get item of JSON-response

I am trying to create a AJAX call - and I would like to work with the response.
This is my response I see in my browser's network console:
{
"message": "success",
"file": "dump.xml"
}
And this is what I want to do:
onComplete: function onComplete(data) {
var vm = this;
console.log(data.file);
this.$set('upload', data);
this.$set('filename', file);
this.modal.show();
}
Okay. Well - I'm getting a response and if I write data to console.log, I'm getting this:
{"message":"success","file":"dump.xml"}
But if I try to do:
console.log(data.file);
I'm getting undefined. But why?

You are receiving it as a string. You have to parse it first to JSON by:
data = JSON.parse(data);
console.log( data.file )
OTHER OPTION: Or you can define it on request, add dataType: "json" so that you will receive json.
Like:
$.ajax(
{
type: "POST",
dataType: "json",
url: url,
data: {},
success: function( response ) {}
}

I think the problem is that data is a JSON string, so it will be printed in console, but when you call data.file it will be undefined. as string doesn't have a file property.
You need to parse your data object, before accessing file property:
data = JSON.parse(data);
console.log(data.file);

Most probably your data will be a JSON string. You have parse it into an Object like below
onComplete: function onComplete(data) {
data = JSON.parse(data)
var vm = this;
console.log(data.file);
this.$set('upload', data);
this.$set('filename', file);
this.modal.show();
}

Can Mockjax handle single IDs Api from Json file

I'm using Mockjax for the first time to mock a Restful API which will return a series of data given an id. Right now i have a json file that has several Items, and i would like to have a function inside Mockjax (or where necessary) to return only the queried ID. how can I achieve this?
current code :
$.mockjax({
url: "/Api/Cases/{caseId}",
proxy: "/mocks/cases nuevo.json",
dataType: 'json',
responseTime: [500, 800]
});
$.ajax({
type: 'GET',
url: '/Api/Cases/',
data: {caseId: taskId},
success: function(data){
//use the returned
console.log(data);
}
});
current error:
GET http://localhost:8080/Api/Cases/?caseId=100 404 (Not Found)

Great question... yes, you can do this. But you'll have to write the functionality yourself using the response callback function and then making a "real" Ajax request for the file (instead of using the proxy option). Below I just make another $.ajax() call and since I have no mock handler setup for that endpoint, Mockjax lets it go through.
Note that setting up URL params is a little different than you suggest, here is what the mock setup looks like:
$.mockjax({
url: /\/Api\/Cases\/(\d+)/, // notice the regex here to allow for any ID
urlParams: ['caseID'], // This defines the first matching group as "caseID"
responseTime: [500, 800],
response: function(settings, mockDone) {
// hold onto the mock response object
var respObj = this;
// get the mock data file
$.ajax({
url: 'mocks/test-data.json',
success: function(data) {
respObj.status = 200;
// We can now use "caseID" off of the mock settings.urlParams object
respObj.responseText = data[settings.urlParams.caseID];
mockDone();
},
error: function() {
respObj.status = 500;
respObj.responseText = 'Error retrieving mock data';
mockDone();
}
});
}
});
There is one other problem with your code however, your Ajax call does not add the ID to the URL, it adds it to the query string. If you want to use that API endpoint you'll need to change your source code $.ajax() call as well. Here is the new Ajax call:
$.ajax({
type: 'GET',
url: '/Api/Cases/' + taskId, // this will add the ID to the URL
// data: {caseId: taskId}, // this adds the data to the query string
success: function(data){
//use the returned
console.log(data);
}
});
Note that this presumes the mock data is something like:
{
"13": { "name": "Jordan", "level": 21, "id": 13 },
"27": { "name": "Random Guy", "level": 20, "id": 27 }
}

What I have ended up doing, is: I have left the $.mockjax function untouched, and i have manipulated the data inside the ajax request, using jquery's $.grep function as follows:
$.ajax({
type: 'GET',
url: '/Api/Cases/' + taskId,
success: function(data){
//note you have to parse the data as it is received as string
data = JSON.parse(data);
var result = $.grep(data, function(e){ return e.caseId == taskId; });
//since i'm expecting only one result, i pull out the result on the 0 index position
requestedData = result[0];
}
});
The $.grep() method removes items from an array as necessary so that all remaining items pass a provided test see Jquery API, And since our test is that the caseId attribute of the element equals to the taksId variable sent, it will return all the elements that match the given Id, in this case, only one, this is why I've taken only the result on the 0 index position requestedData = result[0];
**Note: **
A more suited solution would be a mixture between what i've done and #jakerella 's answer, since their method implements the find element method inside the mockjacx function, and my function presumes a usual JSON response:
[{"caseId": 30,"name": "Michael"},{"caseId": 31,"name": "Sara"}]

Parsing response text as key value pairs in an elegant way

Can't seem to find what I'm looking for in searches so this might be a duplicate but I haven't found an original yet sooo....
I have a an ajax call:
$.ajax({
url: "/events/instructor/",
type: 'POST',
data: {
instructorID: $(this).attr("id")
},
complete: function (data) {
$("#name").html(data["responseText"]["name"]);
$("#email").html(data["responseText"]["email"]);
$("#photo").html(data["responseText"]["photo"]);
$("#summary").html(data["responseText"]["summary"]);
$("#url").html(data["responseText"]["url"]);
}
});
The data being returned is encoded in JSON by the server (C#).
Obviously, data["responseText"]["fieldName"] isn't doing the trick. I could do splits and whatnot but that would mean that if the format changes, I'd need to make sure that the code above keeps up with the changed shape of the data.
How can I say something as simple as data["responseText']["fieldName"] to get the value out of that key?

i think you need to parse json first. look at the api.jquery.com/jquery.parsejson
// data = '{ "name": "John" }'
var obj = jQuery.parseJSON( data );
console.log( obj.name);
// result will be "John"
P.S. also better use 'succes' instead 'complete', you can read about this here Difference between .success() and .complete()?
success: function(data) {
console.log("response is good", data);
},
error: function (){
console.log("something is went wrong");
}

try using like this:
complete: function (data) {
var data=JSON.parse(data);
$("#name").html(data.responseText.name);
$("#email").html(data.responseText.email);
$("#photo").html(data.responseText.photo);
$("#summary").html(data.responseText.summary);
$("#url").html(data.responseText.url);
}
to get only correct response use success.

jSON tree search with jQuery, error

I have been using code from other questions on stackoverflow such as here and here.
I get the error Uncaught TypeError: Cannot read property 'length' of undefined that I can see in the developer console when I try to run my function. This error is within the jQuery file itself supposedly, not in my code. (I know ofc it is still my own error somewhere).
Here is the code I'm trying to execute:
function populate_api(){
var json = (function () {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': "test.txt",
'dataType': "json",
'success': function (data) {
json = data;
}
});
return json;
})(); //^-from SOflow: https://stackoverflow.com/questions/2177548/load-json-into-variable
//Put the JSON into a variable ---^
$.each(json.result.matches.players, function(i, v){
if (v.account_id == 38440257) {
alert(v.hero_id);
return;
}
}); //use variable to run a search on the JSON tree --^
}
The file itself with the Json in has quite a lot of info, but this is the small area at the top of the file I've been testing with:
{
"result": {
"status": 1,
"num_results": 10,
"total_results": 500,
"results_remaining": 490,
"matches": [
{
"match_id": 514348401,
"match_seq_num": 468628758,
"start_time": 1392061295,
"lobby_type": 7,
"players": [
{
"account_id": 38440257,
"player_slot": 0,
"hero_id": 42
},
...
To quickly summarise again. I am searching for the "hero_id" where the account ID is 38440257 within the matches tree.

It's because json.result.matches.players is undefined and jQuery.each() doesn't have any checks for the first argument being undefined, it instead assumes you're passing it something valid that it can access the length property of.
In your JSON json.result.matches is an array of objects (each one representing a match), and each of those objects has a players property; the array itself does not have a players property. You need to iterate through each of the matches first, then through each of its players:
$.each(json.result.matches, function(index, match) {
$.each(match.players, function(i, v) {
// code here
});
});
Alternatively just check the players for a particular match (in this case, the first one):
$.each(json.result.matches[0].players, function(i, v) {
// code here
});
You should also move away from synchronous AJAX calls (such a ridiculous notion...) and instead call functions with your data processing logic from the success callback function, passing the JSON in.

You can always check if json is undefined before using it, like this:
if (typeof json != 'undefined') {
// Do things with json
}
And you could wrap it in your success callback, and check if data is defined before using it, skipping the return json part all together:
function populate_api() {
$.ajax({
'async': false,
'global': false,
'url': "test.txt",
'dataType': "json",
'success': function (data) {
if (typeof data != 'undefined') {
$.each(data.result.matches, function (i, v) {
v.players.forEach(function(player){
if (player.account_id == 38440257) {
alert(player.hero_id);
}
});
});
}
}
});
}

You are getting the json variable value outside of the "success" function, so it will execute before the ajax call has ended. Try changing this way:
'success': function (json) {
return json;
}
});

Pass objects in ajax request

I need to pass objects in ajax request in order to "PUT" files or data to my rest service. How can i do it? Thank you.
update
i have this code:
var invoice = {};
invoice.POSWorkstationID = "POS7";
invoice.POSClerkID = "admin";
invoice.CustomerName = "Alice in Wonderland Tours";
invoice.IsFreightOverwrite = true;
should i do this:
parameter = "{BillToCode:"+invoice.CustomerName+",POSWorkstationID:"+invoice.POSWorkstationID+",POSClerkID:"+invoice.POSClerkID+",IsFreightOverwrite:"+invoice.IsFrieghtOverwrite+"}";
and this:
data: JSON.stringify(parameter),

Normally, you can use jquery to do this may be like this:
$.ajax(
{
type: "PUT",
dataType: "json",
data:POSTData,
url: 'www.youurlhere.com/path',
complete: function(xhr, statusText)
{
switch(xhr.status)
{
//here handle the response
}
}
});
POSTData is the data in json format that u supply to the rest, you can turn an object into a json format by simply pushing the attributes but respecting JSON Format syntax

Take a look at jQuery post http://api.jquery.com/jQuery.post/
you have few options there:
$.post("test.php", $("#testform").serialize());
$.post("test.php", { name: "John", time: "2pm" } );

The best way to communicate client and server side is (IMHO) JSON.
You could serialize your object into json format, with this lightweight library =>
http://www.json.org/js.html
Look for stringify method.