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.