JSFiddle - React, Tailwind, and code Playground

by Graham Fairweather

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

$('#placeholder').append('<ul><li>' + data.cocktails.map(function (cocktail) {
    return cocktail.glass;
}).filter(function (glass, index, array) {
    return array.indexOf(glass) === index;
}).join('</li><li>') + '</li></ul>');