Creating HTML elements based on object length from JS file

Issue

I have javascript file providing list of names to create html elements

var layer_group_list = 
{
  "type": "FeatureCollection",
  "features":
  [
    {
      "type": "Feature",
      "properties":
      {
        "Group_Name": "Group Name 1",
        
        "Layer_1": "G1_Layer1",
        "name_1": "G1_Layer1",
        "Layer_2": "G1_Layer2",
        "name_2": "G1_Layer2"       
      }

    },
    {
      "type": "Feature",
      "properties":
      {
        "Group_Name": "Group Name 2",
        
        "Layer_1": "G2_Layer1",
        "name_1": "G2_Layer1",
        "Layer_2": "G2_Layer2",
        "name_2": "G2_Layer2",
        "Layer_3": "G2_Layer3",
        "name_3": "G2_Layer3"
      }

    }   
  ]
}

I need to create 2 elements for the first group 3 elements for the 2nd (and different numbers of elements in each group). To get started i hard coded it to be 5 elements as below. But in the actual project i have different groups with different numbers of layers.

function generateList(){
    
      const ul = document.querySelector('.each_list'); //.each_list is class defined in html for ul
      
      Array.from((js_layer_group_list.features).forEach(feature => 
      {
                                          const div = document.createElement('div');
                                          const li = document.createElement('li');
                                          const a = document.createElement('a');
                                          const p1 = document.createElement('p');
                                          const p2 = document.createElement('p');
                                          const p3 = document.createElement('p');
                                          const p4 = document.createElement('p');
                                          const p5 = document.createElement('p');                                      
                                          
    
                                          const cb1 = document.createElement('input');
                                          cb1.setAttribute("type", "checkbox");
    
                                          const cb2 = document.createElement('input');
                                          cb2.setAttribute("type", "checkbox");
    
                                          const cb3 = document.createElement('input');
                                          cb3.setAttribute("type", "checkbox");
    
                                          const cb4 = document.createElement('input');
                                          cb4.setAttribute("type", "checkbox");
    
    
                                          const cb5 = document.createElement('input');
                                          cb5.setAttribute("type", "checkbox");
    
    
                                          div.classList.add('feature-item');
                                          a.innerText = feature.properties.Group_Name;
                                          p1.innerText = feature.properties.Layer_1;
                                          p2.innerText = feature.properties.Layer_2;
                                          p3.innerText = feature.properties.Layer_3;
                                          p4.innerText = feature.properties.Layer_4;
                                          p5.innerText = feature.properties.Layer_5;                     
    
                                          div.appendChild(a);
                                          p1.insertBefore(cb1, p1.firstChild);
                                          p2.insertBefore(cb2, p2.firstChild);
                                          p3.insertBefore(cb3, p3.firstChild);
                                          p4.insertBefore(cb4, p4.firstChild);
                                          p5.insertBefore(cb5, p5.firstChild);
    
                                          div.appendChild(p1);
                                          div.appendChild(p2);
                                          div.appendChild(p3);
                                          div.appendChild(p4);
                                          div.appendChild(p5);
                                          li.appendChild(div);
                                          ul.appendChild(li);
    
      }));
    }
    
    
    generateList();

Can i get the length of that feature by doing something like "feature.properties.length" (this doesn't work), and do (length-1)/2 (-1 to remove Group_Name and half it because there layer and name for each)

Snip of how it looks currently

Snip of how i want to have this setup

Solution

You need to iterate the layer_group_list programmatically instead of specify the checkboxamount,below is a simple reference for you

var layer_group_list = 
{
  "type": "FeatureCollection",
  "features":
  [
    {
      "type": "Feature",
      "properties":
      {
        "Group_Name": "Group Name 1",
        "Layer_1": "G1_Layer1",
        "name_1": "G1_Layer1",
        "Layer_2": "G1_Layer2",
        "name_2": "G1_Layer2"       
      }

    },
    {
      "type": "Feature",
      "properties":
      {
        "Group_Name": "Group Name 2",
        "Layer_1": "G2_Layer1",
        "name_1": "G2_Layer1",
        "Layer_2": "G2_Layer2",
        "name_2": "G2_Layer2",
        "Layer_3": "G2_Layer3",
        "name_3": "G2_Layer3"
      }

    }   
  ]
}

function generateList(){

    const ul = document.querySelector('.each_list')
    layer_group_list.features.forEach(e=>{
      let li = document.createElement('li')
      let a = document.createElement('a')
      let subUL = document.createElement('ul')
      for(let i=1;;i++){
        let name = e.properties['name_'+i]
        // if the name not exists,then go the next group
        if(!name){
          break;
         }
         let subLI = document.createElement('li')
         let span = document.createElement('span')
         span.innerText = name
         let cb = document.createElement('input')
         cb.setAttribute("type", "checkbox")
         
         subLI.appendChild(span)
         subLI.appendChild(cb)
         subUL.appendChild(subLI)
       }
      
      a.innerText = e.properties.Group_Name
    a.setAttribute("href", e.properties.Group_Name)
      li.appendChild(a)
      li.appendChild(subUL)
      ul.appendChild(li)
    })    

}
    
    
generateList();

<ul class="each_list">
</ul>

Answered By - lucumt