Tengo una API que devuelve una matriz de objetos. También tengo una segunda API que depende de la primera API, de modo que debe coincidir con un userID de usuario de la matriz de objetos y obtener un objeto con información detallada. Puedo obtener mis datos de la primera API; sin embargo, no puedo generar una matriz de objetos de información detallada para la segunda API, ni enviar los objetos recuperados de mi segunda API a la primera matriz.

Entonces, por ejemplo, mi primera API devuelve una matriz de objetos como la siguiente respuesta:

 var return_greens = [{ ..., color: "green", userID: 123 }, { ..., color: "green", userID: 456 }]

Mi segunda API requeriría un ID de usuario y devolvería un objeto de respuesta:

 var detailed_info = { userID: 456, color: "green" day: "Monday", time: "1:00p", ... }

A continuación se muestra un código de muestra. Estoy usando el método fetch () , sin embargo, estoy abierto a otros métodos o si hay una mejor manera de escribir la solicitud.

 const fetch_array_api = ""; const fetch_object_with_details_api = ""; fetch(fetch_array_api, { method: 'get' }) .then(response => response.json()) .then(data => { var return_greens = data.response; var data = return_greens.map((item, index) => { item.detailed_info = fetch(fetch_object_with_details_api + item.userID, { method: 'get' }) }) return data }) .then(response => response.json()) .then(dataDetails => { console.log(dataDetails) }) .catch(err => { console.error('Request failed', err) })

Creo que tengo algunos problemas con la parte map() de este código. Mi comprensión de las promesas y sobre el uso de map() para iterar a través de la matriz de return_green y empujar el objeto de información detailed_info devuelta a la matriz puede no ser correcta aquí. Apreciaría algo de ayuda aquí. En última instancia, quiero devolver una matriz de objetos con información detallada dentro de cada objeto de la matriz. Un poco de información adicional: este fragmento de código se colocará dentro del método componentDidMount() de react.