function near_home(lat,long,miles) {
var url = "api_url";
var places = [];
$.getJSON(url, function(data) {
$.each(data['results'], function(i, place) {
places.push(place);
});
console.log(places);
});
console.log(places);
return places;
}
So the first console.log() will return the desired objects. But the second console method results in null data. I've rewritten this thing a few times over and can't seem to find reason for this madness. What am I missing?
AJAX requests are asynchronous. You need to execute all following code in a callback.
A possible solution would be this:
function near_home(lat,long,miles,cb) {
var url = "api_url";
var places = [];
$.getJSON(url, function(data) {
$.each(data.results, function(i, place) {
places.push(place);
});
cb(places);
});
}
When using the function, call it like this:
near_home(lat, long, miles, function(places) {
// your code using the returned array
});
The getJSON() method is asynchronous so places will not have been filled at the second console.log-statement.
Related
I have a list of items being stored in an array. For each item in the array, I need to make an API request and add some of the data that comes back into another array so that I can perform operations on it later.
I think the issue is that my get request is asynchronous, and as a result the data is not necessarily loaded when I am trying to add it to the array, but I thought that's what .then was supposed to cover.
var cardRequestList = ["Scapeshift","Ghostform", "Daybreak Chaplain"]
var url = "https://api.magicthegathering.io/v1/cards?name=%22";
var cardInfo =[];
for (var cardName in cardRequestList){
var results = getCard(cardRequestList[cardName]);
cardInfo.push(results);
}
console.log(cardInfo); // results should come back here
function getCard(cardName){
var cardUrl = url.concat(cardName,"%22");
$.get(cardUrl).then(
function(data) {
var temp = [data.cards[0].name,data.cards[0].printings]
return temp;
}, function() {
alert( "$.get failed!" );
}
);
}
then() only works for the specific request it's invoked on.
To solve the issue you have you could make your requests in a loop, adding the jqXHR object returned from those calls to an array which you can then apply to $.when() to execute some other logic once all the requests have completed.
Within the requests themselves you need to add the returned data to an array as you cannot return anything from an async call.
With all that said your code would look something like this:
var cardRequestList = ["Scapeshift", "Ghostform", "Daybreak Chaplain"]
var url = "https://api.magicthegathering.io/v1/cards?name=%22";
var cardInfo = [];
var requests = cardRequestList.map(function(cardName) {
return getCard(cardName);
});
function getCard(cardName) {
var cardUrl = url.concat(cardName, "%22");
return $.get(cardUrl).then(function(data) {
cardInfo.push([data.cards[0].name, data.cards[0].printings]);
}, function() {
alert("$.get failed!");
});
}
$.when.apply($, requests).done(function() {
// all requests finished and cardInfo has been populated, place logic here...
console.log(cardInfo);
});
This is the code i am struggling with:
$(document).ready(function () {
var dataSets = [];
getSensorIDs().done(function (result) {
var sensorIDs = jQuery.parseJSON(result);
$.each(sensorIDs, function (index, value) { //loop through each id
getDataBySensorID(value.id).done(function (res) {
var temperatureData = jQuery.parseJSON(res);
var dataPoints = [];
$.each(temperatureData, function (index, value) {
dataPoints.push({
x: index
, y: value.value
});
})
dataSets.push(buildDataset(dataPoints, 1));
alert("Pushed something.");
});
});
alert("Drawed something.");
drawChart(dataSets);
})
});
The problem is: Drawed something happens ahead of Pushed something even though the program flow doesn't like look it would. I thought i fixed the problem of ajax (it's asynchron) with .done() but it doesn't seem like that. What would be a proper fix for this problem?
It is working exactly as it should because the "pushed something" code is in a NESTED AJAX request's done callback. That will be sometime in the future. And so, the JavaScript engine continues on processing the rest of the code, which includes "Drawed something" in the top-level AJAX request next, so that happens.
At some point in the future, the AJAX call will complete and the done callback will fire and then you will get "pushed something".
// 1. When the document is ready...
$(document).ready(function () {
var dataSets = [];
// 2. Make the AJAX call, BUT DONE RUN .done YET!
getSensorIDs().done(function (result) {
var sensorIDs = jQuery.parseJSON(result);
// loop through each id
$.each(sensorIDs, function (index, value) {
// 3. As part of the first AJAX call, make a SECOND one
getDataBySensorID(value.id).done(function (res) {
var temperatureData = jQuery.parseJSON(res);
var dataPoints = [];
$.each(temperatureData, function (index, value) {
dataPoints.push({
x: index
, y: value.value
});
});
// 5. The nested call finishes last
dataSets.push(buildDataset(dataPoints, 1));
alert("Pushed something.");
});
});
// 4. This runs first because the first AJAX call is finishing
// before the nested one (above)
alert("Drawed something.");
drawChart(dataSets);
});
});
I need to call an async function (with loop) for multiple values and wait for those results. Right now I'm using the following code:
(function(){
var when_done = function(r){ alert("Completed. Sum of lengths is: [" + r + "]"); }; // call when ready
var datain = ['google','facebook','youtube','twitter']; // the data to be parsed
var response = {pending:0, fordone:false, data:0}; // control object, "data" holds summed response lengths
response.cb = function(){
// if there are pending requests, or the loop isn't ready yet do nothing
if(response.pending||!response.fordone) return;
// otherwise alert.
return when_done.call(null,response.data);
}
for(var i=0; i<datain; i++)(function(i){
response.pending++; // increment pending requests count
$.ajax({url:'http://www.'+datain[i]+'.com', complete:function(r){
response.data+= (r.responseText.length);
response.pending--; // decrement pending requests count
response.cb(); // call the callback
}});
}(i));
response.fordone = true; // mark the loop as done
response.cb(); // call the callback
}());
This isn't all very elegant but it does the job.
Is there any better way to do it? Perhaps a wrapper?
Async JS to the rescue (for both client-side and server-side JavaScript)! Your code may look like this (after including async.js):
var datain = ['google','facebook','youtube','twitter'];
var calls = [];
$.each(datain, function(i, el) {
calls.push( function(callback) {
$.ajax({
url : 'http://www.' + el +'.com',
error : function(e) {
callback(e);
},
success : function(r){
callback(null, r);
}
});
});
});
async.parallel(calls, function(err, result) {
/* This function will be called when all calls finish the job! */
/* err holds possible errors, while result is an array of all results */
});
By the way: async has some other really helpful functions.
By the way 2: note the use of $.each.
You can use the jQuery Deferred object for this purpose.
var def = $.when.apply(null, xhrs) with xhrs being an array containing the return values of your $.ajax() requests. Then you can register a callback def.done(function() { ... }); and use the arguments array-like object to access the responses of the various requests. to properly process them, remove your complete callback and add dataType: 'text' and use the following callback for done():
function() {
var response = Array.prototype.join.call(arguments, '');
// do something with response
}
I have a JSON file that contains the following:
[{name:joe,number:4},{name:ralph,number:76}]
Simply put, I'm trying to create a function that returns that as an array:
function createArray(){
x = $.getJSON("/names.json", function(json) {
var myArray = [];
$.each(json, function() {
myArray.push(json);
});
return myArray;
});
return x;
}
This is not working, I'm not sure what part of it doesnt make sense
You are doing an asynchronous request. $.getJSON does not return the result of your callback.
You need to pass a callback into your createArray function. Also, if your JSON data is already an array, you don't need to process the response data.
function createArray(cb){
$.getJSON("/names.json", cb);
}
So for example you'd change this:
var myArray = createArray();
// Process myArray
into this:
createArray(function(myArray) {
// Process myArray
});
The problem is that you can't just assign the result of a network request. When you call getJSON, you start a network request, but after the request starts, the JS will keep running other stuff. The get the result of an asynchronous request, you need to use a callback that will process that data and do something with it.
Like loganfsmyth said, you're not taking into account that $.getJSON is asynchronous, and it's not going to return what you think it is (it actually returns a jqXHR Object. Write your code to handle the asynchronous nature using closures:
function createArray(cb){
$.getJSON("/names.json", function(json) {
var myArray = [];
$.each(json, function() {
myArray.push(json);
});
cb(myArray);
});
}
createArray(function(array) {
//your array is available here
console.log(array);
}
Your keys and values should be Strings
[{"name":"joe", "number":4},{"name":"ralph", "number":76}]
and this
$.each(json, function() {
myArray.push(json);
});
should become
$.each(json, function(key, val) {
if(myArray[key] == undefined)
{ myArray[key] = new Array();
}
myArray[key].push(val);
});
What you get from 'json' is an array.
try this,
var ar = [{
"name": "joe",
"number": "4"},
{
"name": "ralph",
"number": "76" }];
alert(ar[0].name);
This would alert the name "joe".
ar[0] is the first element of the array and in your case this is an object with properties name and number. You can get/set them in normal way.
var myArray = [];
$.getJSON("/names.json", function(json) {
myarray=json;
});
NowmyArray is an array with your Objects.
You can't do that, your function will return a promise object, but never the json response itself. The response will be available from the promise only after the request is complete (which is not immediately after function return because the request is asynchronous).
Why don't you just use the json from the callback? I mean this:
function createArray(){
$.getJSON("/names.json", function(json) {
// Whatever you need to do with your json,
// do it here. This code will run after
// createArray returns. And you can't
// return anything from here, it's useless.
// Actually, you don't even need the outer
// createArray function.
});
}
My script needs to fetch several json files on https://graph.facebook.com/xxxx, and retrieve a certain field from each json, then calculate summation.
My problem is how to print out the result after all getJSON done? With below code it will prints 0. Feel free to suggest any better approaches.
var result = 0;
$.each(urls, function (i, url) {
$.getJSON(url, function (json) {
result += json.field1;
})
});
alert(result);
Using jQuery 1.5 deferred objects:
Accumulate an array of the JQXHR objects returned by $.getJSON()
var jxhr = urls.map(function(url) {
return $.getJSON(url, function(json) {
result += json.field1;
})
});
and only $.when they're all .done():
$.when.apply($, jxhr).done(function() {
alert(result);
});
NB: this will accumulate result in the order that the AJAX calls complete, not in the order they're made.
It's not working as you are printing the result straight away, remember that the code where you concatenate the result is a callback so will fire after your alert.
On each callback you'll have to check if all have finished. replace the alert() call with your processing. :)
var result = 0;
var doneCount = 0;
$.each(urls, function (i, url) {
$.getJSON(url, function (json) {
doneCount++;
result += json.field1;
if (doneCount == urls.length) {
alert(result);
}
})
});