¿Cómo represento un objeto que he obtenido en React?
Aquí está mi código:
const PrayerTimesByCity = () => { // Initiate array for fetching data from AlAdhan API const [data, setPrayerTimes] = useState({}); useEffect(() => { fetch( "http://api.aladhan.com/v1/timingsByCity?city=Helsingborg&country=Sweden&method=0" ) .then((resp) => resp.json()) .then((data) => setPrayerTimes(data)); }, []); console.log(data); return <div> // Here is where I want my objects to return </div>; };Esto es lo que devuelven los datos obtenidos:
{ "code": 200, "status": "OK", "data": { "timings": { "Fajr": "06:42", "Sunrise": "09:00", "Dhuhr": "12:13", "Asr": "13:17", "Sunset": "15:27", "Maghrib": "16:00", "Isha": "17:29", "Imsak": "06:32", "Midnight": "00:13" } }Quiero extraer "datos" y luego "tiempos" y luego cada elemento respectivo y su clave. ¿Cómo hago esto en mi declaración de devolución en mi componente?
Gracias por cualquier respuesta de antemano
Mediante el uso de Object.keys(data) :
const PrayerTimesByCity = () => { // Initiate array for fetching data from AlAdhan API const [data, setPrayerTimes] = useState({}); useEffect(() => { fetch( "http://api.aladhan.com/v1/timingsByCity?city=Helsingborg&country=Sweden&method=0" ) .then((resp) => resp.json()) .then((data) => setPrayerTimes(data)); }, []); console.log(data); return ( <div> {Object.keys(data.timings).map((key, index) => <span key={index}>{key}:{data.timings[key]}</span> )} </div> ); };Otra solución para la transformación única de objeto a matriz sería:
const PrayerTimesByCity = () => { // Initiate array for fetching data from AlAdhan API const [data, setPrayerTimes] = useState([]); useEffect(() => { fetch( "http://api.aladhan.com/v1/timingsByCity?city=Helsingborg&country=Sweden&method=0" ) .then((resp) => resp.json()) .then((data) => setPrayerTimes(Object.entries(data.data.timings))); }, []); console.log(data); return ( <div> {data.map(([key, value], index) => <span key={index}>{key}:{value}</span> )} </div> ); };Debe devolver {data.data.timings.Fajr},{data.data.timings.Sunrise},... si su componente muestra directamente los datos. Si su componente solo devuelve los datos que deben mostrarse en otro componente, debe escribir: return data.data.timings;