I'm trying to read a json file from the server using jQuery in order to use that data to create specific functions on the site. The json file is an array of objects.

function populate() {
  var dataArr = [];
  $.getJSON('http://localhost/teamproject/item_data.json', function(data) {
    for (let i = 0; i < data.length; i++) {
      dataArr.push([data[i].name,
                    data[i].price,
                    data[i].postage,
                    data[i].itemID,
                    data[i].start,
                    data[i].end]);
                    
    }
    return dataArr;
  });
}

And then

function filterTime(change) {
  var selectedValue = change.value;
  let data = populate();

  console.log(data);
}

The console.log(data); prints undefined. How can I return this array correctly in the populate() function?