How to push values into array by AJAX response?

Question

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

Red Bottle · Accepted Answer · 2019-01-18 05:51:12Z

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

answered Jan 18, 2019 at 5:51

Red Bottle

3,1208 gold badges34 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Dasmond Over a year ago

Its work fine, but I have a question. I edit my answer please see.

Red Bottle Over a year ago

@Dasmond Have you made sure you have some data in your array before performing your split?

Dasmond Over a year ago

yes. before I do the split I make console.log to the array

Red Bottle Over a year ago

@Dasmond Share that too if you can. Your result.

Dasmond Over a year ago

Oh I'm sorry I bothered you. I found the problem, its was in another function. thanks for all!

|

vijayscode · Accepted Answer · 2019-01-18 05:54:41Z

1

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?

edited Jan 18, 2019 at 5:54

answered Jan 18, 2019 at 5:49

vijayscode

2,0255 gold badges24 silver badges38 bronze badges

Comments

Sayed Mohd Ali · Accepted Answer · 2019-01-18 05:57:09Z

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)

suneeth · Accepted Answer · 2019-01-18 06:15:42Z

1

use jquery library's each function.

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

answered Jan 18, 2019 at 6:15

suneeth

1471 gold badge3 silver badges10 bronze badges

Comments

4b0 · Accepted Answer · 2019-01-18 05:49:18Z

0

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

answered Jan 18, 2019 at 5:49

4b0

22.4k30 gold badges97 silver badges143 bronze badges

Collectives™ on Stack Overflow

How to push values into array by AJAX response?

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related