与JSON数据源级联选择

Question

I'm trying to build a cascading selects based on data retrieved as JSON.

I'm trying to achieve the best performance and compatibility with all modern browser (IE11+).

The behaviour is:

1. The user select a market
2. A new select with a list of relevant commodities to the selected market is created
3. The user select a commodity
4. A new select with a list of relevant price type to the selected commodity is created

The JSON data is structured like this:

[{
    "marketName": "def",
    "marketId": 124,
    "commodities": [
      {
        "commodityName": "Maize",
        "commodityId": 21,
        "priceTypes": [
          {
            "typeName": "Wholesale",
            "typeId": 16,
            "unitOfMeasures": [
              {
                "unitName": "MT",
                "unitId": 80
              }
            ]
          }
        ]
      }
   }]

I can also change the above structure if there is a more efficient way to represent it.

The js code I'm using is the following:

var marketSelect=document.createElement('select');
marketSelect.addEventListener("change", function(){
    showCommodities(this.options[this.selectedIndex].value);
});

json.forEach(function(obj) {
   var opt = document.createElement("option");
   opt.value= obj.marketId;
   opt.innerHTML = obj.marketName;
   marketSelect.appendChild(opt);
});
document.getElementById('app').appendChild(marketSelect);

I'm stucked at point No.2 as I don't understand how to select only the commodities of the selected market

here I've prepared a jsfiddle with full data example: https://jsfiddle.net/182dnzbL/1/

Answer 1

I think I've solved this way:

var marketSelect=document.createElement('select');
marketSelect.addEventListener("change", function(){
    showCommodities(this.options[this.selectedIndex].value);
});

json.forEach(function(obj) {
   var opt = document.createElement("option");
   opt.value= obj.marketId;
   opt.innerHTML = obj.marketName;
   marketSelect.appendChild(opt);
});
document.getElementById('app').appendChild(marketSelect);


function showCommodities(marketId){
  var commoditySelect=document.createElement('select');
  commoditySelect.addEventListener("change", function(){
      //showPriceTypes...
  });
  var commodities = json.filter(e=>e.marketId==marketId)[0].commodities;
  commodities.forEach(function(obj) {
     var opt = document.createElement("option");
     opt.value= obj.commodityId;
     opt.innerHTML = obj.commodityName;
     commoditySelect.appendChild(opt);
  });
  document.getElementById('app').appendChild(commoditySelect);
}

so with this instruction I'm able to get only the data I need: var commodities = json.filter(e=>e.marketId==marketId)[0].commodities;

here is the fiddle: https://jsfiddle.net/182dnzbL/4/

 var json = [{ "marketName": "abc", "marketId": 123, "commodities": [{ "commodityName": "Maize", "commodityId": 21, "priceTypes": [{ "typeName": "Retail", "typeId": 15, "unitOfMeasures": [{ "unitName": "KG", "unitId": 73 }] }, { "typeName": "Wholesale", "typeId": 16, "unitOfMeasures": [{ "unitName": "MT", "unitId": 80 }] } ] }, { "commodityName": "Wheat", "commodityId": 22, "priceTypes": [{ "typeName": "Retail", "typeId": 15, "unitOfMeasures": [{ "unitName": "KG", "unitId": 73 }] }] }, { "commodityName": "Rice", "commodityId": 23, "priceTypes": [{ "typeName": "Retail", "typeId": 15, "unitOfMeasures": [{ "unitName": "KG", "unitId": 73 }] }, { "typeName": "Wholesale", "typeId": 16, "unitOfMeasures": [{ "unitName": "MT", "unitId": 80 }] } ] }, { "commodityName": "Milk", "commodityId": 24, "priceTypes": [{ "typeName": "Retail", "typeId": 15, "unitOfMeasures": [{ "unitName": "L", "unitId": 73 }] }, { "typeName": "Wholesale", "typeId": 16, "unitOfMeasures": [{ "unitName": "L", "unitId": 73 }, { "unitName": "10 L", "unitId": 74 } ] } ] } ] }, { "marketName": "def", "marketId": 124, "commodities": [{ "commodityName": "Maize", "commodityId": 21, "priceTypes": [{ "typeName": "Wholesale", "typeId": 16, "unitOfMeasures": [{ "unitName": "MT", "unitId": 80 }] }] }, { "commodityName": "Wheat", "commodityId": 22, "priceTypes": [{ "typeName": "Retail", "typeId": 15, "unitOfMeasures": [{ "unitName": "12.5 KG", "unitId": 73 }] }] }, { "commodityName": "Rice", "commodityId": 23, "priceTypes": [{ "typeName": "Retail", "typeId": 15, "unitOfMeasures": [{ "unitName": "KG", "unitId": 73 }] }, { "typeName": "Wholesale", "typeId": 16, "unitOfMeasures": [{ "unitName": "MT", "unitId": 80 }] } ] }, { "commodityName": "Oil", "commodityId": 26, "priceTypes": [{ "typeName": "Retail", "typeId": 15, "unitOfMeasures": [{ "unitName": "L", "unitId": 73 }] }, { "typeName": "Wholesale", "typeId": 16, "unitOfMeasures": [{ "unitName": "L", "unitId": 73 }, { "unitName": "15 L", "unitId": 77 } ] } ] } ] } ]; var marketSelect = document.createElement('select'); marketSelect.addEventListener("change", function() { showCommodities(this.options[this.selectedIndex].value); }); json.forEach(function(obj) { var opt = document.createElement("option"); opt.value = obj.marketId; opt.innerHTML = obj.marketName; marketSelect.appendChild(opt); }); document.getElementById('app').appendChild(marketSelect); function showCommodities(marketId) { var commoditySelect = document.createElement('select'); commoditySelect.addEventListener("change", function() { //showPriceTypes... }); var commodities = json.filter(e => e.marketId == marketId)[0].commodities; commodities.forEach(function(obj) { var opt = document.createElement("option"); opt.value = obj.commodityId; opt.innerHTML = obj.commodityName; commoditySelect.appendChild(opt); }); document.getElementById('app').appendChild(commoditySelect); } 

 <div id="app"></div>