JS - Iterate through an array of objects and use values to create vars

Question

If I build an array of objects.

var destinations = [{
  id:   '277',
  title:'Alicante',
  lat:  '38.35782',
  lng:  '-0.5425632',
  content:  '<p>string</p>'
},{
  id:   '275',
  title:'Amsterdam',
  lat:  '52.3745292',
  lng:  '4.7585347',
  content:  '<p>string</p>'
},{
  id:   '250',
  title:'Belfast',
  lat:  '36.1673368',
  lng:  '27.6853392',
  content:  '<p>string</p>'
}, {
  id:   '263',
  title:'Bergerac',
  lat:  '44.8519854',
  lng:  '0.4532777',
  content:  '<p>string</p>'
}]

How do I use a loop and use the data to create variable names and properties? What is the function that would iterate through the array and create variables (which I am using to populate a Google Map). I am reading through so many code examples but I can't seem to get it right.

I would expect the following function to create four variables (marker277, marker275, marker250, marker263), with position taken from objects in the array in a similar fashion, but it doesn't work.

for (var i = 0, l = destinations.length; i < l; i++) {
  var obj = destinations[i];
  var marker[obj.id] = new google.maps.Marker({
    position: {lat: obj.lat, lng: obj.lng}
  });
}

Thank you in advance for your help.

The only problem i can see with your code that it does not return anything. You declared marker inside for loop. But should be outside and initialized as an array. Better to use hashmap as your ids are not regular. — Mikhail Chibel
– Mikhail Chibel, Commented Jun 29, 2016 at 1:03

Mikhail Chibel · Accepted Answer · 2016-06-29 01:07:24Z

0

Your code does not create variable names but tries to set marker to the array marker. You most likely want to have map of markers

var markers = {};
for (var i = 0, l = destinations.length; i < l; i++) {
  var obj = destinations[i];
  markers[obj.id] = new google.maps.Marker({
    position: {lat: obj.lat, lng: obj.lng}
  });
}

answered Jun 29, 2016 at 1:07

Mikhail Chibel

1,9952 gold badges23 silver badges40 bronze badges

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

Comments

Nguyen Tuan Anh · Accepted Answer · 2016-06-29 01:03:45Z

0

Well, I think the marker lat long expect float values, so you should try using parseFloat(). Also you should store the marker in an array to keep it, like this.

var markers = [];
for (var i = 0, l = destinations.length; i < l; i++) {
  var obj = destinations[i];
  var lat = parseFloat(obj.lat);
  var long = parseFloat(obj.lng);
  markers[obj.id] = new google.maps.Marker({
    position: {lat: lat, lng: long}
  });
}

answered Jun 29, 2016 at 1:03

Nguyen Tuan Anh

1,0358 silver badges14 bronze badges

Collectives™ on Stack Overflow

JS - Iterate through an array of objects and use values to create vars

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related