difficulty pushing data to an array during async request

Question

In the following code, I'm wondering why my console.log(dataArray) displays an empty array. I think the console.log may be called before the ajax request is finished pulling data. If this is the case, is there any way to wait for the ajax request to finish before calling console.log ?

var dataArray = [];

var gdpAPI = "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json";
  $.getJSON( gdpAPI, {
    format: "json",
    async: false

  })
    .done(function( data ) {


    yearsData = data['data']


    $.each(yearsData, function(i){
       dataArray.push(yearsData[i]);


    })


 });

 console.log(dataArray);

Thank you in advance. Wyatt

adriancarriger · Accepted Answer · 2016-11-27 06:01:46Z

1

Async Code

You're right that the console.log was called before the request finished. Just put your log statement inside of the .done section and it will work.

Working Fiddle

var dataArray = [];

var gdpAPI = "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json";
$.getJSON(gdpAPI, {
    format: "json",
    async: false

  })
  .done(function(data) {


    yearsData = data['data']

    $.each(yearsData, function(i) {
      dataArray.push(yearsData[i]);


    })
		console.log('length: ' + dataArray.length,dataArray);

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

answered Nov 27, 2016 at 6:01

adriancarriger

3,0003 gold badges22 silver badges27 bronze badges

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

2 Comments

wyattwade Over a year ago

Simple and accurate explanation, I'll have to keep this in mind. Thanks adriancarriger

adriancarriger Over a year ago

Glad it helped!

GraveyardQueen · Accepted Answer · 2016-11-27 06:02:35Z

1

You would have to use a callback function to get the data out of the function and manipulate the data where sendMethedata is your callback function

var dataArray = [];

var gdpAPI = "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json";
  $.getJSON( gdpAPI, {
    format: "json",
    async: true

  })
    .done(function( data ) {


   var yearsData = data['data']


    $.each(yearsData, function(i){
       dataArray.push(yearsData[i]);


    });
    sendMethedata(dataArray);

 });

function sendMethedata(data){
console.log(data)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Nov 27, 2016 at 6:02

GraveyardQueen

7691 gold badge7 silver badges17 bronze badges

Collectives™ on Stack Overflow

difficulty pushing data to an array during async request

2 Answers 2

Async Code

Working Fiddle

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Async Code

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related