I am currently trying to write Javascript to fetch JSON data (specifically, the SECOND JSON object and add it to the the

tag with the id "content".

I want to use

for the name of the animal,

for the scientific name,

for the description and create elements so that if more images get added to the JSON, the code can still work.

But I have been getting this error message: from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome-untrusted, https, edge. I am wondering if I made an error in my code somewhere and would love any and all feedback to fix this as I have been stuck on it for a while! Thank you so much!

JSON:

[ { "key1": "value", "key2": "value", "key3": "value.", "key4": { "image": [ "images.jpg" ] } }, { // ***this is what I am trying to access and add to the HTML*** "common_name": "Dolphin", "scientific_name": "Delphinus Linnaeus", "description": "description here..", "images": { "image": [ "dolphin1.jpg", "dolphin2.jpg", "dolphin3.jpg", "dolphin4.jpg" ] } } ]

Javascript:

document.addEventListener("DOMContentLoaded", load);

function createZooland(zoolandData) { let odd = true; let animalsList = document.getElementsByTagName("li");

for(let i = 0; i

let ul = document.getElementById("animals"); let li = document.createElement("li"); let h2 = document.createElement("h2"); let h3 = document.createElement("h3"); let blockquote = document.createElement("blockquote"); let img = document.createElement("img");

ul.appendChild(li);

h3.innerHTML = `${zoolandData[i].common_name}`; li.appendChild(h2);

h4.innerHTML = `${zoolandData[i].scientific_name}`; li.appendChild(h3);

blockquote.innerHTML = `${zoolandData[i].description}`; li.appendChild(blockquote);

for (let j = 0; j

function load() {

fetch("zooland.json") .then(function(result){ return result.json(); }) .then(function(data){ createZooland(data); }); }

HTML:

JSON Zooland

JSON Manipulation

Virtual Zoo

Glutton Media - Copywrong 2020