JSFiddle - React, Tailwind, and code Playground

JavaScript

function fetchJSON(url){
  fetch(url)
  .then(function(response) {
    return response.json();
  })
  .then(function(json) {
    const typeList =  json.objects.map(object => object.type);

    return typeList;
  })
  .then(function(typeList){
    typeList = _.uniq(typeList);

    //First letter to uppercase
    for (type in typeList) {
      typeList[type] = typeList[type].substr(0,1).toUpperCase() + typeList[type].substr(1).toLowerCase().replace("-", " ");
    }

    //Add <p> element before <hr>
    for (type in typeList) {
      $("<li><div class=\"icon\" style=\"background-image: url('/css/icons/" + typeList[type].toLowerCase().replace(" ","-") + ".png\")></div><p class=\"legend-item\">" + typeList[type] + "</p></li>").appendTo("#legend-content");
    }
  })
    .catch(function(error){
      console.log(error);
    });
};