如何根据所选值从 JSON 数组构建列表？

Question

我正在尝试根据所选媒体创建经过筛选的来源选择列表。我知道我在过滤器下面使用的方法，但没有正确显示列表。我半睡半醒，试图纠正这个问题，需要有人提供一些意见。:-) 干杯！

let types = [

  {

    "id": 1,

    "media": "TV",

    "source": "wkbw"

  },

  {

    "id": 2,

    "media": "TV",

    "source": "wffo"

  },

  {

    "id": 3,

    "media": "TV",

    "source": "wtrw"

  },

  {

    "id": 8,

    "media": "Radio",

    "source": "wrqa"

  },

  {

    "id": 9,

    "media": "Radio",

    "source": "wuqa"

  },

  {

    "id": 10,

    "media": "Radio",

    "source": "wzzt"

  }

]

$("#type").change(function() {

    $("#results").empty();

    selected = $("#type").val();

  

  for (var i = 0; i < types.length; i++) {

    // some kind of filter source by selected the one below isn't quite right

    // $("#results").append("<option value='" + types[i].source + "'>" + types[i].source + "</option>");

    source = types.filter(types => types.media === selected).map(d => d.source).join('');

    $("#results").append("<option value='" + source + "'>" + source + "</option>");

  }

});

这是我的小提琴：https ://jsfiddle.net/simplymarkb/sk0rdf2j/31/

Answer 1

您必须filter在循环外使用并获取source[i]选项中的值。也只是.html()用来清空。selectonchange给你 => 工作演示：https ://jsfiddle.net/usmanmunir/u38hrox1/11/只需运行代码片段即可查看它的作用。let types = [&nbsp; {"id": 1,"media": "TV","source": "wkbw"&nbsp; },&nbsp; {"id": 2,"media": "TV","source": "wffo"&nbsp; },&nbsp; {"id": 3,"media": "TV","source": "wtrw"&nbsp; },&nbsp; {"id": 8,"media": "Radio","source": "wrqa"&nbsp; },&nbsp; {"id": 9,"media": "Radio","source": "wuqa"&nbsp; },&nbsp; {"id": 10,"media": "Radio","source": "wzzt"&nbsp; }]$("#type").change(function() {&nbsp; $("#results").html('')&nbsp; var selected = $("#type").val();&nbsp; var source = types.filter(types => types.media === selected).map(d => d.source);&nbsp; for (var i = 0; i < source.length; i++) {&nbsp; &nbsp; $("#results").append("<option value='" + source[i] + "'>" + source[i] + "</option>");&nbsp; }});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select id="type">&nbsp; <option value="TV">TV</option>&nbsp; <option value="Radio">Radio</option></select><hr><select id="results">..results</select>

Answer 2

只需使用这样的简单 if 语句重写您的代码：&nbsp; &nbsp;let types = [&nbsp; {&nbsp; &nbsp; "id": 1,&nbsp; &nbsp; "media": "TV",&nbsp; &nbsp; "source": "wkbw"&nbsp; },&nbsp; {&nbsp; &nbsp; "id": 2,&nbsp; &nbsp; "media": "TV",&nbsp; &nbsp; "source": "wffo"&nbsp; },&nbsp; {&nbsp; &nbsp; "id": 3,&nbsp; &nbsp; "media": "TV",&nbsp; &nbsp; "source": "wtrw"&nbsp; },&nbsp; {&nbsp; &nbsp; "id": 8,&nbsp; &nbsp; "media": "Radio",&nbsp; &nbsp; "source": "wrqa"&nbsp; },&nbsp; {&nbsp; &nbsp; "id": 9,&nbsp; &nbsp; "media": "Radio",&nbsp; &nbsp; "source": "wuqa"&nbsp; },&nbsp; {&nbsp; &nbsp; "id": 10,&nbsp; &nbsp; "media": "Radio",&nbsp; &nbsp; "source": "wzzt"&nbsp; }]$("#type").change(function() {&nbsp; &nbsp; $("#results").empty();&nbsp; &nbsp; selected = $("#type").val();&nbsp;&nbsp;&nbsp; for (var i = 0; i < types.length; i++) {&nbsp; &nbsp; if(types[i].media === selected){&nbsp; &nbsp; &nbsp; $("#results").append("<option value='" + types[i].source +&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "'>" + types[i].source + "</option>");&nbsp; &nbsp; }&nbsp; }});

Answer 3

请看下面的解决方案let types = [&nbsp; {&nbsp; &nbsp; id: 1,&nbsp; &nbsp; media: "TV",&nbsp; &nbsp; source: "wkbw",&nbsp; },&nbsp; {&nbsp; &nbsp; id: 2,&nbsp; &nbsp; media: "TV",&nbsp; &nbsp; source: "wffo",&nbsp; },&nbsp; {&nbsp; &nbsp; id: 3,&nbsp; &nbsp; media: "TV",&nbsp; &nbsp; source: "wtrw",&nbsp; },&nbsp; {&nbsp; &nbsp; id: 8,&nbsp; &nbsp; media: "Radio",&nbsp; &nbsp; source: "wrqa",&nbsp; },&nbsp; {&nbsp; &nbsp; id: 9,&nbsp; &nbsp; media: "Radio",&nbsp; &nbsp; source: "wuqa",&nbsp; },&nbsp; {&nbsp; &nbsp; id: 10,&nbsp; &nbsp; media: "Radio",&nbsp; &nbsp; source: "wzzt",&nbsp; },];const type = document.querySelector("#type");const result = document.querySelector("#result");type.addEventListener("change", changeHandler);function changeHandler(event) {&nbsp; const output = types&nbsp; &nbsp; .filter((type) => type.media === event.target.value)&nbsp; &nbsp; .map((type) => `<option value="${type.source}">${type.source}</option>`)&nbsp; &nbsp; .join("");&nbsp; result.innerHTML = output;}&nbsp;&nbsp;<select name="type" id="type">&nbsp; <option value="" disabled selected>Select value</option>&nbsp; <option value="TV">TV</option>&nbsp; <option value="Radio">Radio</option></select><select name="result" id="result"></select><script src="app.js"></script>