Getting "undefined" when trying to access an object property in javascript

Question

I'm creating a leaflet map for showing agencies on the map, with markers created dynamically for each agency. Also there is list of agencies which when clicked on each one, the map zooms automatically on the specific marker for that agency. Now I intend to show some agency info inside of a popup on every marker, but this popup shows only when clicked upon the agency card or the marker itself. I've been successful in the latter and popups show when clicked on the markers. But I'm having problems when trying to achieve this by clicking on the agency cards. So, in order to clarify the problem, the path I've chosen is as below:

First, my html code for cards:

 <div class="card border border-secondary rounded" onclick="moveMap({{ agency.latitude }}, {{ agency.longitude }}, {{ agency.id }})" style="cursor: pointer; z-index: 1000">
... // rest of the html code

Since my backend is on django, so I'm using {{}}s.

In the moveMap() function, I'm sending agency.latitude, agency.longitude and agency.id, and my javascript code is as below:

function moveMap(lat, long, id) {
    map.flyTo([lat, long], 14, {
      animate: true,
      duration: 3.5,
    });
    openPopupByID(id);
}

Here, after moving map to the proper marker, I'm calling openPopupById() function, which takes id as it's parameter, and the openPopupById() function is as below:

function openPopupByID (agency_id) {
    for (let item in markerList) {
        if (item["id"] === agency_id) {
            item.openPopup();
        }
    }
}

In this function I'm using markerList which is created as below:

let markerList = [];

// creating markers using the coorList
for (let dataSet of coorList) {
     let latNumber = parseFloat(dataSet[0]);
     let longNumber = parseFloat(dataSet[1]);
     let marker = L.marker(L.latLng(latNumber, longNumber)).addTo(map);

     // listing agency info inside popups
     marker.bindPopup(setMarkerInfo(dataSet[2]));

     //adding each marker to the markerList
     marker["id"] = dataSet[2];
     markerList.push(marker);
}

coorList is a list of arrays with three values, agency.latitude, agency.longitude and agency.id with indexes of 0, 1 and 2.

So I have a markerList which is list of marker objects, and with marker["id"] = dataSet[2]; I've added an id property to the marker object. But in openPopupByID() function, when I'm trying to access the id of a marker, I'm getting undefined message from js console. When I tried to see the structure of the markerList using console.log(markerList), I get the following:

In which we can clearly see the id property.

So, what is my problem? What did I do wrong?

Please add the exact error. It's not clear what is undefined here — adiga, Nov 28 '22 at 07:27
try `for...of` instead of `for...in` .... the former will give you a bunch of indices when performed on an Array, the latter will give you each item in an Array — Jaromanda X, Nov 28 '22 at 07:27
@JaromandaX That was it :) as simple as that. Thanks for your help. — Vahid, Nov 28 '22 at 07:41
@adiga The undefined error was shown when I was trying to console.log(item["id"]). Nothing more was written, just an undefined message in the console tab in chrome developer tools. If you have given a downvote because of this, please upvote or at least remove your downvote if possible. Thank you in advance. — Vahid, Nov 28 '22 at 07:53
I haven't downvoted ([Why shouldn't I assume I know who downvoted my post?](https://meta.stackoverflow.com/questions/388686)) — adiga, Nov 28 '22 at 08:01
I am sorry if I offended you but I didn't assume it was you surely, just since you pointed out that I should've written the complete error message, I asked if it was you. Frankly, I tried to write this question as well-explained as I could, I did explain what I did in every step and what was the outcome, but yet it got 2 downvotes :(. It just bothers me a bit to receive downvotes without knowing what is the cause of it. — Vahid, Nov 28 '22 at 08:07

score 2 · Accepted Answer · answered Nov 28 '22 at 07:32

Shouldn't you be using for..of instead of for..in

function openPopupByID (agency_id) {
    for (let item of markerList) {
        console.log('test -- ', item.id, item);
        if (item["id"] === agency_id) {
            item.openPopup();
        }
    }
}

score 1 · Answer 2 · answered Nov 28 '22 at 07:31

You have to use for of loop for array instead of for in loop which is used for objects.

for in loop will check if id is present in markerList instead of the each element in the list

source - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

function openPopupByID (agency_id) {
    for (let item of markerList) {
        if (item["id"] === agency_id) {
            item.openPopup();
        }
    }
}

Getting "undefined" when trying to access an object property in javascript

2 Answers2