我正在获取一些json数据,并且:
我在这里看到了一些数据:
;
到目前为止,我已经设法显示前端的一切,但我不能访问它:例如:
以下是可视化数据:例如:
因为我也使用模板常量,但是每次我尝试使用querySelectorAll引用模板中的元素时,我都会得到一个nodeList,里面什么都没有,但是元素在那里。
我正在尝试使它,当你在一个区域内按下按钮时,将只显示该区域的提取数据,然后你可以更新数据,这是最终目标,
如果能够获取使用模板文本创建的元素,然后指定我只需要查看与单击的按钮对应的数据,这是最好的方法吗?
我知道很多事情。
下面是我JS:
// to fetch data from backend.
// const link = 'https://jsonplaceholder.typicode.com/users';
const link = './data copy.json';
// const container = document.getElementById('.item-container');
fetch(link)
.then(res => {
return res.json();
})
.then(data => {
console.log(data);
data.forEach( gun => {
const template = `
<div class="ticket">
<div class="id card"><p>${gun.gunId}</p>
</div>
<div class="location card">
<p class="gun-id">${gun.location}</p>
</div>
<div class="description card">
<button class="view" id="${gun.gunId}"onclick="modalForm(),updateForm(this.id)">Details</button>
<div class="modal">
<form class="modal-content" id ="form-data"onsubmit="event.preventDefault(); validateForm();">
<div class="form-header">
<h1 id="" class="gun-form-name"></h1>
<span id="" class="close" onclick="closeModal()">×</span>
<span id="" class="back-arrow fa-lg" type="button" onclick="goBack()" role="button" aria-label="Go Back Button"><i class="fa-solid fa-arrow-left"></i>
</span></div>
<section class="main-content">
<div class="container">
<div class="card">
<div class="wrapper">
<h3 id="title-id">${gun.gunId}</h3>
<div class="img">
<img class="gun-image"src="gun image.PNG" alt="test">
<button class="overlay-btn btn-1" type="button">${gun.partId.lightPipeId}</button>
<button class="overlay-btn btn-2" type="button">${gun.partId.lightbugId}</button>
<button class="overlay-btn btn-3" type="button">${gun.partId.batteryId}</button>
<button class="overlay-btn btn-4" type="button">${gun.partId.triggerId}</button>
<button class="overlay-btn btn-5" type="button">${gun.partId.triggerPcb}</button>
<button class="overlay-btn btn-6" type="button">${gun.partId.triggerSpring}</button>
<button class="overlay-btn btn-7" type="button">${gun.partId.grayCable}</button>
<button class="overlay-btn btn-8" type="button">${gun.partId.powerCableid}</button>
<button class="overlay-btn btn-9" type="button">${gun.partId.stockPcb}</button>
</div>
<div class="details">
<p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi ut iure molestiae dolores commodi amet reiciendis recusandae voluptatem porro cumque fuga excepturi eum necessitatibus, vel, assumenda alias voluptas debitis veniam.</p>
<p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi ut iure molestiae dolores commodi amet reiciendis recusandae voluptatem porro cumque fuga excepturi eum necessitatibus, vel, assumenda alias voluptas debitis veniam.</p>
<p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi ut iure molestiae dolores commodi amet reiciendis recusandae voluptatem porro cumque fuga excepturi eum necessitatibus, vel, assumenda alias voluptas debitis veniam.</p>
<p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi ut iure molestiae dolores commodi amet reiciendis recusandae voluptatem porro cumque fuga excepturi eum necessitatibus, vel, assumenda alias voluptas debitis veniam.</p>
<p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi ut iure molestiae dolores commodi amet reiciendis recusandae voluptatem porro cumque fuga excepturi eum necessitatibus, vel, assumenda alias voluptas debitis veniam.</p>
</div>
<div class="btn">
<button class="close-ticket"type="button">Close Ticket</button>
</div>
</div>
</div>
</div>
</section>
</form>
</div>
</div>
<div class="close-bt card">
<button class="delete-button"id="${gun.gunId}">Close</button>
</div>
</div>
</div>`
document.getElementById('item-container').insertAdjacentHTML('beforeend', template);
});
document.getElementById('open-tickets').innerHTML=data.length;
})
.catch(error=> console.log(error));
const modal = document.querySelectorAll(".modal");
console.log(modal);
1条答案
按热度按时间lsmepo6l1#
请记住,
fetch()
是异步的,因此虽然.then()
回调块中的所有代码都将在初始获取调用解析后执行,但querySelectorAll
位于承诺链之外。你可以这样看:
当您调用
fetch()
并返回未解决的承诺时,const modal = document.querySelectorAll('.modal');
会立即运行,因为它不在承诺链中。此时,您的模板文本HTML还没有插入到DOM中。要解决这个问题,需要将该语句作为JSON解析承诺的依赖项合并: