javascript - 我如何能够“过滤”JSON以获取唯一的键名/值对？

我有一些 JSON 数据，它给了我一个包含语言列表的信息，比如纬度/经度等。它还包含一个我用来表示图标的分组值——我想用它来制作一个图例。JSON 看起来像这样：

{"markers":[
  {"language":"Hungarian","group":"a", "value":"yes"},
  {"language":"English", "group":"a", "value":"yes"},
  {"language":"Ewe", "group":"b", "value":"no"},
  {"language":"French", "group":"c", "value":"NA"}
]}

我想要把它“过滤”成这样：

{"markers":[
 {"group":"a", "value":"yes"},
 {"group":"b", "value":"no"},
 {"group":"c", "value":"NA"}
]}

现在我有这个，使用 jQuery 来创建我的图例……但当然它会拉取所有的值：

$.getJSON("http://127.0.0.1:8000/dbMap/map.json", function(json){
    $.each(json.markers, function(i, language){
        $('<p>').html('<img src="http://mysite/group' + language.group + '.png\" />' + language.value).appendTo('#legend-contents');
    });
});

如何仅抓取整个 JSON 对象中给定键值对的唯一名称/值组合？

答案＃1

我会将标记数组转换为键值对，然后循环遍历该对象的属性。

var markers = [{"language":"Hungarian","group":"a", "value":"yes"}, 
  {"language":"English", "group":"a", "value":"yes"}, 
  {"language":"Ewe", "group":"b", "value":"no"},
  {"language":"French", "group":"c", "value":"NA"}];

var uniqueGroups = {};
$.each(markers, function() {
  uniqueGroups[this.group] = this.value;
});

然后

$.each(uniqueGroups, function(g) {
  $('<p>').html('<img src="http://mysite/group' + g + '.png\" />' + this).appendTo('#legend-contents');
});

或

for(var g in uniqueGroups)
{
  $('<p>').html('<img src="http://mysite/group' + g + '.png\" />' + uniqueGroups[g]).appendTo('#legend-contents');
}

此代码示例将唯一值覆盖为循环中的最后一个值。如果您想使用第一个值，则必须进行一些条件检查以查看键是否存在。

答案＃2

要不要一些更通用的东西？

function getDistinct(o, attr)
{
 var answer = {};
 $.each(o, function(index, record) {
   answer[index[attr]] = answer[index[attr]] || [];
   answer[index[attr]].push(record);
 });

 return answer;    //return an object that has an entry for each unique value of attr in o as key, values will be an array of all the records that had this particular attr.
}

这样的函数不仅会返回你指定的所有不同值，而且如果你需要访问它们，它还会对它们进行分组。

在你的示例中你会使用：

$.each(getDistinct(markers, "group"), function(groupName, recordArray)
{ var firstRecord = recordArray[0];
        $('<p>').html('<img src="http://mysite/group' + groupName+ '.png\" />' + firstRecord.value).appendTo('#legend-contents');

}