How to loop through array which is dependent on an API call

Question

The array I want to loop over contains elements, however when I do loop over it, no elements are present

// Checks ingredient ruling
$("#check-btn").click(() => {
  let accumulativeResults = [];

  ingredientsToCheck.forEach((e) => {
    $.get(`/ingredients/${e}`, (ruling) => {
      let result = [];

      result.push(e);
      result.push(ruling);
      accumulativeResults.push(result);
      displayResults([result]);
    });
  });

  getRuling(accumulativeResults);
  switchDisplays();
});

// Returns final ruling of all ingredients combined
function getRuling(ingredients) {

  console.log(ingredients); // Console log 1

  let rulings = [];
  let haramCnt = 0;
  let halalCnt = 0;
  let unknownCnt = 0;

  ingredients.forEach((e) => {
    rulings.push(e[1]);
  });

  console.log(rulings); // Console log 2
}

Assuming I enter gibberish, the first console log returns the following:

0: (2) ["tbeher", "No match"]
1: (2) ["tbehererher", "No match"]
length: 2
__proto__: Array(0)

But for some reason at the second console log, I expect "No match" twice but I get an empty array instead.

length: 0
__proto__: Array(0)

I'm kind of confused, I didn't do anything to the array. I just looped over it, and for every element (which is a 2 element array) I add the second element to the rulings array.