Using something like ngRepeat in Javascript

Question

I want to populate a drop-down list with data from an array. The code below is something I would do if I was working with angularJS. I want to know if there is a way to do this in javascript or somehow allow ng-options to work here.

  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var city = ["NewYork", "Chicago", "Florida"];

  var contentString = 
      `<div class="dropdown">
   <select>
     <option ng-options="item for item in ${city}">{{item}}</option>
   </select>
</div>`;

  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)',
//    zIndex: Math.round(myLatlng.lat() * -100000) << 5
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map,marker);
  });

DEMO: https://jsfiddle.net/spdmu6we/5/

@RandyCasburn this works but is there a way to implement this with the way I had it, without having to put the HTML in the HTML section and having the content string variable there. — Kevin Jones
– Kevin Jones, Commented Sep 30, 2020 at 20:32
Yes, you have two options: 1. Use string parsing to build up a string of HTML and then pass that as your content 2. Parse the string you have into a DOM Node and use the code I provided. — Randy Casburn
– Randy Casburn, Commented Sep 30, 2020 at 20:36
Here's the string concatenation solution: jsfiddle.net/1wrmde9y — Randy Casburn
– Randy Casburn, Commented Sep 30, 2020 at 20:43
Yeah this works, you can put this as the answer so I can accept it — Kevin Jones
– Kevin Jones, Commented Sep 30, 2020 at 20:57

Randy Casburn · Accepted Answer · 2020-09-30 22:10:25Z

Per your comment, you prefer to do this without and HTML `'.

So, you have two options: 1. Use string parsing to build up a string of HTML and then pass that as your content 2. Parse the string you have into a DOM Node and use the code I provided.

This replaces the GMap stuff with generic code. You will still be able to use the code related to the DOM.

Here is a solution:

var city = ["NewYork", "Chicago", "Florida"];
const pre = '<div class="dropdown"><select>';
const post = '</select></div>';
let options = '';
city.forEach(city => {
  let o = `<option value=${city}>${city}</option>`;
  options += o;
});
content = pre + options + post;

var infowindow = document.createElement('div');
infowindow.innerHTML = content;
infowindow.style.display = 'none'

var marker = document.createElement('button');
marker.innerText = "Click me";

marker.addEventListener('click', () => {
  document.body.appendChild(infowindow);
  infowindow.style.display='block';
});
document.body.appendChild(marker);

<div id="map-canvas"></div>

Ron Newcomb · Accepted Answer · 2020-09-30 20:27:05Z

0

The two typical ways of creating a lot of elements in javascript is either:

concat a long string of the elements together, like "<option>Banana</option><option>Apple</option>" and then use .innerHTML on the parent select
use javascript to create each node independantly like document.createElement("OPTION") and .appendChild it.

There's performance implications on each. But native javascript doesn't do that kind of templating.

answered Sep 30, 2020 at 20:27

Ron Newcomb

3,44330 silver badges30 bronze badges

2 Comments

Kevin Jones Over a year ago

Well I tried the second option and I keep getting a null error jsfiddle.net/wegs6okb/1

Randy Casburn Over a year ago

That's because you don't have a select element in the HTML, yet you are trying to access it.

Collectives™ on Stack Overflow

Using something like ngRepeat in Javascript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related