I have some javascript code that functions as part of an application to update elements in the DOM of a webpage. For performance, I spawn a worker that accesses a rest endpoint to get some data, then uses that data to make another call to another endpoint to get other data based on that data. The intent is to return this data back to the main script so that it then will update the DOM with this data.
During this process I declare a global array projectsDataJSON in the worker which holds the result that I want to send back to the parent script, and this array is being populated by the functions of the worker script with the correct data.
However when I try to send the object using post message I get an empty array. The values actually disappear, so I am unable to transfer my result to the parent script successfully.
Here is my source code for the parent script:
console.log("Spawning a Worker to retrieve the Projects")
var worker = new Worker('/SiteAssets/AssetDigitalAssets/getAllAssociatedProjectsWorker.js');
worker.addEventListener('message', function(e) {
responseObject = e.data;
console.log ("what follows is the response we got from the worker")
console.log(e);
console.log ("what follows is what we set to the responseObject")
console.log (responseObject)
if (responseObject.length != 0) {
if (responseObject.d.results.length > 0) {
console.log(responseObject.d.results)
updateProjectsDT(responseObject.d.results)
}
}
else {
console.log("No Associated Projects Returned from worker action")
}
}, false);
worker.postMessage(selectedDigitalAssetRecordID);
Here is the source code for the worker getAllAssociatedProjectWorker.js
var projectsDataJSON = [];
var editProjectHTML = "<span class="ms-cui-ctl-iconContainer" unselectable="on"><span class="ms-cui-img-16by16 ms-cui-img-cont-float ms-cui-imageDisabled" unselectable="on" ><img alt="" id="documentEditImage" style="top: -128px;left: -224px;" unselectable="on" src="/_layouts/1033/images/formatmap16x16.png" /></span></span>";
var delProjectAssociationHTML = "<span class="ms-cui-ctl-iconContainer" unselectable="on"><span class="ms-cui-img-16by16 ms-cui-img-cont-float ms-cui-imageDisabled" unselectable="on"><img class="" style="top: -48px;left: -96px;" unselectable="on" src="/_layouts/1033/images/formatmap16x16.png"></span></span>";
self.addEventListener('message', function(e) {
getAllAssociatedProjectsWithPromises(e.data);
}, false);
//this is an attempt to get the second set of records from projects
//using promises.all
function getAllAssociatedProjectsWithPromises(DARID) {
console.log ("running getAllAssociatedProjectsWithPromises...")
var xmlHttpProjectAssetDocuments = new XMLHttpRequest();
xmlHttpProjectAssetDocuments.onreadystatechange = async () => {
if(xmlHttpProjectAssetDocuments.readyState == XMLHttpRequest.DONE){
if(xmlHttpProjectAssetDocuments.status == 200){
console.log("Response was 200...")
const ProjectAssetDocumentsResponseObject = JSON.parse(xmlHttpProjectAssetDocuments.responseText)
console.log("ProjectAssetDocumentsResponseObject follows")
console.log(ProjectAssetDocumentsResponseObject)
console.log("ProjectAssetDocumentsResponseObject.d.results.length follows")
console.log(ProjectAssetDocumentsResponseObject.d.results.length)
if (ProjectAssetDocumentsResponseObject.d.results.length > 0) {
projectCount = ProjectAssetDocumentsResponseObject.d.results.length
console.log("We Found " & projectCount & " projects.")
const res = await Promise.all(ProjectAssetDocumentsResponseObject.d.results.map(d => getProject(d.Id,d.ProjectID)))
//this actually shows the correct data that I want to transfer to the main Javascript code
console.log('All the Promises were resolved what follows is the projectsDataJSON')
console.log(projectsDataJSON);
//this however does not work, the log in the main javascript code recieves an empty message.
var myResponse
myResponse = JSON.stringify(projectsDataJSON)
console.log ("what myResponse is set to")
console.log (myResponse)
postMessage(myResponse)
} else {
console.log("We found 0 associated projects.")
}
} else if (xmlHttpProjectAssetDocuments.status == 400){
console.log("not found")
} else {
console.log("other")
}
}
}
//this triggers the call to the server.
xmlHttpProjectAssetDocuments.open("GET","https://{OurServer}/_vti_bin/listdata.svc/ProjectAssetDocuments?$select=Id,ProjectID,AssetDocumentsID&$filter=AssetDocumentsID eq " + DARID,true);
xmlHttpProjectAssetDocuments.setRequestHeader("Accept", "application/json; odata=verbose")
xmlHttpProjectAssetDocuments.send()
}
function getProject(projectAssetDocumentsID, projectId) {
var xmlHttpProjects = new XMLHttpRequest();
var currentProjectID
var currentProjectSMMID
var currentProjectTitle
//get a project record and add it to the projectDataJSON []
xmlHttpProjects.onreadystatechange = function (){
//for some reason, this logs three times per run. No clue why.
console.log("we are getting project id " + projectId)
if(xmlHttpProjects.readyState == XMLHttpRequest.DONE ) {
if(xmlHttpProjects.status == 200) {
var projectsResponseObject = JSON.parse(xmlHttpProjects.responseText)
console.log ("response for projectid " + projectId + " follows")
console.log (projectsResponseObject)
currentProjectID = projectsResponseObject.d.results[0].Id
currentProjectSMMID = projectsResponseObject.d.results[0].SMM000000
currentProjectTitle = projectsResponseObject.d.results[0].ProjectNameTitleDescription
var obj = {
'ID': projectAssetDocumentsID,
'CurrentProjectID': currentProjectID,
'Edit' : editProjectHTML,
'SMMID': currentProjectSMMID,
'Title': currentProjectTitle,
'Delete': delProjectAssociationHTML,
}
projectsDataJSON.push(obj);
} else if (xmlHttpProjects.status == 400){
console.log("getProject not found")
} else {
console.log("other error in getProject")
}
}
}
//this triggers the call to the server.
xmlHttpProjects.open("GET","https://{OurServer}/_vti_bin/listdata.svc/Projects?$select=Id,SMM000000,ProjectNameTitleDescription&$filter=Id eq " + projectId,true);
xmlHttpProjects.setRequestHeader("Accept", "application/json; odata=verbose")
xmlHttpProjects.send()
}
Here is the output from the console log with my annotations
