I want to solve once for all the problem of looping ajax request and passing 'index' into it (the problem below):
for (var index = 0; index < 4; index++) {
$.ajax({
url: 'http://graph.facebook.com/',
dataType: 'jsonp',
success: function(json) {
console.log(json[index]);
}
});
}
in this code within every 'success' callback 'index' will be 3. But I want to invoke callback with 0, 1, 2, 3. Many people are placing ajax request within a closure:
for (var index = 0; index < 4; index++) {
(function(index){$.ajax({
url: 'http://graph.facebook.com/',
dataType: 'jsonp',
success: function(json) {
console.log(json[index]);
}
});
})(index);
}
what in my opinion is a huge mistake - what if the request won't be there at the time? Than 'json' variable will be 'undefined'.
Does any of You guys have some proper way to solve this issue?
Actually the JSON will not be undefined.
If you would break the following code apart it would become more clear:
So instead of this:
for (var index = 0; index < 4; index++) {
(function(index){$.ajax({
url: 'http://graph.facebook.com/',
dataType: 'jsonp',
success: function(json) {
console.log(json[index]);
}
});
})(index);
}
...you can also write it like this:
function myFunction(index) {
$.ajax({
url: 'http://graph.facebook.com/',
dataType: 'jsonp',
success: function(json) {
console.log(json[index]);
}
});
}
// and call it like this
for (var index = 0; index < 4; index++) {
myFunction(index);
}
As you might already see, how are any of those two variables going to change by another call while they are defined inside the function?
(On a side note: I think it actually looks cleaner this way)
Related
Here is my code neat and clean
as you can see i have make a for loop and passing a[i] variable to the api
now what is happeing is for loop is is not hitting the api and going back to the loop. any solution?
var a = ['a1','a2','a3','a4','a5','a6','a7','a8','a9','a10','a11','a12','a13','a14','a15','a16','a17','a18','a19','a20','a21','a22','a23','a24','a25','a26','a27','a28','a29','a30','a31','a32','a33','a34','a35','a36', 'a37']
console.log(a)
for(var i = 0; i <= a.length; i++){
$http({
url: '/MyApp/getIt?urlofpage=https://www.example.com/alpha/'+a[i]+'.html',
method: "POST",
}).success(function(response){
console.log(a[i]);
console.log(response);
});
}
It looks like you are trying to use jQuery ajax to get the API called.
If this is the case, you should use $.post or $.ajax:
var a = ['a1','a2','a3','a4', ...];
console.log(a);
for(var i = 0; i <= a.length; i++){
$.ajax({
url: '/MyApp/getIt?urlofpage=https://www.example.com/alpha/'+a[i]+'.html',
method: "POST",
success: function(response) {
console.log(a[i]);
console.log(response);
}
});
}
Otherwise, please share the $http function.
You can't use the for loop for the database call since it is asynchronous.Have a look on following code.
var a = ['a1','a2','a3','a4', ...];
var i=0;
checkArrayLength();
function checkArrayLength(){
if(i<a.length){
makeRequest(a[i]);
}
}
function makeRequest(param1){
$.ajax({
url: '/MyApp/getIt?urlofpage=https://www.example.com/alpha/'+param1+'.html',
method: "POST",
success: function(response) {
console.log(a[i]);
i=i+1;
console.log(response);
checkArrayLength();
},
error:function(response) {
console.log(a[i]);
i=i+1;
console.log(response);
checkArrayLength();
}
});
}
I have an array of values (myarray), that I want to iterate through and run an AJAX request on each iteration. I've put each ajax request inside another array (requests), so that I can call an alert when all AJAX requests have completed:
Like so:
var requests = [];
for (i = 0; i < myarray.length; ++i) {
requests.push($.ajax({
url: 'anotherurl?=' + myarray[i],
dataType: "JSONP",
success: function (data) {
array_of_results.push(data);
}
}));
}
$.when.apply($, requests).done(function() {
alert('complete');
});
All the results are collected in array_of_results. However due to the AJAX requests taking different lengths of time to complete, this array doesn't have the results in the original order.
Is there any way to order this array?
I hope I've made sense. I appreciate this is quite convoluted.
Have you tried the following? I think this should work. All the responses should be available, in order, in the success function of the when().
var requests = [];
for (i = 0; i < myarray.length; ++i) {
requests.push($.ajax({
url: 'anotherurl?=' + myarray[i],
dataType: "JSONP"
}));
}
$.when.apply($, requests).done(function() {
array_of_results = arguments;
alert('complete');
});
Instead of using a loop consider using recursion. Here's a complete example:
var myArray = [
"somevalue",
"some other value",
"another value"
];
var i = myArray.length;
var responses = [];
function doRequests(){
i--;
$.ajax({
url: "myurl.php",
data: {paramname: myArray[i]}
}).done(function(response){
responses.push(response);
if(i>0) doRequests();
else{
// all requests sent.. do stuff
// responses array is in order
console.log(responses);
alert("all done!");
}
});
}
You can add a custom attribute to your $.ajax object, setted to your i var.
var requests = [];
for (i = 0; i < myarray.length; ++i) {
requests.push($.ajax({
url: 'anotherurl?=' + myarray[i],
dataType: "JSONP",
myCustomIndex: i,
success: function (data) {
array_of_results[this.myCustomIndex] = data;
}
}));
}
$.when.apply($, requests).done(function() {
alert('complete');
});
JavaScript is really permisive, if you attribute a value to an array out of its bounds (higher than 0), the size of the array will be automaticaly set to the right amount.
How about using jquery.ajax call with async setting as false. This way the reaponse will be in order as requested...
Building on #Christo's answer - using arrays map function
var array_of_results = [];
var requests = myarray.map(function(item, index) {
return $.ajax({
url: 'anotherurl?=' + item,
dataType: "JSONP",
success: function (data) {
array_of_results[index] = data;
}
}
});
...
some of the resign i cant take value from ajax, where json data is comming like that
request
i wan to take value from ReviewPoint and after that manupulate some other jquery in ajax success block.
but problem is i cant take value when i trying to print value using alert box it showing "undefine"
my jquery code is
var productid = $("#productid").text();
$.ajax({
url: '/ProductService/CheckUserExistFirst.asmx/rating',
method: 'GET',
// dataType: 'json',
data: { productid: productid },
//contentType: "application/json; charset=utf-8",
success: function (data) {
alert(data.d.ReviewPoint);
if (data.ReviewPoint < 1) {
$("#rat-1").removeClass("fa fa-star-o");
$("#rat-1").addClass("fa fa-star");
}
if (data.ReviewPoint < 2) {
$("#rat-1,#rat-2").removeClass("fa fa-star-o");
$("#rat-1,#rat-2").addClass("fa fa-star");
}
if (data.ReviewPoint < 3) {
$("#rat-1,#rat-2,#rat-3").removeClass("fa fa-star-o");
$("#rat-1,#rat-2,#rat-3").addClass("fa fa-star");
}
if (data.ReviewPoint < 4) {
$("#rat-1,#rat-2,#rat-3,#rat-4").removeClass("fa fa-star-o");
$("#rat-1,#rat-2,#rat-3,#rat-4").addClass("fa fa-star");
}
if (data.ReviewPoint < 5) {
$("#rat-1,#rat-2,#rat-3,#rat-4,#rat-5").removeClass("fa fa-star-o");
$("#rat-1,#rat-2,#rat-3,#rat-4,#rat-5").addClass("fa fa-star");
}
},
error:function(err){
alert(err);
}
})
The response is an array so you need to access it by index using array notation. There is also no d property in the response. Try this:
var reviewPoint = data[0].reviewPoint;
Also note that you can DRY up your code by giving all the #rat-N elements a common class. You can then use eq() and prevAll() to set the classes on the required elements. Try this:
success: function (data) {
var reviewPoint = data[0].reviewPoint;
$('.rat').eq(reviewPoint).prevAll('.rat').addBack().removeClass('fa-star-o').addClass('fa-star');
});
How can I use an external variable i inside the Ajax success?
For example:
for (i = 0; i < 3; ++i) {
$.ajax({
type: "POST",
data: "user=132",
url: "../php/order_ajax.php",
success: function(data){
$('.obj' + i).html(data);
}
});
}
you should close it in for example anonymous function. It is because ajax call is asynchronous and I bet you that loop is finished even before the first ajax call is done which means that "i" will be 4 by that time.
var user = 1;
for (i = 0; i < 3; ++i) {
(function(i){
$.ajax({
type: "POST",
data: "user="+ user,
url: "../php/order_ajax.php",
success: function(data){
$('.obj' + i).html(data);
}
});
})(i);
}
for (var i = 0; i < 3; i++){
$.ajax({
url: "ajax.php",
success: function(data){
alert(i);
}
});
}
I need a solution to get alerts with "0", "1" and "2". Аt this time of course I see 3 alerts with "3".
You need to put a closure around your $.ajax() call.
for (var i = 0; i < 3; i++){
(function (loop_var) {
$.ajax({
url: "ajax.php",
success: function(data){
alert(loop_var);
}
});
})(i);
}
Currently it is outputting 3 as my the time the Ajax returns the value of i is indeed 3.
Use an anonymous function wrapper around the code to create a closure that will keep the value until the asynchronous response arrives:
for (var i = 0; i < 3; i++){
(function(i){
$.ajax({
url: "ajax.php",
success: function(data){
alert(i);
}
});
})(i);
}
Pass the i value to the ajax.php page as a parameter.
The ajax.php page has to return i to the calling page. So let the ajax.php page return i.
You can use json objects or a trivial pipe-separated string to store returning values from ajax.php.
for (var i = 0; i < 3; i++){
$.ajax({
data: {par: i},
url: "ajax.php",
success: function(data){
//data is a pipe-separated string
var cnt = data.split("|")[0];
alert(cnt);
}
});
}