ForEach loop applies only last value to the variable

Question

I have this forEach loop:

coordinates.forEach(function (item) {

        let marker = new FontAwesomeMarker(
            new google.maps.LatLng(item.lat, item.lng),
            map,
            {
                marker_id: item.id,
                icon: 'fa fa-map-marker-alt fa-2x',
                color: 'black',
                clinicName: item.clinicName,
                jobName: item.jobName,
                jobProfession: item.jobProfession,
                clinicLogo: item.clinicLogo,
                applyLink: item.applyLink,
            },
        )

        bounds.extend(marker.latlng)
    });

Which is using this function:

FontAwesomeMarker.prototype.onAdd = function () {

        marker                       = this.marker = document.createElement('div');
        marker.className             = 'marker'
        marker.dataset.jobName       = this.args.jobName
        marker.dataset.clinicName    = this.args.clinicName
        marker.dataset.clinicLogo    = this.args.clinicLogo || ''
        marker.dataset.jobProfession = this.args.jobProfession
        marker.dataset.applyLink     = this.args.applyLink
        marker.id                    = this.args.marker_id

        let icon = document.createElement('i');
        icon.className = 'fa marker-icon text-primary fa-' + this.args.icon;
        icon.style.fontSize = this.args.fontSize;
        icon.style.color = this.args.color;
        marker.appendChild(icon);

        let panes = this.getPanes();
        panes.overlayImage.appendChild(marker)

        if(marker.id != 'start') {
            google.maps.event.addDomListener(marker, "click", function () {

                let infoWindow = document.createElement('div')
                infoWindow.className = 'ds-info-window';
                infoWindow.innerHTML = `
                    <img class="img-avatar img-avatar-thumb img-avatar-bid rounded bg-light" src="${marker.dataset.clinicLogo}" alt="">
                        <h4 class="text-primary"> ${marker.dataset.clinicName} </h4><h5> ${marker.dataset.jobName} <small>(${marker.dataset.jobProfession})</small></h5>
                        <div class="d-block text-center mt-2"><a type="button" class="btn btn-success btn-sm" href="${marker.dataset.applyLink}">
                        <i class="fa fa-plus mr-1"></i> Apply
                        </a><button type="button" class="btn btn-sm btn-round btn-warning ml-2 ds-close-info d-none"><i class="fa fa-times mr-1"></i> Cancel</button></div>
                `
                infoWindow.classList.toggle('show');

                marker.appendChild(infoWindow);

            })
        }

    }

When the marker is clicked the data in the info window is always the same (the data from the last element in the array is show). How can I prevent this? What am I doing wrong?

Does this answer your question? [Javascript infamous Loop issue?](https://stackoverflow.com/questions/1451009/javascript-infamous-loop-issue) — SeleM, Mar 31 '20 at 15:23
@selemmn that's not a issue here as op uses let which is block scoped — Code Maniac, Mar 31 '20 at 15:24
I'm not sure how the Google Maps API is working in this instance, but it looks like you are overwriting each time you iterate through the array. Maybe you are missing a "create" or "save" step. — symlink, Mar 31 '20 at 15:24
@CodeManiac, Thanks ! Frankly I didnt pay enough attention, when I first read the question topic, the infamous loop came to head. Besides, I didnt answer, it was a passing through comment :D — SeleM, Mar 31 '20 at 15:29

ForEach loop applies only last value to the variable

0 Answers0