Conditionally apply variable if data is present in JavaScript

Question

Probably simple answer for someone that knows JavaScript, I don't know it very well. I'm getting JSON data back and applying markers to a map. However it's generating markers for those that have null which really messes things up. So what I need to do is create a conditional variable based on data being present. I have the following in the code:

let mapElement = document.getElementById('map-banner');
let pointMarkers = mapElement.getAttribute('data-location');
let marked = JSON.parse(pointMarkers);
let bounds = new google.maps.LatLngBounds();
console.log(pointMarkers);

marked.forEach(marked => {
  if (marked.lat > 0 && marked.lat !== null) {
      let lat = marked.lat;
  }
  let lng = marked.lng;

  const marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    map: map,
    icon: '/marker.png',
    title: marked.name
  });
  bounds.extend(marker.position);
});
map.fitBounds(bounds);
};

Specifically I'm working with the variables lat and lng. I've also tried:

let lat = marked.lat;
  if (lat > 0 && lat !== null) {
    const lat = marked.lat;
  }

In this case it presents all the data and it doesn't appear to be applying the condition.

um, you can not have let and const for same variable. You should drop the const and seems weird you do a check and than use same line inside... It is really unclear what the final outcome is supposed to be. — epascarello
– epascarello, Commented Apr 9, 2018 at 15:18
your let lat = marked.lat; lives only inside if, you need to put it outside: let lat; if(...) {lat = marked.lat;} — Ludovit Mydla
– Ludovit Mydla, Commented Apr 9, 2018 at 15:19

SparK · Accepted Answer · 2018-04-09 15:19:17Z

2

You are conditionally declaring the variable, which for javascript is optional. What you want is to skip that iteration in your loop with a guard clause:

marked.forEach(marked => {
    if (marked.lat == null)
        return;

    const marker = new google.maps.Marker({
        position: new google.maps.LatLng(marked.lat, marked.lng),
        map: map,
        icon: '/marker.png',
        title: marked.name
    });
    bounds.extend(marker.position);
});

answered Apr 9, 2018 at 15:19

SparK

5,2212 gold badges26 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jake Over a year ago

This is exactly what I was looking for.

jvakuiler Over a year ago

@LudovitMydla pun intended?

jvakuiler · Accepted Answer · 2018-04-09 15:26:23Z

I think a filter is what you're looking for. Filtering can remove entries from arrays which you don't want to use.

Docs (by MDN) -> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Also, const/let are used to achieve block scope in JavaScript.

consts are used for variables that do not change in value and are (preferably) immutable, see Docs -> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

lets are used for values that do change in value, and have different values in different block scopes, see Docs -> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

const mapElement = document.getElementById('map-banner');
const pointMarkers = mapElement.getAttribute('data-location');

// catch any error from JSON.parse
try {
    const coords = JSON.parse(pointMarkers);
    const bounds = new google.maps.LatLngBounds();

    // filter out incorrect coords
    const markers = coords.filter(coord => {
        return (marked.lat > 0 && marked.lat !== null)  
    });

    // create markers, extend bounds
    markers.forEach(({ lat, lng }) => {
        const marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat, lng),
            map,
            icon: '/marker.png',
            title: marked.name
        }); 

        bounds.extend(marker.position);
    });

    // fit bounds
    map.fitBounds(bounds);
} catch (error) {
    // handle error to keep users happy
}

Jonas Wilms · Accepted Answer · 2018-04-09 15:19:02Z

0

Maybe just show the marker if it exists?:

 if(marked.lat && marked.lat > 0) {
    const marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      map: map,
      icon: '/marker.png',
      title: marked.name
   });
}

answered Apr 9, 2018 at 15:19

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

2 Comments

Jake Over a year ago

This would also need to check for lng as well

Jonas Wilms Over a year ago

@jake then do so.

Collectives™ on Stack Overflow

Conditionally apply variable if data is present in JavaScript

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related