Object/Headless API fragment

sample.html

<div id="loadmore" class="btn btn-sm btn-primary">データ取得</div>
<div id="loadmore2" class="btn btn-sm btn-primary">データ取得&画面更新</div>

sample.js

var userToken = "gVFcrl3p";

window.onload = function () {
  initialize();
};

// Define the request payload as an object
var requestData = {
  productCode: "notdefined1",
  productStatus: "",
  productWorkingHour: "",

  productImageURL: "",
  productLocation: "",
  productContactPhone: "",


  productContactName: "",
  productContactEmail: "",
  productContactImageURL: "",
};

function initialize() {
  var urlForProduct =
    "https://randomapi.com/api/2ee1017028f2a6ae5e7d83c2edb26351?results=1";
  var urlForContactUser = "https://randomuser.me/api/?results=1";
  $("#loadmore").on("click", function () {
    fetchInformation(urlForProduct, urlForContactUser);
    //location.reload();
  });
  $("#loadmore2").on("click", function () {
    fetchInformation(urlForProduct, urlForContactUser);
    location.reload();
  });
}

async function fetchInformation(urla, urlb) {
  $("#loadmore").text("データ取得中");
  $("#loadmore").prop("disabled", true);

  // get & set product
  await fetch(urla)
    .then((response) => response.json())
    .then(function (data) {
      data.results.forEach((aProduct) => {
        requestData.productCode = aProduct.productCode;
        requestData.productWorkingHour = aProduct.productRunningHours;
        requestData.productContactPhone = aProduct.phone;
        requestData.productLocation = aProduct.productLocation;
        requestData.productStatus = aProduct.productStatus;
        requestData.productImageURL =
          "https://webserver-lctjpteam0714-uat.lfr.cloud/documents/d/guest/p" +
          aProduct.productImage;
      });
    });

  // get & set contact User
  await fetch(urlb)
    .then((response) => response.json())
    .then(function (data) {
      data.results.forEach((person) => {
        requestData.productContactName =
          person.name.title + " " + person.name.first + " " + person.name.last;
        requestData.productContactEmail = person.email;
        requestData.productContactImageURL = person.picture.medium;
      });
    });

  postRequestData(requestData);
  $("#loadmore").text("取得完了・再取得？");
  $("#loadmore").prop("disabled", false);
}

function postRequestData(requestData) {
  // Convert the payload object to JSON
  var jsonData = JSON.stringify(requestData);

  // Set the URL of your API endpoint
  var url =
    "https://webserver-lctjpteam0714-uat.lfr.cloud:443/o/c/productfromapis/scopes/39729";

  // Create a new XMLHttpRequest object
  var xhr = new XMLHttpRequest();

  // Configure the request
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.setRequestHeader("accept", "application/json");
  xhr.setRequestHeader("x-csrf-token", userToken);

  // Define a callback function to handle the response
  xhr.onload = function () {
    if (xhr.status === 200) {
      // Request was successful, handle the response here
      //console.log('Response:', xhr);
    } else {
      // Request failed, handle the error here
      alert(xhr.response);
      //console.error('Request failed with status:', xhr.status);
    }
  };

  // Send the JSON data as the request body
  xhr.send(jsonData);
}