Soy bastante nuevo con JS, no tanto con la programación en general (C++, Python...) El objetivo que tengo es bastante básico pero no encuentro una solución simple y elegante a mi problema. Me gustaría tener una sola página html con un encabezado + una tabla. Esta tabla debería mostrar los datos json a los que llego desde una API 3p existente.

Lo que necesito que haga mi código

1. Ejecutar al cargar la página html (sin usar un botón)> Yo uso <script...>
2. El código debería comenzar obteniendo los datos de la API (yo uso Axios)
3. Ejecute una función de formato (para cambiar json multicapa a una matriz de objetos clave: valores)
4. Actualice la página de visualización (usando vue JS)

Donde estoy ahora El código comienza al cargar> OK El código obtiene los datos usando axios> OK (casi) ejecuta la función de formateo> NO OK ya que esta función comienza antes de que termine el final de la función de obtención de axios

La forma en que me gustaría estructurar mi código: (pseudocódigo) index.js

 const formattedDataArray = []; const unformattedData; function getAPIData() { use axios to get data; return unformattedData;} function formatData() { transform unformatedData;} function updateHTMLWithData() { update html using viewJS;} /*start execution here*/ unformattedData = getAPIData(); formatedData = formatData(); updateHTMLwithData();

La función getAPIData funciona La función transformData funciona PERO... debido al tiempo que se tarda en obtener los datos del servidor, la función transformData() se ejecuta antes del final de la función getAPIData() (verifiqué con mucha console.log() )

Aquí está mi código. ¿Podría indicarme la dirección correcta como si estuviera hablando con un niño de 3 años? ;) Gracias

 let jsonData = []; const formattedData = []; async function getAPIData() { console.log('Start getAPIData'); // fetch data from a url endpoint const data = await axios.get('https://myurl.domain/api', { headers: { crossDomain: true, 'app-id' : 'won't tell', 'app-secret': 'won't tell either' } }); console.log(data.data); console.log('End getAPIData'); return data; } function formatData() { console.log('Sart formatData'); /* do relevant stuff here with jsonData to formattedData*/ console.log('End formatData'); } /*main executing here*/ console.log('Start Main Code'); jsonData = getAPIData(); console.log('After getAPIDate'); formatData(); console.log(formattedData); console.log('Fin du script');