I am consuming an API on the client-side and then rendering the data, however, not sure if there is a better to render it . The way I have done (see below sample) it seem messy and unreadable. I can't use any framework. This is a nodejs application. I was initially using the ejs but since I am calling the API on the client-side it doesn't make sense to use ejs.
<script>
let data;
async function getData() {
const response = await fetch(
"/version/all/?format=json&page=11",
{
method: "GET",
mode: "cors",
}
);
let dataresponse = await response.json();
renderData(dataresponse);
}
function renderData(data) {
const div = document.getElementById("main");
const table = document.createElement("table");
table.setAttribute("class", "table");
const tableBody = document.createElement("tbody");
table.appendChild(tableBody);
for (let i = 0; i < data.results.length; i++) {
const th = document.createElement("th");
th.setAttribute("scope", "row");
const chkbox = document.createElement("input");
chkbox.setAttribute("type", "checkbox");
th.append(chkbox)
const tr = document.createElement("tr");
tr.appendChild(th);
tableBody.appendChild(tr);
const td = document.createElement("td");
td.setAttribute("class", "w-40");
const p1 = document.createElement("p");
const a_url = document.createElement("a")
a_url.setAttribute("href", data.results[i].url )
a_url.textContent = `${data.results[i].version.split("-")[0]}`
p1.appendChild(a_url)
td.appendChild(p1);
const p2 = document.createElement("p");
td.appendChild(p2);
p2.appendChild(
document.createTextNode(
`${data.results[i].text.author.author}`
)
);
const p3 = document.createElement("p");
td.appendChild(p3);
p3.appendChild(
document.createTextNode(`${data.results[i].text.title}`)
);
const td2 = document.createElement("td");
td2.setAttribute("class", "w-40");
const p4 = document.createElement("p");
td2.appendChild(p4);
p4.appendChild(
document.createTextNode(`${data.results[i].text.author.author}`)
);
const p5 = document.createElement("p");
td2.appendChild(p5);
p5.appendChild(
document.createTextNode(
`${data.results[i].text.title}`
)
);
const td3 = document.createElement("td");
td3.setAttribute("class", "w-10");
const p6 = document.createElement("p");
sp1 = document.createElement('span')
sp1.setAttribute('class','bi bi-download')
sp2 = document.createElement('span')
sp2.setAttribute('class','bi bi-body-text')
sp3 =document.createElement('span')
sp3.setAttribute('class','bi bi-journal')
sp4 = document.createElement('span')
sp4.setAttribute('class','bi bi-bezier')
p6.appendChild(sp1);
p6.appendChild(sp2);
p6.appendChild(sp3);
p6.appendChild(sp4);
td3.appendChild(p6);
const td4 = document.createElement("td");
td4.setAttribute("class", "w-10");
tr.appendChild(td);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
div.appendChild(table);
}
}
getData();
</script>
It cannot be answered in a post. But, I like to give you an idea of one way to go about.
You could have something like this:
function getById(id) {}
function createElement(type, attributes) {}
function createParagraph(attributes, text) {
const element = createElement('p', attributes);
element.appendChild(document.createTextNode(text));
return element;
}
function createLink(text, url, attributes) {
const element = createElement('a', {...attributes, href: url});
element.appendChild(document.createTextNode(text));
return element;
}
I hope you get the idea.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.