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 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:

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

• javascript
• php
• jquery
• ajax

Share Improve this question Follow edited Jan 18, 2019 at 6:11 Dasmond asked Jan 18, 2019 at 5:40 DasmondDasmond 4311 silver badge88 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

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));
}
});

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?

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)

use jquery library's each function.

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

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);           
});