Answered step by step
Verified Expert Solution
Question
1 Approved Answer
if ( document . readyState = = = 'loading' ) { document.addEventListener ( ' DOMContentLoaded ' , readJSONFile ) } else { readJSONFile ( )
ifdocumentreadyState 'loading'
document.addEventListenerDOMContentLoaded readJSONFile
else
readJSONFile;
function readJSONFileFilename callback
fetchFilename
thenresponse response.json
thendata callbackdata
catcherror console.errorError reading the JSON file', error;
function booksObjectdata
const tableBody document.querySelectortbody;
createTableRowsdata tableBody;
function createTableRowsbooks tableBody
const fragment document.createDocumentFragment;
for const isbn in books
const book booksisbn;
const row document.createElementtr;
const isbnCell document.createElementtd;
const titleCell document.createElementtd;
const priceCell document.createElementtd;
const quantityCell document.createElementtd;
const totalCell document.createElementtd;
isbnCell.textContent isbn;
titleCell.textContent book.title;
priceCell.textContent book.price;
quantityCell.textContent book.quantity;
totalCell.textContent book.price book.quantity;
row.appendChildisbnCell;
row.appendChildtitleCell;
row.appendChildpriceCell;
row.appendChildquantityCell;
row.appendChildtotalCell;
fragment.appendChildrow;
tableBody.appendChildfragment;
readJSONFiledatabooksjson', booksObject;
function booksObject
let books
:
title : "DATA SCIENCE & BIG DATA ANALYSIS",
price :
quantity :
:
title : "PRINCIPLES OF DATABASE MANAGEMENT",
price :
quantity :
:
title : "CCNA ROUTING & SWITCHING PORTABLE COMMAND GUIDE",
price :
quantity :
:
title : "CCNA ROUTING AND SWITCHING : EXAM",
price :
quantity :
:
title : "HANDSON MICROSOFT WINDOWS SERVER
price :
quantity :
:
title : "INTRODUCTION TO WEB DEVE",
price :
quantity :
:
title : "MURACH'S PHP AND MYSQL
price :
quantity :
:
title : "REVEL FOR LIANG JAVA ACCESS CARD",
price :
quantity :
Error I am getting is "failed to fetch at readJSONFile. How do i fix this?
Also any corrections on code will help too. THANK YOU
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started