Item Lending Process, View Lending List

<button onclick="user_getHistory()" type="button" class="user_Search">Confirmation of rental/reservation</button>
<br>If the item is being loaned/reserved, please consult with the user before applying.
<div style="padding: 0.5em 1em; margin: 2em 0; font-weight: bold; color: #6091d3; background: #FFFFF; border: solid 3px #6091d3;  border-radius: 10px; width:80%;">
<div id="user_Result"></div>
</div>

<script type="text/javascript">
document.addEventListener("click", function (e) {
  console.log( " DocumentElement clicked: " + e.target.textContent );
  if (e.target.classList.contains("user_Appender")) {
    qbpms.form.set( "q_Transaction_Title", e.target.value );   ///EDIT///
  }
});

function user_getHistory() {
  let numTARGET_ITEM_ID          = 5;     ///No Need to Edit///
  let numTARGET_STATUS_ID        = 14;    ///No Need to Edit///
  let numTARGET_STARTDATETIME_ID = 0;     ///No Need to Edit///
  let numTARGET_ENDDATETIME_ID    = 1;    ///No Need to Edit///
  let numLIMITSIZE     = 10;              ///Needs Editing (According to frequency of use)///
  let numWORKFLOWAPPID = ***;            ///Needs Editing (This WorkFlow Application ID)///
  let strSearchItemId = "";
  let strSearchItemName = "";
  let array = qbpms.form.get( "q_item" );
  let elResultDiv     = document.querySelector("#user_Result");    ///EDIT///
  console.log("array: " + array.length);
  if (array.length !== 0){
    console.log( "q_item is not empty or null.");
    strSearchItemName = array[0].display;
    strSearchItemId = array[0].value;
  }else{
    elResultDiv.innerHTML = ""; // clear
    return;
  }

  let objCriteria = {}; // JSON criteria: (BPMS v13.3~)
      // https://questetra.zendesk.com/hc/ja/articles/4415341995289
      // https://questetra.zendesk.com/hc/en-us/articles/4415341995289
      objCriteria.processModelInfoId = numWORKFLOWAPPID;
      objCriteria.processInstanceState = [];
      objCriteria.processInstanceState[0] = "STARTED";
      objCriteria.data = [];
      objCriteria.data[0] = {};
      objCriteria.data[0].type   = "select";
      objCriteria.data[0].number = numTARGET_ITEM_ID;
      objCriteria.data[0].method = "selected";
      objCriteria.data[0].value  = strSearchItemId;
      objCriteria.fields = [];
      objCriteria.fields[0] = {};
      objCriteria.fields[0].type   = "select";
      objCriteria.fields[0].number = numTARGET_ITEM_ID;
      objCriteria.fields[1] = {};
      objCriteria.fields[1].type   = "datetime";
      objCriteria.fields[1].number = numTARGET_STARTDATETIME_ID;
      objCriteria.fields[2] = {};
      objCriteria.fields[2].type   = "datetime";
      objCriteria.fields[2].number = numTARGET_ENDDATETIME_ID;
      objCriteria.fields[3] = {};
      objCriteria.fields[3].type   = "select";
      objCriteria.fields[3].number = numTARGET_STATUS_ID;
  let xhr = new XMLHttpRequest();
      xhr.open( "GET", "/API/OR/ProcessInstance/list?limit=" + numLIMITSIZE +
                       "&criteria=" + encodeURIComponent(JSON.stringify(objCriteria)) );
      xhr.responseType = 'json';
      xhr.send();
      xhr.onload = function() {
        if (xhr.status != 200) {
          console.error(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. "404: Not Found"
        } else { // show the result
          let objResponse = xhr.response;
          if (objResponse.count === 0){
            elResultDiv.innerHTML = "Available for loan at any time"; // clear
            return;
          }
          console.log( " Decoration XHR: Found PastData " + objResponse.processInstances.length +
                       "/" + objResponse.count  );
          elResultDiv.innerHTML = ""; // clear
          let list = Array.from(new Array(objResponse.processInstances.length), () => new Array(6).fill(""));
          for (let i=0; i < objResponse.processInstances.length; i++){
            console.log("STATUS:" + objResponse.processInstances[i].data[numTARGET_STATUS_ID].value[0].value);
            list[i][1] = "【" + objResponse.processInstances[i].data[numTARGET_STATUS_ID].value[0].display +"】" + " ";
            list[i][2] = "/OR/ProcessInstance/view?processInstanceId=" + objResponse.processInstances[i].processInstanceId;
            list[i][3] = "_blank";
            if (objResponse.processInstances[i].data[numTARGET_STARTDATETIME_ID].value !== null){
              list[i][0] = objResponse.processInstances[i].data[numTARGET_STARTDATETIME_ID].value;
              list[i][4] = objResponse.processInstances[i].data[numTARGET_STARTDATETIME_ID].value + " - ";
            }else{
              list[i][4] = "To be decided - ";
            }
            if (objResponse.processInstances[i].data[numTARGET_ENDDATETIME_ID].value !== null){
              list[i][5] = objResponse.processInstances[i].data[numTARGET_ENDDATETIME_ID].value + " ";
            }else{
              list[i][5] = "To be decided ";
            }
            list[i][6] = objResponse.processInstances[i].processInstanceInitQuserName;
          }
          console.log(JSON.stringify(list));
          createHtml(list,elResultDiv);
        }
        console.log( " Decoration XHR: finished " );
      };
      xhr.onerror = function() {
        alert("Request failed");
      };
  function createHtml(list,elResultDiv){
    list.sort(function(a, b){
	return (a > b ? 1 : -1);
    });
    console.log("sorted: " + JSON.stringify(list));
    for (let i=0; i < list.length; i++){
console.log(list[i][1]);
      let elNewAnchor = document.createElement("a");
          elNewAnchor.href = list[i][2];
          elNewAnchor.target = list[i][3];
          elNewAnchor.innerText += list[i][4];
          elNewAnchor.innerText += list[i][5];
          elNewAnchor.innerText += list[i][6];
      elResultDiv.append( list[i][1], elNewAnchor );
      elResultDiv.innerHTML += "<br>";
    }
  }
}
</script>