CarDieAleCa/app_template/www/fetch_articles.js

function get_articles(single = false) {
    var articles;
    axios.get("http://136.145.231.32:8080/")
        .then(response => {
            articles = response.data;
            if (single) {
                let artName = articles[articles.length - 1];
                axios.get(`http://136.145.231.32:8080/${artName}`)
                    .then(response => {
                        let homeArticleParent = document.querySelector("#home-article")
                        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", "#homeArticleModal");

                        let modal = document.createElement("div");
                        modal.classList.add("modal", "fade");
                        modal.setAttribute("id", "homeArticleModal");
                        modal.setAttribute("tabindex", "-1");
                        modal.setAttribute("aria-labelledby", "homeArticleModalLabel");
                        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="homeArticleModal">${artName}</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);
                        homeArticleParent.appendChild(articleButton);
                    })
                    .catch(error => console.log(error));
            }
            else {
                for (let i = 0; i < articles.length; i++) {
                    let element = articles[i];
                    axios.get(`http://136.145.231.32:8080/${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));
}