0

intento mostrar los datos que traigo de una api con un forEach, perome sale este error Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'forEach')

aqui hago la llamada a la api, pero no estoy seguro de porque no trae los datos.

export async function getForecast(code){
    //api key
    var API_KEY='PIAcz5bZ3LStSpLy1GsG10hXdqdQcSD3';

    //call api
    const reQuestUrl='http://dataservice.accuweather.com/forecasts/v1/daily/5day/'+code+'?apikey='+API_KEY;

    return await fetch(reQuestUrl)
   
    .then( (response) => { return response.json(); })
    .catch( (response) => { console.log(response); })
   



  // const data=await res.json();

    //const climas=data.DailyForecasts;
    //console.log({data,climas});
}

en la funcion getInfo quiero imprimir los datos, estoy utilizando modulos a si que llamo a la funcion getForecast e intento traer los datos y los envio a la funcion getInfo donde quiero imprimir los datos de una api con un forEach.

import{getForecast} from './info/services.js'

window.addEventListener('load', () => { init(); })
//init
function init() {
    //location ID
    var key=241912;
    load(key);
}
//enviar ID code
function load(code) {
    getForecast(code)
        .then( (response) => { getInfo(response.results); })
}


 function getInfo(climas){

    let template = document.getElementById('template-forecast').content;
    let fragment = document.createDocumentFragment();

    climas.forEach(clima => {
        console.log(clima);
       //let clim=(clima.Temperature.Maximum.Value-32)*(5/9);
       //let clim2= Math.trunc(clim);
        //template.querySelector('#image').src = clima.Day.Icon; //image
        template.querySelector("#date").textContent = clima.Date; //track name
        //template.querySelector("#temp").textContent = clim2;
        let clone = document.importNode(template, true); //clone fragment
        fragment.appendChild(clone); //add clone to fragmentsrc
        
    });

    document.getElementById('content').appendChild(fragment);
}

estoy empezando con modulos y estoy teniendo problemas

1 respuesta 1

0

Tienes al menos 2 errores:

  1. La función load debe ser así
function load(code) {
    getForecast(code)
        .then( (response) => { getInfo(response); })
}

Es decir es response NO response.results

  1. Lo que te devuelve es un objeto, no una lista. Por lo que no puede itear con el foreach. La lista viene en la propiedad DailyForecasts
 function getInfo(climas){

    let template = document.getElementById('template-forecast').content;
    let fragment = document.createDocumentFragment();

    climas.DailyForecasts.forEach(clima => {
        console.log(clima);
       //let clim=(clima.Temperature.Maximum.Value-32)*(5/9);
       //let clim2= Math.trunc(clim);
        //template.querySelector('#image').src = clima.Day.Icon; //image
        template.querySelector("#date").textContent = clima.Date; //track name
        //template.querySelector("#temp").textContent = clim2;
        let clone = document.importNode(template, true); //clone fragment
        fragment.appendChild(clone); //add clone to fragmentsrc
        
    });

    document.getElementById('content').appendChild(fragment);
}
1
  • gracias! ya solucione el error! Commented el 19 nov. 2022 a las 21:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.