2

Tengo el siguiente json desde un api y de weather quiero obtener el main y description para poder imprimirlo en pantalla, pero por consola me aparece "undefined".

{

    "coord": {
        "lon": -70.65,
        "lat": -33.46
    },
    "weather": [
        {
            "id": 803,
            "main": "Clouds",
            "description": "broken clouds",
            "icon": "04d"
        }
    ]
}

Lo que tengo hasta ahora es esto

$.ajax({
            type: "GET",
            url: "http://api.openweathermap.org/data/2.5/weather?id=3871336&units=metric&APPID=" + apikey,
            dataType: "json",
            success: function (data) {

                vars = data.main;
                temp_c = 'Actual ' + vars.temp + '°C'; //- 273.15  
                temp_f = 1.8 * (vars.temp - 273.15) + 32;
                temp_min = 'Min ' + vars.temp_min + '°C';
                temp_max = 'Max ' + vars.temp_max + '°C';
                ciudad = data.name;
                humidity = vars.humidity + '%';
//                description = vars.main[2];

                $("#temp_c").val(temp_c);
                $("#ciudad").val(ciudad);
                $("#humidity").val(humidity);
                $("#temp_min").val(temp_min);
                $("#temp_max").val(temp_max);
//                $("#main").val(main);
//                $("#description").val(description);

                alert('Mostrando clima en ciudad de: ' + ciudad);
                console.log(temp_c);
                console.log(temp_min);
                console.log(temp_max);
                console.log(ciudad);
                console.log(humidity);


            }
6
  • ¡Bienvenido! ¿Podrías subir lo que has intentado? Así contamos con un punto de partida desde el que poder ayudarte.
    – phpMyGuel
    Commented el 10 oct. 2019 a las 12:58
  • sin tener mas referencias de lo que estas haciendo es dificil darte una respuesta certera, prueba usando: console.log(weather[0].main) y console.log(weather[0].description)
    – KyRa xTeC
    Commented el 10 oct. 2019 a las 13:09
  • Estoy utilizando javasript, y lo quiero mostrar los datos del jason por html <form name="humedad" id="CONDICION"> <!-- <input type="button" value="Mostrar condicion" id="main" onclick="mostrar()"/>--> <input type="text" name="txtDescription" id="html" placeholder="Condicion"> </form> Commented el 10 oct. 2019 a las 13:21
  • tambien intente usando console.log tambien he intentado esto $("#main").val(main); $("#description").val(description); Commented el 10 oct. 2019 a las 13:24
  • que tal si haces un console.log(data) y agregas el resultado a la pregunta Commented el 10 oct. 2019 a las 13:34

1 respuesta 1

2

Lo resolví así, cualquier duda deja tu comentario.

Declare una constante llamada array y lo converti en un array de objetos para que pueda ser iterado por un for o forEach, en mi caso use el segundo.

En el primer forEach, obtienes coord y weather los 2 objetos, desde ese forEach puedes acceder solamente a las propiedades de coord pero no a las de weather ya que estan en un array, en este caso vuelves hacer otro forEach a esa llave para poder ingresar a las propiedades de Weather.

For Each.

const array = 
[{
  coord: {
    lon: -70.65,
    lat: -33.46
  },
  weather: [
    {
      id: 803,
      main: "Clouds",
      description: "broken clouds",
      icon: "04d"
    }
  ]
}
];

console.log(array);

array.forEach(array => {
    console.log(array);
    console.log(array.weather);

    array.weather.forEach(infoWeather => {



        console.log('Main -', infoWeather.main);
        console.log('Description -', infoWeather.description);
        const resultado = document.getElementById('main').innerHTML = infoWeather.main;
        const resultado2 = document.getElementById('description').innerHTML = infoWeather.description;
    })



});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div id="main"></div>
    <div id="description"></div>
    
    <script src="prueba.js"></script>
    
</body>
</html>

6
  • 1
    Procura ser más claro con tu respuesta: ¿qué encontraste? ¿por qué hiciste tu cambio? ¿dónde puede aprender más? Commented el 10 oct. 2019 a las 13:41
  • Woooo es que cambio la pregunta, al principio solo puso la primera imagen :L Commented el 10 oct. 2019 a las 13:42
  • 1
    Ya lo explique, saludos. Commented el 10 oct. 2019 a las 13:46
  • Funciona, pero ahora lo que quiero hacer es introducir la url de la api que estoy consumiendo para extraer la informacion, como serian los pasos correctos? De antemano gracias Commented el 10 oct. 2019 a las 14:20
  • La pregunta quedó respondida con esta respuesta Si tienes una segunda, da esta respuesta como aceptada y abre una nueva montando el pertinente escenario para poder reproducir tu problema.
    – phpMyGuel
    Commented el 10 oct. 2019 a las 14:31

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.