How to convert this code so that a function will read an external JSON data file then convert data into a JavaScript object using JSON.parse$().$

The value of the parameter that you will pass to the function is: "data$/$books$.$json".

The second parameter is the name of the function that must be run after the file has been read from the server. This is your callback function.

HERE IS Mlet tableBody $=$ document.querySelector$(\text{'}$tbody$\text{'})$;

function booksObject$()\{$

let books $=\{$

$9781118876138$ : $\{$

title : "DATA SCIENCE & BIG DATA ANALYSIS",

price : $60\mathrm{.}24,$

quantity : $1\},$

$9781107186125$ : $\{$

title : "PRINCIPLES OF DATABASE MANAGEMENT",

price : $77\mathrm{.}25,$

quantity : $1\},$

$9781587205880$ : $\{$

title : "CCNA ROUTING & SWITCHING PORTABLE COMMAND GUIDE",

price : $24\mathrm{.}26,$

quantity : $2\},$

$9781119288312$ : $\{$

title : "CCNA ROUTING AND SWITCHING : EXAM",

price : $73\mathrm{.}50,$

quantity : $2\},$

$9781305078628$ : $\{$

title : "HANDS$-$ON MICROSOFT WINDOWS SERVER $2016",$

price : $108\mathrm{.}75,$

quantity : $1\},$

$9781541895386$ : $\{$

title : "INTRODUCTION TO WEB DEVE",

price : $65\mathrm{.}25,$

quantity : $1\},$

$9781943872381$ : $\{$

title : "MURACH'S PHP AND MYSQL$",$

price : $43\mathrm{.}25,$

quantity : $1\},$

$9780134167008$ : $\{$

title : "REVEL FOR LIANG JAVA ACCESS CARD",

price : $86\mathrm{.}75,$

quantity : $1\}$

$\}$

if $($document$.$readyState $===$ 'loading' $)\{$

document.addEventListener$(\text{'}$DOMContentLoaded$\text{'},$ booksObject$)$;

$\}$else $\{$

booksObject$()$;

$\}$

function createTableRows$($books$)\{$

const fragment $=$ document.createDocumentFragment$()$;

for $($const books of data$)\{$

const row $=$ document.createElement$(\text{'}$tr$\text{'})$;

const isbnCell $=$ document.createElement$(\text{'}$td$\text{'})$;

const titleCell $=$ document.createElement$(\text{'}$td$\text{'})$;

const priceCell $=$ document.createElement$(\text{'}$td$\text{'})$;

const quantityCell $=$ document.createElement$(\text{'}$td$\text{'})$;

const totalCell $=$ document.createElement$(\text{'}$td$\text{'})$;

isbnCell.textContent $=$ book.isbn;

titleCell.textContent $=$ book.title;

priceCell.textContent $=$ book.price;

quantityCell.textContent $=$ book.quantity;

const totalPrice $=$ book.price $*$ book.quantity;

totalCell.textContent $=$ totalPrice;

row.appendChild$($isbnCell$)$;

row.appendChild$($titleCell$)$;

row.appendChild$($priceCell$)$;

row.appendChild$($quantityCell$)$;

row.appendChild$($totalCell$)$;

fragment.appendChild$($row$)$;

$\}$

tableBody.appendChild$($fragment$)$;

$\}$

createTableRows$($books$)$;

$\}$;Y CODE: