JSFiddle - React, Tailwind, and code Playground

HTML

<li>
    <a href="#">Types</a>
        <ul>
            <li>
                <a href="#"><span id="currenttype" title=""></span></a>
                <ul id="changetotypes"></ul>
            </li>
        </ul>
</li>

JavaScript

function populateTypes() {
    var jsonObjects = [ { type: 'a' }, { type: 'b' }, { type: 'c' } ];
    
    var availableTypes = [];
    for(var i = 0; i < jsonObjects.length; i++) {
        if(availableTypes.indexOf(jsonObjects[i].type) < 0) {
            availableTypes.push(jsonObjects[i].type);
            $('<li><a href="#">' + jsonObjects[i].type + '</a></li>')
            .data('type', jsonObjects[i].type)
            .on('click', function() { $("#currenttype").text($(this).data('type')); })
            .appendTo('#changetotypes');
        }
    }
}

$(function() {
    populateTypes();
});