JSFiddle - React, Tailwind, and code Playground
HTML
<div id="placeholder"></div>
JavaScript
var data = {"cocktails":[
{
"name":"Bloody Mary",
"glass":"longdrink",
"ingredients": {
"main":"vodka",
"secondary":"tomato juice",
"addition":"tabasco"
}
},
{
"name":"Daiquiri",
"glass":"martini glass",
"ingredients": {
"main":"white rum",
"secondary":"lime juice",
"addition":"sugar syrup"
}
},
{
"name":"Martini",
"glass":"martini glass",
"ingredients": {
"main":"gin",
"secondary":"vermout",
"addition":"olive"
}
}
]
}
function uniqueValues (arr) {
//if (arr.length < 2) return arr;
var retVal = {};
for (var i = 0; i < arr.length; i++) {
retVal[arr[i].glass] = arr[i];
}
return retVal;
}
var uniqueArrayValues = uniqueValues(data.cocktails);
for (key in uniqueArrayValues) {
var output = "<ul><li>" + uniqueArrayValues[key].glass + "</li></ul>";
$('#placeholder').append(output);
}