Каскадное выделение с источником данных JSON

Question

Я пытаюсь построить каскадные выборки на основе данных, извлеченных как JSON.

Я пытаюсь добиться максимальной производительности и совместимости со всеми современными браузерами (IE11 +).

Поведение:

1. Пользователь выбирает рынок
2. Создается новый выбор со списком соответствующих товаров для выбранного рынка
3. Пользователь выбирает товар
4. Создается новый выбор со списком соответствующего типа цены для выбранного товара

Данные JSON структурированы следующим образом:

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

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

Я использую следующий код js:

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);

Я застрял в точке №.2 как Я не понимаю, как выбрать только товары выбранного рынка

здесь я подготовил jsfiddle с полным примером данных: https://jsfiddle.net/182dnzbL/1/

Answer 1

Я думаю, что решил это следующим образом:

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);
}

, поэтому с помощью этой инструкции я могу получить только те данные, которые мне нужны: var goodsities = json.filter (e => e.marketId== marketId) [0] .commodities;

вот скрипка: 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>