Bootstrap PopUp Modal Reference Array

Question

如何将此弹出模式引用到数组的特定标题？就像我在数组中有4个标题一样。它输出四个标题列表。但是当我打开每个弹出窗口模式时，它只显示第一个标题。例如，当我点击第二个标题的弹出模式时，它仍然显示第一个标题。我如何解决这个问题？

function getThings(){ 

let selected = localStorage.getItem('token'); 
console.log(selected); 
fetch('http://sample_website/things', { 
    method: 'GET', 
    headers: {'Content-Type': 'application/json', 
    Authorization: 'Bearer ' + selected},  
}) 
.then(data => data.json()) 
.then(data => { 
    let output = document.getElementById("display"); 
    let iterable = data.data.data; 
    for(value of iterable){ 
     output.innerHTML += `<div class="panel panel-primary"> 
           <div class="panel-heading"><button class="btn btn-default view" data-toggle="modal" data-target="#viewmodal">View</button><button class="btn btn-danger delete">Delete</button> 
            <h5>${value.created_at}</h5></div> 
           <div class="panel-body"><h3>${value.title}</h3> 
          </div> 

          <div class="modal fade" id="viewmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
           <div class="modal-dialog" role="document"> 
            <div class="modal-content"> 
             <form> 
              <div class="modal-header"> 
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
               <h4 class="modal-title text-info" id="myModalLabel"><h3 class="text-center">${value.title}</h3> 
              </div> 
              <div class="modal-body">    
               ${value.body} 
              </div> 
             </form> 
            </div> 
           </div> 
          </div>`;  

    } 

}) 
.catch((err) => { 
    console.error(err); 
}) 

}

Answer 1

我怎样才能解决这个问题？

我想你可以尝试循环数据两次，并首先将你的值保存到一个数组。然后，您可以根据数组键将您的值映射到PopUps。

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Map