JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<div id='hueta'>
<hr>
</div>

CSS

#hueta {
  background-color:#ff0000;
  position:absolute;
  width:100%;
  height:100%;
}

JavaScript

url='https://raw.githubusercontent.com/oasis-open/cti-stix-visualization/master/test.json'
async function fetchJSON(url){
  try {
    const response = await fetch(url);
    const json = await response.json();
    console.log(json);
    return json;
  } catch {
    console.log(err);
  }
}

function populateLegend(json) {
    let typeList = json.objects.map(object => object.type);
    for (i=0; i<_.uniq(typeList).length; i++) {
        if (_.uniq(typeList)[i] != 'relationship' & _.uniq(typeList)[i] != 'marking-definition') {
          $('hr').before('<p>' + _.uniq(typeList)[i] + '</p>')
        }
    }
}

async function populate(url, callback){
  await fetchJSON(url);
  await populateLegend(json);
}

populate(url, fetchJSON);