CarDieAleCa/app_template/www/fetch_articles.js

var articles;
axios.get(`http://localhost:5000/articles`)
    .then(response => {
        articles = response.data;
        for (let i = 0; i < articles.length; i++) {
            let element = articles[i];
            axios.get(`http://localhost:5000/articles/${element}`)
                .then(response => {
                    let articlesHeading = document.querySelector("#articles-heading").parentElement;
                    let articleButton = document.createElement("button");
                    articleButton.textContent = response.data;

                    articleButton.classList.add("m-5", "article-content");
                    articleButton.setAttribute("data-toggle", "modal");
                    articleButton.setAttribute("data-target", `#articleModal${i}`);

                    let modal = document.createElement("div");
                    modal.classList.add("modal", "fade");
                    modal.setAttribute("id", `articleModal${i}`);
                    modal.setAttribute("tabindex", "-1");
                    modal.setAttribute("aria-labelledby", `articleModalLabel${i}`);
                    modal.setAttribute("aria-hidden", "true");
                    modal.innerHTML = `
                        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="articleModalLabel${i}">${element}</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    ${response.data}
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>`;
                    document.body.appendChild(modal);
                    articlesHeading.appendChild(articleButton);
                })
                .catch(error => console.error(error));
        }
    })
    .catch(error => console.error(error));