jQuery 选择更改 JSON/数组值答案

【问题标题】：jQuery Select change JSON/Array ValuesjQuery 选择更改 JSON/数组值
【发布时间】：2015-09-02 16:32:08
【问题描述】：

我正在尝试剖析 JSON 数据以执行以下操作：

选择选项 > 列出每种类型
例如活动/冒险、海滩逃生、城市休闲。
在选择更改时 > 列出每个类型值以及分配给此选项的国家/地区。
例如 1 美国、2 澳大利亚、3 日本

当前问题：

选择选项 > 我无法收集每个类型而不创建一个循环，然后为所有国家/地区带来所有类型。
On Select Change > 由于上述方法不起作用，因此很难开发此部分，但仍然无法进行计划。现在，它会列出没有类型值的每个国家/地区，并显示 JSON 而不仅仅是值。

我已将项目上传到 GitHub：https://github.com/adamkwadsworth/Audley-Travel
JSON - https://github.com/adamkwadsworth/Audley-Travel/blob/master/json/locations.json

有问题的代码：

function filterData(){
  var rawdata = jsonData;
  //console.log(rawdata);
  var data = [];
  for (var index = 0; index < rawdata.length; index++) {
    var item = rawdata[index];
    var item1 = {};
    var type1 = {}, type2 = {}, type3 = {}, type4 = {}, type5 = {}, type6 = {}, type7 = {}, type8 = {}, type9 = {}, type10 = {};
    item1.Country = item.Location;
    type1["Activity/Adventure"] = item["Activity/ Adventure"];
    type2["Beach Escape"] = item["Beach Escape"];
    type3["City Break"] = item["City Break"];
    type4["Food/Culture"] = item["Food/Culture"];
    type5["Visiting Friends/Family"] = item["Visiting Friends/Family"];
    type6["Great Train/Boat Journey"] = item["Great Train/Boat Journey"];
    type7.Scenery = item.Scenery;
    type8.Sightseeing = item.Sightseeing;
    type9["Theme Park"] = item["Theme Park"];
    type10["Wildlife/Safari"] = item["Wildlife/Safari"];
    var types = [type1, type2, type3, type4, type5, type6, type7, type8, type9, type10];
    var items = [item1, types];
    data.push(items);
    var filterdata1 = JSON.stringify(item1);
    $('.filterlist').append('<li><span>1</span>'+filterdata1+'</li>');
  }
  console.log(data);

控制台日志：

【问题讨论】：

问题发布提示：如果包含指向存储库或 zip 文件的链接，帖子有时会在此处关闭或编辑。我认为在这种情况下没关系，因为您已经提供了大量其他细节，但请注意，我们希望找到尽可能独立的问题（断开的链接是有点问题，社区成员正在努力解决这个问题）。如果您想演示一个实际问题，请考虑使用 JS Fiddle 或类似的工具（当然，还要将所有相关代码放在帖子中）。谢谢！

标签： jquery arrays object

【解决方案1】：

虽然您已使用 jQuery 专门标记了此问题，但我将提供另一种方法：改用 MVVM 库。
通过稍微重构您的数据存储，这可以变成非常简单的代码，例如Vue.js：

var items = {
  'Activity/Adventure': ['USA', 'Canada', 'Russia'],
  'Beach Escape': ['Mexico', 'Egypt'],
  'Food': ['Italy', 'France']
};

new Vue({
  el: 'body',
  data: {
    selected: Object.keys(items)[0],
    items: items
  }
});

ul {
  list-style-type: decimal;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.12/vue.min.js"></script>
<select v-model="selected">
  <option v-repeat="items">{{$key}}</option>
</select>
<ul>
  <li v-repeat="item: items[this.selected]">{{item}}</li>
</ul>

【讨论】：