JS fetch does not retrieve response until after page is fully loaded

Confluence Development Confluence Server
1

Hi, I am trying to fetch results using Javascript fetch when the page loads. I’ve wrapped the function in AJS.toInit() but the when I console.log() the results within the AJS.toInit(), it returns nothing. However, when I inspect the page after it loads and execute console.log(), it returns the results. What is happening?

My Javascript code:

let baseURL = document.getElementById('confluence-base-url').content;
let selectedPID = AJS.params.pageId;
let pageVerJson = "";

AJS.toInit(function(){
  let url = baseURL + "/rest/experimental/content/" + selectedPID + "/version"
            
  fetch(url)  //fetch all versions using fetch api
  .then(response => response.json())
  .then(json => {
      pageVerJson = json.results;
  });

  fetchPageVersions();
})

/**
 * fetchPageVersions - display all page versions on button click
 */

 function fetchPageVersions(){

  alert("Fetching contents in progress...");

  console.log(pageVerJson);

  let pageVer1Sel = document.getElementById("pageVersionSel1");
  let pageVer2Sel = document.getElementById("pageVersionSel2");
  
  let table = document.getElementById("table");
  table.style.visibility = "visible";
  table.style.borderCollapse = "collapse";

  //ensure that each page version is only shown once when button is clicked multiple times
  if(pageVer1Sel.length > 0 || pageVer2Sel.length > 0){
    pageVer1Sel.innerHTML = ""; //remove all exisiting options first
    pageVer2Sel.innerHTML = "";
  }

  for(var key in pageVerJson){
    let num = pageVerJson[key].number;
    let when = pageVerJson[key].when;
    let by = pageVerJson[key].by.username;

    //fill table
    let tableRow = document.createElement("tr");
    let numTableData = document.createElement("td");
    numTableData.innerHTML = num;
    let whenTableData = document.createElement("td");
    whenTableData.innerHTML = when;
    let byTableData = document.createElement("td");
    byTableData.innerHTML = by;
    tableRow.appendChild(numTableData);
    tableRow.appendChild(whenTableData);
    tableRow.appendChild(byTableData);
    table.appendChild(tableRow);

    //fill option value
    let newOp1 = document.createElement("option");
    let newOp2 = document.createElement("option");

    newOp1.textContent = num;
    newOp2.textContent = num;

    newOp1.setAttribute("id", "1." + num.toString());
    newOp2.setAttribute("id", "2." + num.toString());

    pageVer1Sel.appendChild(newOp1);
    pageVer2Sel.appendChild(newOp2);

    let contentURL = "";
    let fetchURL = baseURL + "/rest/experimental/content/" + selectedPID + "/version/" + num;


    fetch(fetchURL)// fetch page version content
    .then(response => response.json())
    .then(json => {
        contentURL = baseURL+json.content._links.webui;
        
        $.ajax({
            url : contentURL,
            success : function(response){
                let contentTitle = "<h3>Version " + num + "</h3>";
                let content = $(response).find("#main-content").html();
                
                content = contentTitle + content;

                newOp1.setAttribute("value", content);  //set the content as the value of the option
                newOp2.setAttribute("value", content);
            }
        })
    });
  }

  alert("Fetching completed!");
}
2

I’ve just found out that fetchPageVersions() executes first before the fetch function. Why is this so?

3

I solved it by using async and await