Home > Software engineering >  Not able to push data in an empty array, I'm getting that data from an external api, using http
Not able to push data in an empty array, I'm getting that data from an external api, using http

Time:05-17

var https = require("https");
const arr = [];
for (let i = 1; i < 26; i  ) {
  https.get(
    `https://jsonmock.hackerrank.com/api/countries?page=${i}`,
    (res) => {
      res.on("data", (data) => {
        JSON.parse(data).data.map((info, i) => {
          let { name } = info;
          arr.push(name);
          console.log(name);
        });
      });
    }
  );
}

console.log(arr);

when I'm just logging JSON.parse(data) I'm getting the required data on my console

but When I'm trying to push it into an array it's not happening instead it logs an empty array onto the console

really need to know the reason as I'm stuck with this for 3 days now

CodePudding user response:

Your issue is that the callback to https.get - i.e. (res) => is called asynchronously - therefore, console.log(arr); is executed before the 25 https.get requests are even made - you'll see that arr.push does actually work if you console.log(arr); where you console.log(name); - so your assumption that you are not able to push is incorrect

You are pushing to the array, you just never console.log the array when it has data in it

I guess one way I can suggest doing this with rather old version of Node.js you are using (14.16.0) is as follows

var https = require("https");
function fn(callback) {
    const result = [];
    let done = 0;
    for (let i = 1; i < 26; i  ) {
        https.get(`https://jsonmock.hackerrank.com/api/countries?page=${i}`, (res) => {
            res.on("data", (data) => {
                JSON.parse(data).data.map((info) => {
                    let { name } = info;
                    result.push(name);
                    console.log(name);
                });
                // keep track of how many requests have "completed"
                done = done   1;
                // when all are done, call the callback
                if (done === 25) {
                    callback(result);
                }
            });
        });
    }
}
fn(arr => { // here is where arr is populated, nowhere else
    console.log(arr);
});

Note, arr will only be accessible inside the callback - you will NOT be able to access arr at the top-level like you want - the only possible way you could is to use a version of Node.js that supports top-level await - and convert the code to use Promise (which is a trivial task)

Not sure it's important, but there's no guarantee that the names in arr will be in the correct order ... i.e. the results from iteration 3 may be pushed after iteration 4, for example, since that's the nature of network requests, there is no guarantee when they will finish


As an aside. If you were to use the latest (18.1 at the time of writing) version of node.js - the above can be written like

const promises = Array.from({length:25}, async (_, i) => {
    const res = await fetch(`https://jsonmock.hackerrank.com/api/countries?page=${i 1}`);
    const data = await res.json();
    return data.map(({name}) => name);
});
const arr = (await Promise.all(promises)).flat(2);
console.log(arr);

Things of note are

  1. native fetch - which makes networks requests simple compared to regular node.js methods
  2. top-level await - so, you can use arr at the top-level of the code
  3. 6 lines of code vs over 20
  • Related