Я пытаюсь создать карту после получения данных из API, но когда я пытаюсь реализовать карту, используя HTML и CSS, я не могу реализовать, может ли кто-нибудь предложить какой-либо способ реализации. Я пытаюсь получить данные API и попытка создать карту в коде javascript, но я не могу это сделать, когда я это делаю, это не дает мне желаемого результата. вот мой проверенный код
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="listingTable">
<div class="column">
<div class="column"></div>
</div>
</div>
<div style="text-align: center;">
<a
href="javascript:void(0)"
onclick="prevPage(); return false"
id="btn_prev"
>Prev</a
>
<a
href="javascript:void(0)"
onclick="nextPage(); return false"
id="btn_next"
>Next</a
>
page: <span id="page"></span>
</div>
<script>
var current_page = 1;
var records_per_page = 10;
var objJson = [];
fetch("./college.json")
.then((response) => response.json())
.then((college) => {
const collegeArray = college.colleges;
collegeArray.forEach((col) => {
objJson.push(col);
});
});
function prevPage() {
if (current_page > 1) {
current_page--;
changePage(current_page);
}
}
function nextPage() {
if (current_page < numPages()) {
current_page++;
changePage(current_page);
}
}
function changePage(page) {
var btn_next = document.getElementById("btn_next");
var btn_prev = document.getElementById("btn_prev");
var listing_table = document.getElementById("listingTable");
var page_span = document.getElementById("page");
// Validate page
if (page < 1) page = 1;
if (page > numPages()) page = numPages();
listing_table.innerHTML = "";
for (
var i = (page - 1) * records_per_page;
i < page * records_per_page;
i++
) {
listing_table.innerHTML += objJson[i].college_name + "<br>";
listing_table.innerHTML += objJson[i].discount + "<br>";
}
page_span.innerHTML = page;
if (page == 1) {
btn_prev.style.visibility = "hidden";
} else {
btn_prev.style.visibility = "visible";
}
if (page == numPages()) {
btn_next.style.visibility = "hidden";
} else {
btn_next.style.visibility = "visible";
}
}
function numPages() {
return Math.ceil(objJson.length / records_per_page);
}
window.onload = function () {
changePage(1);
};
</script>
</body>
</html>