Dynamically create inputs from array and make them work with a function

Question

I have this array:

var markers = [
  {
    "name": "<span data-i18n='Banana'>Banana</span>",
    "group": "fruits",
    "icon": iconsUrl+"banana.png",
    "coords": [-1667,1706]
  },
  {
    "name": "<span data-i18n='Apple'>Apple</span>",
    "group": "fruits",
    "icon": iconsUrl+"apple.png",
    "coords": [-1667,3566]
  },
  {
    "name": "<span data-i18n='Cat'>Cat</span>",
    "group": "animals",
    "icon": iconsUrl+"cat.png",
    "coords": [354,502]
  },
  {
    "name": "<span data-i18n='Dog'>Dog</span>",
    "group": "animals",
    "icon": iconsUrl+"dog.png",
    "coords": [354,792]
  },
  {
    "name": "<span data-i18n='Car'>Car</span>",
    "group": "transport",
    "icon": iconsUrl+"car.png",
    "coords": [1242,169]
  },
  {
    "name": "<span data-i18n='Boat'>Boat</span>",
    "group": "transport",
    "icon": iconsUrl+"boat.png",
    "coords": [1242,345]
  }]

And I have inputs in my html that toggle this markers on a map:

<div class="toggle_markers">
<input type="checkbox" id="fruits" class="cc">
<label for="fruits" class="cl" data-i18n="Fruits">Fruits</label>
<br>
<input type="checkbox" id="animals" class="cc">
<label for="animals" class="cl" data-i18n="Animals">Animals</label>
<br>
<input type="checkbox" id="transport" class="cc">
<label for="transport" class="cl" data-i18n="Transport">Transport</label>
<br>
</div>

Using this function:

function toggle(element, layer) {
    if (element.checked) {
        map.addLayer(layerGroups[layer]);
    } else {
        $('#allmarkers').prop('checked', false);
        map.removeLayer(layerGroups[layer]);
    }
}

Then I have to get all the id's of the inputs that I want to work with:

var fruits= document.getElementById('fruits');
var animals= document.getElementById('animals');
var transport= document.getElementById('transport');

And then call the function when I change the state of the input:

fruits.onchange = function() {toggle(this, 'fruits')};
animals.onchange = function() {toggle(this, 'animals')};
transport.onchange = function() {toggle(this, 'transport')};

How can I improve this code to dynamically create those inputs from the array (markers.group) append them to the div and make then work with that function so I don't have to call it everytime I add a new group in the array like this:

var newgroup = document.getElementById('newgroup');
newgroup .onchange = function() {toggle(this, 'newgroup ')};

Jonas Wilms · Accepted Answer · 2018-02-26 20:06:38Z

1

 const groups = new Set(markers.map(marker => marker.group));    

 for(const group of groups){
   const input = document.createElement("input");
     input.type = "checkbox";
     input.className = "cc";
     input.id = group;
   const label = document.createElement("label");
     label.className = "cl";
     label.for = group;

   document.body.appendChild(input);
   document.body.appendChild(label);
}

Thats a starting point.

edited Feb 26, 2018 at 20:06

answered Feb 26, 2018 at 19:40

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

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

6 Comments

RogerHN Over a year ago

Thanks for the contribuition Jonas, the main problem is to make them work when dynamically created.

Jonas Wilms Over a year ago

@rogerHN and i left that problem for you to solve. Hint: There is just one line left...

RogerHN Over a year ago

No idea how to solve it... With your code it's created a total of 6 inputs, but I only need 3, one for each group.

Barmar Over a year ago

Add toggle(input, group) to the function.

RogerHN Over a year ago

Thanks for the edit Jonas! @Barmar adding toggle(input, group) doesn't seem to work, I think it's missing something. Didn't understand your second comment.

|

Collectives™ on Stack Overflow

Dynamically create inputs from array and make them work with a function

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related