Создать флажки на основе значений JSON

Question

Мой json выглядит следующим образом

[ {
        "type": "quant",
        "name": "horizontalError",
        "prop": [
            0.12,
            12.9
        ]
    },
    {
        "type": "categor",
        "name": "magType",
        "prop": [
            "ml",
            "md",
            "mb"
        ]
    }]

Я создал раскрывающееся меню, используя свойство "name" каждого объекта.Теперь я пытаюсь создать флажки, если тип является категорией и ползунком, если тип является квантом, основываясь на имени, которое пользователь выбирает в раскрывающемся меню

Я зашел так далеко, но застрял здесь -

d3.json("hashmap.json", function(error,data) {
    if(error) {console.log("error fetching data");}

var hashap = data;



var dropDown = d3.select("#sel").selectAll("option").data(hashap).enter().append("option").text(function(d) { return d.name} ).attr("value",function(d, i) {
         return i;});

    d3.select("#sel").on("change", function() {
          var checkSlider = d3.select("#checkSlider"); // clearing previous checkbox or slider
          if(hashap[this.value].type == "categor") {
            console.log(hashap[this.value].prop.length);
            for(var i =0; i >= hashap[this.value].prop.length; i++){
            checkSlider.append("input").attr("type","checkbox");
            checkSlider.append("label").text(hashap[this.value].prop[i]);
          }
          }
          else {
            checkSlider.append("input").attr("type","range").attr("min", hashap[this.value].prop[0]).attr("max", hashap[this.value].prop[1]);
            checkSlider.append("label").text(hashap[this.value].name);      
          }
        });

Answer 1

Я добавил комментарии в коде.Надеюсь, это поможет

    var hashap = [ {
        "type": "quant",
        "name": "horizontalError",
        "prop": [
            0.12,
            12.9
        ]
    },
    {
        "type": "categor",
        "name": "magType",
        "prop": [
            "ml",
            "md",
            "mb"
        ]
    }];
    
   // creating drop down  
	var dropDown = d3.select("#dropdown").selectAll("option").data(hashap).enter().append("option").text(function(d) { return d.name} ).attr("value",function(d, i) {
	return i;});
  
  // adding onchange function 
	d3.select("#dropdown").on("change", function() {
		var checkSlider = d3.select("#checkSlider").html(""); // clearing previous checkbox or slider
		if(hashap[this.value].type == "categor") {
			checkSlider.append("input").attr("type","checkbox");
			checkSlider.append("label").text(hashap[this.value].name);
		}
		else {
			checkSlider.append("input").attr("type","range").attr("min", 0).attr("max", 100);
			checkSlider.append("label").text(hashap[this.value].name);			
		}
	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<select id="dropdown" ></select>
	<div id="checkSlider"><div>