Bootstrap PopUp Modal Reference Array

Question

How will i reference this popup modal to a specific title of array? Like i have 4 titles in an array. It outputs four lists of titles. But when i open each of the popup modal, it only shows the title of the first. Example, when i click the popup modal of the second title, it still shows the the title of the first. How can i address this?

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

How can i address this?

I guess you could try to loop over the data twice, and FIRST save your values to an array. You could then map your values to the PopUps depending on they array key.

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