Entonces, estoy tratando de cargar varias instancias de una animación de lotería y los JSONS están en un cdn, el problema es que cargar estos JSONS es asíncrono, y tengo que hacer todo eso en etiquetas.

 <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>

Mi objetivo final es tener todas las instancias cargadas antes de llegar al código que las usa con los datos json reales.