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;
}
});
Related
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"}]
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.
I am trying to get a value from a json object after making an ajax call. Not sure what I am doing wrong it seems straight forward but not able to get the data
The data that comes back looks like this
{"data":"[{\"Id\":3,\"Name\":\"D\\u0027Costa\"}]"}
The code, removed some of the code
.ajax({
type: 'POST',
url: "http://localhost:1448/RegisterDetails/",
dataType: 'json',
data: { "HomeID": self.Id, "Name": $("#txtFamilyName").val()},
success: function (result) {
console.log(result.data); //<== the data show here like above
alert(result.data.Id); //<==nothing show
},
error: function (xhr, ajaxOptions, thrownError) {
}
});
I tried in the Chrome console like this
obj2 = {}
Object {}
obj2 = {"data":"[{\"Id\":3,\"Name\":\"D\\u0027Costa\"}]"}
Object {data: "[{"Id":3,"Name":"D\u0027Costa"}]"}
obj2.data
"[{"Id":3,"Name":"D\u0027Costa"}]"
obj2.data.Id
undefined
obj2.Id
undefined
Update
The line that solved the issue as suggested here is
var retValue = JSON.parse(result.data)[0]
Now I can used
retValue.Name
to get the value
Actually, looking at this, my best guess is that you're missing JSON.parse()
.ajax({
type: 'POST',
url: "http://localhost:1448/RegisterDetails/",
dataType: 'json',
data: { "HomeID": self.Id, "Name": $("#txtFamilyName").val()},
success: function (result) {
var javascriptObject = JSON.parse(result);
console.log(javascriptObject ); //<== the data show here like above
alert(javascriptObject.Id); //<==nothing show
},
error: function (xhr, ajaxOptions, thrownError) {
}
});
I also find that doing ajax requests like this is better:
var result = $.ajax({
url: "someUrl",
data: { some: "data" },
method: "POST/GET"
});
result.done(function (data, result) {
if (result == "success") { // ajax success
var data = JSON.parse(data);
//do something here
}
});
For clarity it just looks better, also copying and pasting into different functions as well is better.
The id property is in the first element of the data-array. So, alert(result.data[0].Id) should give the desired result. Just for the record: there is no such thing as a 'JSON-object'. You can parse a JSON (JavaScript Object Notation) string to a Javascript Object, which [parsing] supposedly is handled by the .ajax method here.
The data field is just a string, you should parse it to a JSON object with JSON.parse(result.data), since data is now an array you will need to need to use an index [0] to have access to the object. Know you will be able to get the Id property.
JSON.parse(result.data)[0].Id
I am trying to retrieve data from a URL of the form http://www.xyz.com/abc.json.
I have been trying to achieve this using the $.ajax method in the following manner.
var json = (function () {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': "http://www.xyz.com/abc.json.",
'dataType': "json",
'success': function (data) {
json = data;
}
});
return json;
})();
However I am being unable to get this to run. I need to loop through the retrieved data and check for some specific conditions. This could have been achieved easily with the $.getJSon if the json data had a name to it, however the file is of the form:
[{
"name": "abc",
"ID": 46
}]
because of which I have to effectively convert and store it in a Javascript object variable before I can use it. Any suggestions on where I might be going wrong?
It looks like you will want to convert that data response to a json object by wrapping it with { } and then passing that to the json parser.
function (data) {
json = JSON.parse("{\"arr\":"+data+"}").arr;
}
Then to get your data, it would be
json[0].name //"abc"
So your question is how to convert a string to Json object?
If you are using Jquery you can do:
jQuery.parseJSON( jsonString );
So your return should be:
return jQuery.parseJSON( json );
You can read documentation here
This is the view from my browser:
{
"data": {
"request": [{
"query": "Lat 41.85 and Lon -87.65",
"type": "LatLon"
}],
"time_zone": [{
"localtime": "2012-02-14 16:05",
"utcOffset": "-6.0"
}]
}
}
Now, I am using this code to parse it:
function getTimeZone(latlong) {
jQuery(document).ready(function ($) {
$.ajax({
url: "http://www.worldweatheronline.com/feed/tz.ashx?key=[removed]&q=" + latlong + "&format=json",
dataType: "jsonp",
success: function (parsed_json) {
console.log(parsed_json.time_zone.utcOffset);
return parsed_json.time_zone.utcOffset;
},
error: function (parsed_json) {
//console.log("Error: " + parsed_json);
}
});
});
}
Every time I run the code, I am getting this error:
Uncaught TypeError: Cannot read property 'utcOffset' of undefined
Any assistance would be greatly appreciated.
View of the data being displayed to the console (only copied the part I'm interested in):
Result:
Object
data: Object
request: Array[1]
time_zone: Array[1]
0: Object
localtime: "2012-02-14 16:46"
utcOffset: "-6.0"
Actually, there are two issues:
1) to access the content, you need:
parsed_json.data.time_zone[0].utcOffset;
2) This is a bit more complex - you are using an asynchronous ajax callback - success() is not being called before your program finishes sending the ajax request and returns, and it does not return its results to the parent method.
The basically can't do it the way you want to, unless you use a synchronous fetch (a bad idea, since it'll lock up your browser until the response arrives).
Instead, take a callback parameter, which will be a function, as a parameter to your function, and call that with the result once it arrives:
i.e.
function getTimeZone(latlong, callback) {
jQuery(document).ready(function ($) {
$.ajax({
url: "http://www.worldweatheronline.com/feed/tz.ashx?key=[removed]&q=" + latlong + "&format=json",
dataType: "jsonp",
success: function (parsed_json) {
console.log(parsed_json.time_zone.utcOffset);
callback(latlong, parsed_json.data.time_zone[0].utcOffset);
},
error: function (parsed_json) {
//console.log("Error: " + parsed_json);
}
});
});
}
Then to use it:
getTimeZone(myLatLong, function(latLong, utcOffset) {
// ... do something with utcOffset here ...
});
Should be
return parsed_json.data.time_zone[0].utcOffset;
You have to look carefully at the returned JSON structure. It helps to break it up into separate lines and indent to reflect the nesting.
should it be parsed_json.data.time_zone[0].utcOffset?