当我点击一个按钮时,我希望打开一个模态框,并在该模态框中显示一些从服务器获取的数据。我使用JSON服务器作为虚假服务器和Materialize CSS作为CSS框架。我只能部分地打开模态框并显示部分数据。控制台中没有看到任何错误。
这是我的Github存储库链接:
https://github.com/Ivan3628/IT-logger-js
HTML
<ul>
<li>
<a
href="#tech-list-modal"
class="btn-floating green modal-trigger tech-collection"
><i class="material-icons">person</i></a
>
<!--Tech list modal-->
<div id="tech-list-modal" class="modal">
<div class="modal-content">
<h4>Technician List</h4>
<ul class="collection" id="tech-workers"></ul>
</div>
</div>
</li>
</ul>
app.js
const showTechList = () => {
axios
.get("http://localhost:5000/techs")
.then(response => ui.showList(response.data))
.catch(err => console.log(err));
};
document
.querySelector(".tech-collection")
.addEventListener("click", showTechList);
ui.js
class UI {
constructor() {
this.techList = document.querySelector("#tech-workers");
}
showList(techs) {
let output = "";
techs.forEach(tech => {
output += `
<li class="collection-item">
<div>
${tech.firstName} ${tech.lastName}
<a href="#!" class="secondary-content delete-tech" data-id="${tech.id}">
<i class="material-icons grey-text">delete</i>
</a>
</div>
</li>`;
});
this.techList.innerHTML = output;
}
}
export const ui = new UI();
db.json
{
"techs": [
{
"firstName": "Jennifer",
"lastName": "Williams",
"id": 1
},
{
"firstName": "John",
"lastName": "Doe",
"id": 2
},
{
"firstName": "Sam",
"lastName": "Smith",
"id": 3
}
]
}