I'm trying to create a series of lists in HTML of the form:
<div>
<h3>Math K</h3>
<li>Counting & Cardinality</li>
<li>Geometry</li>
</div>
<div>
<h3>Math 1</h3>
<li>Counting & Cardinality</li>
<li>Orders of Operation</li>
</div>
<div>
<h3>Math 2</h3>
<li>Geometry</li>
</div>
My original though was to create an array and push that into the <div> element on the page with $("#divid").append(array). I created an array that looks like this:
var standardsList = [
{"Grade": "Math K", "Domain": "Counting & Cardinality"},
{"Grade": "Math K", "Domain": "Counting & Cardinality"},
{"Grade": "Math K", "Domain": "Counting & Cardinality"},
{"Grade": "Math K", "Domain": "Counting & Cardinality"},
{"Grade": "Math K", "Domain": "Geometry"},
{"Grade": "Math 1", "Domain": "Counting & Cardinality"},
{"Grade": "Math 1", "Domain": "Counting & Cardinality"},
{"Grade": "Math 1", "Domain": "Orders of Operation"},
{"Grade": "Math 2", "Domain": "Geometry"},
{"Grade": "Math 2", "Domain": "Geometry"}
];
And I need to remove the duplicates so that something like this remains:
var standardsList = [
{"Grade": "Math K", "Domain": "Counting & Cardinality"},
{"Grade": "Math K", "Domain": "Geometry"},
{"Grade": "Math 1", "Domain": "Counting & Cardinality"},
{"Grade": "Math 1", "Domain": "Orders of Operation"},
{"Grade": "Math 2", "Domain": "Geometry"}
];
I've tried installing underscore.js and using ._uniq but that only seems to work when a single key:value pair appears in the object. I can't seem to get it to work across multiple keys.
When I try something like:
var uniqueStandards = _.uniq(standardsList, function(item, key, Domain){
return item.Domain;
});
I only get the first three unique values (one per grade). But I need all the unique values across both grade and domain. Is there a simple way to feed both keys to the _.uniq function?
Ultimately, I need a list with the each unique grade as the header and the unique domains as the list items to pass into an HTML page.
