So I am trying to load several instances of a lottie animation and the JSONS are on a cdn, the problem is that loading these JSONS is async, and I have to do all of that in tags.

<script>
  // the list of urls
  const urls = ["url", "url", "url", ...]

  // the function that gets each of the jsons, creates an array and returns it
  const getLottieJSONs = (urls) => {
    const lottieJSONs = [];
                  
    for (let i = 0; i < urls.length; i++) {
      $.getJSON(urls[i], (data) => lottieJSONs.push(data))
    }

    return lottieJSONs;
  }

  // creating the instances of the lotties with the retrieved data
  const createLottieInstances = (lottieContainers, lottieJSONs) => {
    const lottieInstances = [];
   
    for (let i = 0; i < lottieContainers.length; i++) {
      lottieInstances.push(bodymovin.loadAnimation({
          container: lottieContainers[i], 
          renderer: "svg", 
          animationData: lottieJSONs[i],
        })
      );
    }

    return lottieInstances;
  }

  const lottieContainers = document.querySelectorAll(".ingredients-lottie-container");
  
  // this does not have the data, before moving on to creating the instances and so it gives empty array to createLottieInstances
  const lottieJSONs = getLottieJSONs(urls); 
  const lottieInstances = createLottieInstances(lottieContainers, lottieJSONs);

  // ... other code that uses the lottie instances ...
</script>

My end goal is to have all instances loaded before I get to the code that is using them with the actual json data.