Tengo una variable con cuatro claves. Cuando la clave del icono tiene el valor 01d, necesito mostrar el icono que hace referencia a este valor, que se encuentra en la carpeta img. ¿Cómo puedo hacer esto condicional?
Tengo la siguiente variable desestructurada y debajo pongo su retorno.
let [dt1, dt2, dt3, dt4, dt5, dt6, dt7, dt8] = urlJson devuelve:
{ dt: 1643803200, day: 12.84, description: 'clear sky', icon: '01d' } { dt: 1643889600, day: 14.56, description: 'overcast clouds', icon: '04d' } { dt: 1643976000, day: 14.85, description: 'overcast clouds', icon: '04d' } { dt: 1644062400, day: 14.41, description: 'broken clouds', icon: '04d' } { dt: 1644148800, day: 14.99, description: 'clear sky', icon: '01d' } { dt: 1644235200, day: 15.68, description: 'few clouds', icon: '02d' } { dt: 1644321600, day: 14.95, description: 'broken clouds', icon: '04d' } { dt: 1644408000, day: 16.37, description: 'overcast clouds', icon: '04d' }Aquí está el código:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link id="mystylesheet" type="text/css" rel="stylesheet" href="style.css"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <div id="wrapper"> <h1 class="city"></h1> <h2><span id="tags">0</span>ºC</h2> </div> <script> const urlJsonString = $.getJSON('https://api.openweathermap.org/data/2.5/onecall?lat=38.7267&lon=-9.1403&exclude=current,hourly,minutely,alerts&units=metric&appid={APPID}', function (data) { let urlJson = data.daily.map(({ dt, temp: { day }, weather: [{ description, icon }] }) => ({ dt, day, description, icon })) let [dt1, dt2, dt3, dt4, dt5, dt6, dt7, dt8] = urlJson var date = dt1.dt let result = `Temperature: ${dt1.day} ºC<br> Dia: ${date}<br> ${dt1.icon}` $(".city").html(result); }); </script> </body> </html>A ver si esto te funciona. No tengo acceso clave a esta API, así que lo hice con sus datos ficticios.
Asegúrese de que su 'icono' sea la URL de su imagen
https://jsfiddle.net/ep9hsxLf/
let urlJson = [ { dt: 1643803200, day: 12.84, description: 'clear sky', icon: '01d' }, { dt: 1643889600, day: 14.56, description: 'overcast clouds', icon: '04d' }, { dt: 1643976000, day: 14.85, description: 'overcast clouds', icon: '04d' }, { dt: 1644062400, day: 14.41, description: 'broken clouds', icon: '04d' }, { dt: 1644148800, day: 14.99, description: 'clear sky', icon: '01d' }, { dt: 1644235200, day: 15.68, description: 'few clouds', icon: '02d' }, { dt: 1644321600, day: 14.95, description: 'broken clouds', icon: '04d' }, { dt: 1644408000, day: 16.37, description: 'overcast clouds', icon: '04d' } ] var htmlResult = ''; urlJson.forEach(item => { var date = new Date(item.dt) htmlResult += `Temperature: ${item.day} ºC<br> Dia: ${date}<br> ${item.icon}<br><br>` }); $(".city").html(htmlResult); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="city"></div>