DOM manipulation question

by haikutear

HTML

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>

JavaScript

/**
You are given the following URL: 

https://gist.githubusercontent.com/huy-nguyen/c3c1f798f710aa3b67815b154691dc5c/raw/95589b9ca87f76423f446835ff3fdc5ec3addb6a/simpson-characters.json

A GET request to that URL will return a JSON array (containing information about the Simpsons) that looks like this:
[
  {"label": "some-string", "color": "some-other-string", "link": "some-url"},
  {"label": "some-string", "color": "some-other-string", "link": "some-url"}
]

Using vanilla JavaScript, obtain that JSON data, sort it by the label. 
Then using either vanilla JavaScrip t or React (already available in global scope), display it in the DOM as an ordered list. Give each link's text a color matching its "color" property. The final DOM markup should look similar to below:

<ol>
  <li><a href="some-link">some-string</a></li>
  <li><a href="some-link">some-string</a></li>
</ol>

Extra question: how would you make the links open in a new browser tab?

*/

const data = fetch("https://gist.githubusercontent.com/huy-nguyen/c3c1f798f710aa3b67815b154691dc5c/raw/95589b9ca87f76423f446835ff3fdc5ec3addb6a/simpson-characters.json")
.then((response) => response.json())
.then(data => console.log(data));

/* data.sort((a, b) => {
  
}) */