Uncaught TypeError: Cannot read property '0' of undefined using JSON

Question

I'm trying to create a JS array of Leaflet markers, but it keeps telling me that the property '0' of the Markers[] array is undefined, i think it's a problem derivated from transfering the PHP variable $data to JS var a[] via json_encode, but i'm not sure about that.

I'm working on Altervista, i tried to solve the problem in every way possible.


$sql = mysqli_query($connection, "SELECT * FROM ritrovamento");
while($row = mysqli_fetch_row($sql)) 
{
    $data[] = $row;
}

var a = <?php echo json_encode($data); ?>;  
var Markers = [];
var Popups = [];
var j = 0;
var i = 0;
for(i = 0; i < a.length; i = i + 3) {
    Markers[i] = L.marker([a[j][0], a[j][1]], {icon: shovelIcon});
    Markers[i + 1] = L.marker([a[j][0], a[j][1]], {icon: diggingIcon});
    Markers[i + 2] = L.marker([a[j][0], a[j][1]], {icon: clickedIcon});
    Markers[i].addTo(mymap);   
    j++; 
}

Uncaught TypeError: Cannot read property '0' of undefined (this error comes where i'm trying to put data into Markers[i]).

console.log(a) give me:

[Array(5)]
0: Array(5)
0: "45.255091"
1: "8.514025"
2: "/images/bo.gif"
3: "wdqd"
4: "wd"

and console.log(Markers[1]) gives me:

e {options: {…}, _latlng: M, _initHooksCalled: true}
options:
icon: e
options: {iconUrl: "images/digging.gif", iconSize: Array(2), iconAnchor: Array(2), popupAnchor: Array(2)}
_initHooksCalled: true
__proto__: v
__proto__: Object
_initHooksCalled: true
_latlng: M
lat: 45.255091
lng: 8.514025
__proto__: Object
__proto__: e

Same for Markers[0] and Markers[2].

What does the object really look like? A sample bit of it would help you get answers. — epascarello
What is i + 3 supposed to do in the for loop? Shouldn't that be i = i + 3? — Barmar
I don't understand that loop. i is the index into Markers, not the index into a, so why are you comparing it to a.length? — Barmar
j is the index into a, so you should compare that with a.length. — Barmar
Corrected the increment in the for loop, nothing changed since there's only one element in the array. — user12196313

Barmar Barmar · Accepted Answer · 2019-10-10T16:30:38

You have an infinite loop since you're not incrementing i. On the second iteration you get an error because there's no j[1].

The for loop needs to increment both variables, and it should test j since it's the index into the array you're reading.

for (i = 0, j = 0; j < a.length; j++, i += 3) {
    Markers[i] = L.marker([a[j][0], a[j][1]], {icon: shovelIcon});
    Markers[i + 1] = L.marker([a[j][0], a[j][1]], {icon: diggingIcon});
    Markers[i + 2] = L.marker([a[j][0], a[j][1]], {icon: clickedIcon});
    Markers[i].addTo(mymap);   
}

Here's full code. I tweaked the contents of the Markers array because I don't have L.marker() function, but it still accesses the a array the same way.

var a = [
  ["45.255091", "8.514025", "/images/bo.gif", "wdgd", "wd"]
];

var Markers = [];
var j, i;
var mymap = [];

for (i = 0, j = 0; j < a.length; j++, i += 3) {
    Markers[i] = [[a[j][0], a[j][1]], {icon: "shovelIcon"}];
    Markers[i + 1] = [[a[j][0], a[j][1]], {icon: "diggingIcon"}];
    Markers[i + 2] = [[a[j][0], a[j][1]], {icon: "clickedIcon"}];
    mymap.push(Markers[i]);  
}

console.log(Markers);

Uncaught TypeError: Cannot read property '0' of undefined using JSON

1 Answers