Pushing item into an array and printing it give me an empty array

Question

I've read answer from Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference however I still do not fully understand how to remedy the problem.

I do not understand what I am doing wrong right now, I want to add each item and append each item into an array and at the end, console log it.

// Loop through each cities in canada and perform API call

var Cities = [];
var AQI = [];
canadian_cities.forEach(function(city){
    var url = `https://api.waqi.info/feed/${city}/?token=${api_key}`

    // call api
    d3.json(url).then(function(response){
        // ignore calls with status:error => no station in that city
        if (response.status == "ok"){
            console.log(response);

            // Create array of Cities, AQI,
            Cities.push(city);
            // console.log(Cities);
        };
    });

});
console.log(Cities);

canadian_cities is an array that have 100 largest cities in canada.

How do I push each city if response.status == "ok" to Cities array and print full list at the end of forEach loop?