Please explain to me the meaning of these codes
DO NOT COPY FROM OTHER WEBSITES
![Please explain to me the meaning of these
codes
function onSuccess(data) {
//console.log(data);
var books = JSON.parse(data);
document.getElementByld("bookList").append
Child(createTable(books));
}
var table_ = document.createElement('table'),
tr_ = document.createElement('tr'),
th_ = document.createElement('th'),
td_ = document.createElement('td');
function createTable(books) {
var table = table_.cloneNode(false),
columns = createTableHeader(books[0],
table);](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2F17b14c98-7e1f-4ff3-a9cd-76c2fbee0e9d%2Fc4c49cad-442f-4b42-963e-a482a6d95e41%2Fd05u39o_processed.jpeg&w=3840&q=75)
Note : I had re-factoring the given code , adding some additional functionality , with comments such that the code works.
Code with comments as explanation is mention as below:-
<html>
<head>
<title>Re-factoring the code so that it works</title>
</head>
<body>
<div id="bookList"></div>
</body>
<script>
// firstly onSuccess function will call
function onSuccess()
{
/*let's define json data (using harcoded json , but it may come from
any api as response and then, assign it to the constant variable named
as data*/
const data = '{"0":"javascript", "1":"C", "2":"C++"}';
var books = JSON.parse(data); //here parsing json data
//returns an element object whose id is bookList
var bookList = document.getElementById("bookList");
/*function createTable invokes and return a string as response
and then update the content of a div element having id="bookList"*/
bookList.innerHTML = createTable(books);
}
/*creates the HTML element specified by tag mamed as table and
assign it to the variable table_, similarly create html element
for tr and assign it to variable tr_, similarly create html
element for th_ and assign it to variable th_ and similarly
create html element for td_ and assign it to variable td_*/
var table_ = document.createElement('table'),
tr_ = document.createElement('tr'),
th_ = document.createElement('th'),
td_ = document.createElement('td');
function createTable(books)
{
/*cloneNode function generate a replica for a node,
here it is set to false and asign it to variable named
as table and then invokes createTableHeader function
and the response return by the invoked function will be
assigned to insertColumn variable and add table's
column value with content contained in zeroth index
of an array named as book (that conatins a strng named as
javascript , i.e. books[0] contains value as javascript and
return the response to the invoked /called function*/
var table = table_.cloneNode(false),
columns = createTableHeader(books[0],table)
var insertColumn = columns.insertCell(0);
return insertColumn.innerHTML = books[0];
}
/*create a new function named as createTableHeader,
note that this additional function was not mentioned
on the above question shown , I had added this functionality
for the code to work completely, it accepts two arguments first is
content consists in books[0] and a tableInstance*/
function createTableHeader(book, tableInstance)
{
/*As, variable named as table_ is defined is globally
available and the using createTHead function ,
that will generate an empty thead element and add
it to the table , assign the return object into the
variable named header*/
var header = table_.createTHead();
/*insertRow function generate an empty table row element and add it
to the first position of table head and assinging the return obejct to
a variable named row*/
var row = header.insertRow(0);
//returns the object named as row to the invoked or called function
return row;
}
//calling onSuccess() function
onSuccess();
</script>
</html>
Step by step
Solved in 2 steps with 3 images
