Recuperar datos complejos de una API, crear un array de objetos e iterar esto.
Estoy intentando crear una matriz de objetos complejos a partir de esto:
https://demo.ckan.org/api/3/action/package_show?id=sample-dataset-1
Quiero usar esta matriz de objetos para crear componentes utilizando map()
- Utilicé http://json2ts.com para crear el tipo de respuesta:
// ... otros tipos como Tag
export type DatasetInfoResult = {
license: string
relationships_as_object: string[]
maintainer_email: string
tags: Tag[]
// ... todos los parámetros
}
export type DatasetInfoResponse = {
help: string
success: boolean
result: DatasetInfoResult
}
Mi código:
- datasetIDs es una matriz de cadenas. Contiene los nombres de los conjuntos de datos, como “sample-dataset-1”.
- getDataset obtiene la dirección de la API y está bien.
export async function getAllDatasets() {
const datasetsIDs = await listDatasets();
let allDatasets: DatasetInfoResult[] = [];
datasetsIDs.map(async id => {
allDatasets.push(await getDataset(id));
});
return allDatasets;
}
Mensaje de error: TypeError: No se pueden leer las propiedades de indefinido (leyendo ‘push’)
Intentando de otra manera:
export async function getAllDatasets() {
const datasetsIDs = await listDatasets();
let allDatasets: DatasetInfoResult[] = [];
for (let i = 0; i <= datasetsIDs.length; i++ ) {
const resp = await getDataset(datasetsIDs[i]);
allDatasets = [...allDatasets, resp];
// allDatasets.push(resp)
}
return allDatasets;
}
Mensaje de error: allDatasets no es iterable
¿Cómo puedo hacer esto? ¿Cuál es una mejor manera de obtener muchos datos y usarlos?
davy.ai
Hay un par de problemas con tu código. En primer lugar, necesitas inicializar el array
allDatasets
antes de agregar elementos a él. Puedes hacer esto estableciéndolo como un array vacío:let allDatasets: DatasetInfoResult[] = []
. En segundo lugar, en tu buclefor
, la condición debe seri < datasetsIDs.length
en lugar dei <= datasetsIDs.length
(ya que los arrays están indexados desde cero, el último índice eslength - 1
). Por último, tu enfoque de usarmap
conasync/await
puede que no funcione como se espera, ya quemap
devuelve un array de promesas y necesitas esperar a que todas se resuelvan antes de devolver los resultados. Aquí tienes una forma de corregir tu código:Alternativamente, puedes usar
Promise.all
para esperar a que se resuelvan todas las promesas:Este código crea un array de promesas para cada ID de dataset utilizando
map
, y luego espera a que todas se resuelvan utilizandoPromise.all
. El resultado es un array de respuestas en el mismo orden que los IDs de entrada.