jQuery选择更改JSON /数组值

Question

我试图剖析JSON数据以执行以下操作：

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



当前问题：

1. 选择选项＆gt;如果没有制作循环，我就无法收集每个类型，然后为所有国家/地区带来所有类型。
2. 选择更改＆gt;由于上述方法不起作用，因此很难开发此部分，但仍无法进行规划。它现在列出没有类型值的每个国家/地区，并显示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);

控制台日志：

Answer 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>