How can I “filter” JSON for unique key name/value pairs?

Question

I've got some JSON data that is giving me a list of languages with info like lat/lng, etc. It also contains a group value that I'm using for icons--and I want to build a legend with it. The JSON looks something like this:

{"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"}
]}

And I want to "filter" it to end up like this:

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

Right now I've got this, using jQuery to create my legend..but of course it's pulling in all values:

$.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');
    });
});

How can I only grab the unique name/value pairs in the entire JSON object, for a given pair?

Answer 1

I'd transform the array of markers to a key value pair and then loop that objects properties.

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

then

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

or

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

This code sample overwrites the unique value with the last value in the loop. If you want to use the first value instead you will have to perform some conditional check to see if the key exists.

Answer 2

How about something more generic?

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.
}

Not only such a function would return all the distinct values you specify but it will also group them if you need to access them.

In your sample you would use:

$.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');

}

Answer 3

See this- Best way to query back unique attribute values in a javascript array of objects?

You just need a variation that checks for 2 values rather than 1.

Answer 4

var markers  = _.uniq( _.collect( markers , function( x ){
                        return JSON.stringify( x ); 
                    })); 

reference