cómo consumir de una api con otra api.
var url_1 = 'https://dog.ceo/api/breeds/list/all'; fetch(url_1) .then( response => response.json()) .then(data => { const breeds = data.message; var arr = []; for (var b in breeds) { arr.push({ breed : b, subBreeds : [ breeds[b][0] ], images : [{ url: '' }] }) }También tengo esta otra api, de donde extraigo las imágenes de cada raza de perro, pero aquí necesitas la variable que sería el nombre de la raza del perro.
var url_2 = 'https://dog.ceo/api/breed/{breed_name}/images'; fetch(url_2) .then( response => response.json()) .then(data => { const images = data.message; var arr_images = []; for (var i in images) { arr_images.push({ images : [{ url: images[i] }] }) }Entonces, lo que no sé, ¿cómo puedo unirme para enviar el nombre de la raza del perro a la segunda api para consumirlo?
¿Y cómo puedo unir el arreglo de las imágenes con el arreglo de arriba?
debería ser algo como esto
{ "breed": "Hound", "subBreeds": [ "subBreedA", "subBreedB", "subBreedC" ], "images":[ {"url":"http://some.url.com"}, {"url":"http://some.other.url"} ] }Espero haber sido claro, gracias por tu ayuda, te estaré muy agradecido.
Lo dividiría en funciones separadas para que pueda concentrarse en una parte a la vez. Luego, combínelos para obtener todos los datos que desee. De esta forma, también puedes reutilizar cada función en caso de que quieras usar los datos de una manera diferente:
// dog.ceo API async function fetchDogApiResult (apiPath) { const response = await fetch(`https://dog.ceo/api/${apiPath}`); if (!response.ok) throw new Error(`Response not OK (${response.status})`); const data = await response.json(); if (data.status !== 'success') throw new Error('Response not successful'); return data.message; } async function fetchBreeds () { return fetchDogApiResult('breeds/list/all'); } async function fetchSubBreeds (breed) { return fetchDogApiResult(`breed/${breed}/list`); } async function fetchImages (breed, subBreed) { return fetchDogApiResult(`breed/${breed}${subBreed ? `/${subBreed}` : ''}/images`); } async function fetchDogData () { const breeds = await fetchBreeds(); return Promise.all(Object.entries(breeds).map(async ([breed, subBreeds]) => ({ breed, subBreeds, images: (await fetchImages(breed)).map(url => ({url})), }))); } (async () => { const dogData = await fetchDogData(); console.log(JSON.stringify(dogData)); })();Puede usar async/await para llamar a la segunda API en la segunda then en la primera API, después de obtener datos de la segunda API, puede usar for loop para ellos. como esto
var url_1 = 'https://dog.ceo/api/breeds/list/all'; fetch(url_1) .then( response => response.json()) .then(async data => { const breeds = data.message; const resUrl2 = await fetch(url_2) const dataUrl2 = await resUrl2.json() var arr = []; for (var b in breeds) { arr.push({ breed : b, subBreeds : [ breeds[b][0] ], images : [{ url: '' }] }) } const images = dataUrl2.message; var arr_images = []; for (var i in images) { arr_images.push({ images : [{ url: images[i] }] }) } })