Estuve jugando con este desafío de codificación, pero ahora me he quedado un poco atascado. No estoy seguro de entender el desafío.
Este es el desafío Su objetivo es crear una página que muestre una lista de hoteles y sus habitaciones.
consulta la siguiente API:
https://obmng.dbm.guestline.net/api/hotels?collection-id=OBMNG
Esto devuelve una lista de hoteles, con una identificación. El Id se puede utilizar para consultar esta consulta para los tipos de habitación:
https://obmng.dbm.guestline.net/api/roomRates/OBMNG/[hotelId] por ejemplo, https://obmng.dbm.guestline.net/api/roomRates/OBMNG/OBMNG1
¿Cómo haría esto? Leí algo sobre Promise.all: ¿es eso lo que necesitaría aquí?
Tengo algo como esto, pero no estoy seguro del siguiente paso.
async componentDidMount () { const url = "https://obmng.dbm.guestline.net/api/roomRates/OBMNG/OBMNG1"; const urlSecond = "https://obmng.dbm.guestline.net/api/hotels?collection-id=OBMNG"; const response = await fetch(url); const response = await fetch (urlSecond); const data = await response.json(); const data = await response.json(); this.setState({hotel:data.rooms[0], loading: false}); this.setState({hotel:data, loading:false}); console.log(data.rooms[0]); console.log(data);Déjame saber lo que debería estar haciendo - gracias
Lo que desea hacer es buscar primero los hoteles y luego, para cada hotel, enviar una solicitud de información sobre las habitaciones. Verá que terminaremos con una matriz final de objetos. Cada índice en la matriz tendrá una clave de hotel con la información de los hoteles y luego una clave de rooms con toda la información de las habitaciones de ese hotel.
Aquí hay un codesandbox de trabajo .
import { useEffect, useState } from 'react' export default function App() { const [hotelRooms, setHotelRooms] = useState([]) const fetchHotels = async () => { const res = await fetch('https://obmng.dbm.guestline.net/api/hotels?collection-id=OBMNG') const hotels = await res.json() const hotelRooms = [] for(const hotel of hotels) { const res = await fetch(`https://obmng.dbm.guestline.net/api/roomRates/OBMNG/${hotel.id}`) const info = await res.json() hotelRooms.push({ hotel, rooms: info.rooms }) } setHotelRooms(hotelRooms) } useEffect(() => { fetchHotels() }, []) return ( <div className="App"> { hotelRooms.map(h => ( <div> <h2>{h.hotel.name}</h2> <p>{h.hotel.description}</p> <p style={{ fontWeight: 'bold' }}>Rooms:</p> { h.rooms.map(room => ( <div> <div>- {room.name}</div> </div> )) } </div> )) } </div> ); }