In the JavaScript file, code a function that will create the new content. This function will need the data that was just fetched passed in as a parameter. In the getToDos() function, that data is logged to the console, then there is a return statement. This new function to create HTML content with that data will be called between the console.log() and the return statements. The function needs a parameter for the data just fetched, to process it before new data is fetched.

I need to create an unordered list in html file, i'm having trouble creating a function to get the data from the json file.

//amelia's list

const getTodos = async () => {

let response = await fetch('json/amelia.json');

if (response.status !== 200) {

throw new Error('cannot fetch the data');

}

let data = await response.json();

return data;

}

getTodos()

.then(data => console.log('resolved:', data))

.catch(err => console.log('rejected:', err.message));

//sylas's list

const getTask = async () => {

let response = await fetch('json/sylas.json');

if (response.status !== 200) {

throw new Error('cannot fetch the data');

}

let data = await response.json();

return data;

};

getTask()

.then(data => console.log('resolved:', data))

.catch(err => console.log('rejected:', err.message));

const getTasks = async () => {

let response = await fetch('json/to_do.json');

if (response.status !== 200) {

throw new Error('cannot fetch the data');

}

let data = await response.json();

return data;

};

getTasks()

.then(data => console.log('resolved:', data))

.catch(err => console.log('rejected:', err.message));

function myFunction() {

var myObj = document.querySelectorAll("h2");

var i;

for (i = 0; i < myObj.task.length; i++) {

x += myObj.task[i];

document.getElementById("data").innerHTML = x;

}}

//what I have so far.