I was messing around with API's to gain familiarity with them, and I'm trying to display a list of object names from an API. But when I open my website, nothing is displayed and I get a CORS error. Here is my code:
const url = 'https://api.wynncraft.com/v2/ingredient/list';
const mainDiv = document.getElementById('container');
fetch(url)
.then((resp) => resp.json())
.then(function(data) {
let ingredients = data.results;
return ingredients.map(function(ingredient) {
let li = createNode('li');
let span = createNode('span');
span.innerHTML = `${ingredient.name}`;
append(li, span);
append(ul, li);
})
})
.catch(function(error) {
console.log(error);
});
function createNode(element) {
return document.createElement(element);
}
function append(parent, el) {
return parent.appendChild(el);
}
And the associated HTML:
<!DOCTYPE html>
<html>
<head>
<title>Wynncraft API Test</title>
</head>
<body>
<div id="container"></div>
<script src="script.js"></script>
</body>
</html>
Any help is greatly appreciated!
