CODEWITHSUNDEEP
javascriptphpjqueryajax
Dasmond
Dasmond

Reputation: 43

How to push values into array by AJAX response?

When I load my page I try to insert values from my database into JS array using AJAX, and after that to get a random value.

var arrayen = [];
$.ajax({
	type: 'POST',
	url: 'getEnglishWords.php',
	success: function(words){
		words = JSON.parse(words);
		for(var i = 0; i < 50; i++) {
			arrayen.push(words[i].en);
		}
	},error: (error) => {
		 console.log(JSON.stringify(error));
	}
});

console.log(arrayen.length);

When I run the page, its insert the values into the array (I checked in chrome console), but - the console.log I have added in the bottom print 0. its look like the console.log run before the AJAX run and makes the problem.

Edit: I try to split the arrayen[12] into own array. its mean every charater to be in array row. so I do this:

console.log(arrayen);
var array = arrayen[12].split('');

results: enter image description here

and I got error: Cannot read property 'split' of undefined

Upvotes: 1

Views: 6166

Answers (5)

suneeth
suneeth

Reputation: 147

use jquery library's each function.

$.each(words, function(index, value) {
    arrayen.push(value);
});

Upvotes: 1

Sayed Mohd Ali
Sayed Mohd Ali

Reputation: 2254

var arrayen = [];
$.ajax({
    type: 'POST',
    url: 'getEnglishWords.php',
    success: function(words){
        words = JSON.parse(words);
        for(var i = 0; i < 50; i++) {
            arrayen.push(words[i].en);
        }
    findArrayLength(arrayen);
    },error: (error) => {
         console.log(JSON.stringify(error));
    }
});

function findArrayLength(x) {
console.log(x.length);
}

AJAX is asynchronous and doesn't lock up the browser. If you fire an Ajax request, the user can still work while the request is waiting for a response. When the server returns the response, a callback runs to handle it.

You can make the XMLHttpRequest synchronous if you want, and if you do, the browser locks up while the request is outstanding (so most of the time this is inappropriate)

Upvotes: 1

vijayscode
vijayscode

Reputation: 2015

This behavior is because you are using asynchronous function which is $.ajax(). That is why your console.log(arrayen.length) statement is running first then you are getting the data.

To run your program add console statement inside success callback. It will make sure that the length is going to be printed once you get the data from the server.

What is ajax?

Upvotes: 1

Red Bottle
Red Bottle

Reputation: 3080

Success function in ajax is a function to be run when the request succeeds. Therefore if you want your log your success results then put the console.log within your success function like this:

$.ajax({
type: 'POST',
url: 'getEnglishWords.php',
success: function(words){
    words = JSON.parse(words);
    for(var i = 0; i < 50; i++) {
        arrayen.push(words[i].en);
    }
    console.log(arrayen.length);

},error: (error) => {
     console.log(JSON.stringify(error));
}
});

Upvotes: 1

4b0
4b0

Reputation: 22323

Put your console.log(arrayen.length); inside done like below. 

    var arrayen = [];
    $.ajax({
        type: 'POST',
        url: 'getEnglishWords.php',
        success: function(words){
            words = JSON.parse(words);
            for(var i = 0; i < 50; i++) {
                arrayen.push(words[i].en);
            }
        },error: (error) => {
             console.log(JSON.stringify(error));
        }
    }).done(function(results) {
        console.log("done : " + arrayen.length);           
});

Upvotes: 0

Related Questions