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

vijayscode · Answer 1 · 2019-01-18T05:54:41.670

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 '19 at 05:54

answered Jan 18 '19 at 05:49

vijayscode

1,905
4
21
37

score 1 · Accepted Answer · answered Jan 18 '19 at 05:51

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 '19 at 05:51

Red Bottle

2,839
4
22
59

Its work fine, but I have a question. I edit my answer please see. – Dasmond Jan 18 '19 at 05:58
@Dasmond Have you made sure you have some data in your array before performing your split? – Red Bottle Jan 18 '19 at 06:03
yes. before I do the split I make `console.log` to the array – Dasmond Jan 18 '19 at 06:08
@Dasmond Share that too if you can. Your result. – Red Bottle Jan 18 '19 at 06:09
Oh I'm sorry I bothered you. I found the problem, its was in another function. thanks for all! – Dasmond Jan 18 '19 at 06:19
@Dasmond kk. CHeers! – Red Bottle Jan 18 '19 at 06:20

score 1 · Answer 3 · answered Jan 18 '19 at 05:57

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)

score 1 · Answer 4 · answered Jan 18 '19 at 06:15

1

use jquery library's each function.

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

answered Jan 18 '19 at 06:15

suneeth

127
3
10

score 0 · Answer 5 · answered Jan 18 '19 at 05:49

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

How to push values into array by AJAX response?

5 Answers5