javascript 如何访问获取的数据并使用模板文本将其可视化

我正在获取一些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);

请记住，fetch()是异步的，因此虽然.then()回调块中的所有代码都将在初始获取调用解析后执行，但querySelectorAll位于承诺链之外。
你可以这样看：

fetch(link)
    .then((res) => { //...
    })
    .then((data) => { //...
    })
    .catch((error) => console.log(error));

const modal = document.querySelectorAll('.modal');
console.log(modal);

当您调用fetch()并返回未解决的承诺时，const modal = document.querySelectorAll('.modal');会立即运行，因为它不在承诺链中。此时，您的模板文本HTML还没有插入到DOM中。
要解决这个问题，需要将该语句作为JSON解析承诺的依赖项合并：

fetch(link)
    .then((res) => { //...
    })
    .then((data) => { //...
        const modal = document.querySelectorAll('.modal');
        console.log(modal);
    })
    .catch((error) => console.log(error));

javascript 如何访问获取的数据并使用模板文本将其可视化

1条答案

相关问题

热门标签

最新问答