I need help printing the lists to HTML. This is overview and what I have so far
This is what it needs to look like:
Summary of Work Add an h1 heading and an empty ul tag to the HTML file. Add an embedded style sheet to remove list markers on the unordered list, and to remove bottom margin on the h2 headings that will be created. Change the contents of the 3 JSON files to something of interest to you. Change the key names, so they aren't "text" and "author" but something more appropriate for your lists. In the JavaScript file, write code to grab hold of the unordered list. Write a new function that accepts the data as a parameter, adds the h2 element with content from the first item in the data, then uses a foreach loop to add each piece of data in a list item element. When done, insert that new content into the innerHTML of the handle for the unordered list. Note that you will not need to make any changes to the getToDos() function in the JavaScript file. The changes to the call to that function will need to be updated for the new names of the JSON files, and the addition of the call to the new function after the console.log() lines of code. Here is the final example, after completing the JavaScript code to insert data in the HTML file with personalized information: US list.js > get Todos("json/amelia.json') callback 1 const getTodos = (resource, callback) => { 2 3 const request = new XMLHttpRequest(); 4 var myObj = ('json/amelia.json') 5 window.onload = function() { 6 x = myObj.task; 7 document.getElementById("list").innerHTML = x; 8 9 } 10 request.addEventListener( 'readystatechange', () => { 11 12 if (request.readyState === 4 && request.status === 200) { 13 const data = JSON.parse(request.responseText); 14 callback(undefined, data); 15 } else if (request.readyState === 4) { 16 callback('could not fetch the data', undefined); 17 } 18 19 }); 20 21 request.open('GET', resource); 22 request.send(); 23 24 }; 25 26 getTodos('json/amelia.json', (err, data) => [ 27 console.log('promise 1 resolved', data);|| 28 getTodos('json/sylas.json', (err, data) => { 29 console.log('promise 2 resolved', data); 30 getTodos('json/to_do.json', (err, data) => { 31 console.log('promise 3 resolved', data); 32 }); 33 }); 34 Topics to Study Web Class practice HTML coding, found in CodeCademy.com use more CSS style, found in W3Schools tutorial publish web sites, found in BlueHost, other ISPs Elements Console Sources Netw top Filter promise 1 resolved: (3) [{...}, {...}, {...}] promise 2 resolved: (3) [{...}, {...}, {...}] promise 3 resolved: (3) [{-}, {-}, {-}] > | Programming Class looping structures, found in ch. 6 decision structures, found in ch.5 procedures and functions, found in ch.7 SQL Class learn filters, found in chapters 6 learn joins, found in chapters 8 - 9 learn subqueries, found in chapter 11 Summary of Work Add an h1 heading and an empty ul tag to the HTML file. Add an embedded style sheet to remove list markers on the unordered list, and to remove bottom margin on the h2 headings that will be created. Change the contents of the 3 JSON files to something of interest to you. Change the key names, so they aren't "text" and "author" but something more appropriate for your lists. In the JavaScript file, write code to grab hold of the unordered list. Write a new function that accepts the data as a parameter, adds the h2 element with content from the first item in the data, then uses a foreach loop to add each piece of data in a list item element. When done, insert that new content into the innerHTML of the handle for the unordered list. Note that you will not need to make any changes to the getToDos() function in the JavaScript file. The changes to the call to that function will need to be updated for the new names of the JSON files, and the addition of the call to the new function after the console.log() lines of code. Here is the final example, after completing the JavaScript code to insert data in the HTML file with personalized information: US list.js > get Todos("json/amelia.json') callback 1 const getTodos = (resource, callback) => { 2 3 const request = new XMLHttpRequest(); 4 var myObj = ('json/amelia.json') 5 window.onload = function() { 6 x = myObj.task; 7 document.getElementById("list").innerHTML = x; 8 9 } 10 request.addEventListener( 'readystatechange', () => { 11 12 if (request.readyState === 4 && request.status === 200) { 13 const data = JSON.parse(request.responseText); 14 callback(undefined, data); 15 } else if (request.readyState === 4) { 16 callback('could not fetch the data', undefined); 17 } 18 19 }); 20 21 request.open('GET', resource); 22 request.send(); 23 24 }; 25 26 getTodos('json/amelia.json', (err, data) => [ 27 console.log('promise 1 resolved', data);|| 28 getTodos('json/sylas.json', (err, data) => { 29 console.log('promise 2 resolved', data); 30 getTodos('json/to_do.json', (err, data) => { 31 console.log('promise 3 resolved', data); 32 }); 33 }); 34 Topics to Study Web Class practice HTML coding, found in CodeCademy.com use more CSS style, found in W3Schools tutorial publish web sites, found in BlueHost, other ISPs Elements Console Sources Netw top Filter promise 1 resolved: (3) [{...}, {...}, {...}] promise 2 resolved: (3) [{...}, {...}, {...}] promise 3 resolved: (3) [{-}, {-}, {-}] > | Programming Class looping structures, found in ch. 6 decision structures, found in ch.5 procedures and functions, found in ch.7 SQL Class learn filters, found in chapters 6 learn joins, found in chapters 8 - 9 learn subqueries, found in chapter 11
