0

disculpen estoy tratando de mandar a imprimir un valor en especifico a mi HTML, les muestro el codigo:

const data = [{
    "Hora": "11:00",
    "NO2": 0,
    "O3": 0.01,
    "PM2.5": 15,
    "SO2": 0.005,
    "PM10": 31,
    "CO": 1.97
}];

function filtrarPorHoraActual(miArray) {
    const horaActual = new Date().getHours(); 

    return miArray.filter((dato) =>
      (dato.Hora === `${horaActual}:00`));
}
// console.log(filtrarPorHoraActual(data));
var dat = filtrarPorHoraActual(data);
console.log(dat.O3);
document.getElementById('contaminanteUno').innerHTML = dat.O3;
<p id="contaminanteUno" class="valorcont">Se emite ahora:  </p>

Obtengo de resultado "undefined" no entiendo por que, estoy utilizando una funcion que compara la hora actual con el valor de la hora de mi array JSON, e imprime los valores de acuerdo a la hora,funciona si solo imprimo dat, pero me imprime todo el arreglo y quisiera imprimir solo el valor de O3. Muchas gracias de antemano.

1 respuesta 1

1

Cuando te respondí tu pregunta pasada para hacer el filtrado me tomé el tiempo de dejarte la referencia a la documentación del método encargado de realizarla, en ella claramente se especifica que lo que se devuelve es un array de los elementos que cumplan con la condición de filtrado.

Por favor tómate tú también el tiempo para siempre para leer la documentación, si tienes alguna duda de la misma puedes preguntar por medio de un comentario o editando tu pregunta.

Una posible solución (leer final de la respuesta para otras soluciones) a tu problema es acceder siempre al primer elemento del array (suponiendo que tu JSON no tiene valores repetidos).

Con este código comentado te explico con mejor detalle:

const data = [{
        "Hora": "11:00",
            "NO2": 0,
            "O3": 0.01,
            "PM2.5": 15,
            "SO2": 0.005,
            "PM10": 31,
            "CO": 1.97
    },
]
function filtrarPorHoraActual(miArray) {
            const horaActual = new Date().getHours(); 

            return miArray.filter((dato) =>
            (dato.Hora === `${horaActual}:00`))
        }
       // console.log(filtrarPorHoraActual(data));
        var dat = filtrarPorHoraActual(data);
        console.log("Resultado del filtrado",dat);//Mira que dat es un array, porque podrían existir varios elementos con la misma hora.
        console.log("Primer elemento del array:",dat[0])//Aquí podemos acceder al primer elemento.
        document.getElementById('contaminanteUno').innerHTML = dat[0]?.O3 ?? "No existe registro para esta hora";
<p id="contaminanteUno" class="valorcont">Se emite ahora:  </p>

UPDATE:

Disculpa, hasta ahora leo el comentario que pusiste en la pregunta anterior haciendo referencia justo a este problema, te hubiese actualizado la pregunta con este problema. De igual manera te recomiendo siempre leer la documentación, siempre es tu mejor amiga. Haciendo referencia al comentario que te dejé:

En ese caso una solución sería acceder el primer elemento del array, otra solución sería en vez de filtrar, recorrer el array y devolver el primer objeto que cumpla con la hora actual. Esto no me parece algo bueno debido a que si la idea de tu JSON de datos es que no se repita una hora, el método de filtrado te permite validar la integridad del mismo por medio de la cantidad de resultados que arroja... Si arrojase 2 que tienen la misma hora se podría tomar como un error y corregirse.

Sin embargo, el método del for podría ahorrarte tiempo de ejecución porque a penas encuentre un valor terminaría de iterar sobre tu objeto, estarías sacrificando la verificación del mismo lo cuál tal vez no importaría si ya existe un método de verificación de datos para cada vez que ingresas un nuevo objeto a tu JSON, o en la construcción del mismo.

1
  • 1
    Muchas gracias compañero! de verdad me has salvado ya bastante! si que estoy empezando con estos lenguajes, y me falta informarme mas, muchas gracias por tus recomendaciones, de verdad, me tomare mas tiempo para leer la documentación.
    – Clouds556
    el 8 dic. 2020 a las 0:24

Tu Respuesta

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

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