Im trying to receive the data from my api into the charts at my website. Im stuck trying to fill my charts with the data, I have the code for filling the charts but when I map the JSON data and try to split the data into Date and temperature to put it in the chart it just does not work.

This is the code:

 var xmlhttp = new XMLHttpRequest();
var url = "http://localhost:8090/api/grafico/datos/temperatura/medicionAire/2059";
xmlhttp.open("GET", url, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        var data = JSON.parse(this.responseText);
       //console.log(data);
        
        var dateG = data.map(function(elem) {
            return elem.fecha;
        });
        var temperatureG = data.map(function(elem) {
            return elem.temperatura;
        });

    }
}

I tried debuging it and it look like it does not recognize "fecha" or "temperatura" inside the array eventhough "elem" has the array in it: As you can see in this image, "elem" has the array in it, but "elem.fecha" is undefined and I dont know why. It should return me an array with only "fecha" of each line.

Log output of data:

[Array(4)]
0: Array(4)
0: {fecha: '2021-09-03T13:15:41.943Z', temperatura: 22.33}
1: {fecha: '2021-09-03T13:15:41.230Z', temperatura: 22.33}
2: {fecha: '2021-09-03T13:15:04.243Z', temperatura: 22.33}
3: {fecha: '2021-09-03T13:14:06.923Z', temperatura: 16.56}
length: 4
[[Prototype]]: Array(0)
length: 1
[[Prototype]]: Array(0)