React typescript Promise with webservice and depending another function in loop

January 31, 2021 by admin

On button click I am looping through record id’s pass that 1 by 1 to webservice which will return XML data where in I will get ID of another record which I will pass to another webservice which will return result success. After finish this I want to show message success

Function defination

const GetRunningWorkflowTasksForCurrentUserForListItemRequest = (
    absoluteUrl: string,
    itemId: number,
    listName: string,
    callback
) => {
    const soapURL = `${absoluteUrl}/example.asmx?op=GetListItem`
    const soapRequest = `SOAP Request`

    getWFData(soapURL, soapRequest, callback) // Get XML with call back function parameter where we will process data
}

Second Function Call

const getWFData = (soapURL: string, soapRequest: string, callback) => {
    const xmlhttp = new XMLHttpRequest()
    xmlhttp.open("POST", soapURL, true)

    xmlhttp.onreadystatechange = () => {
        if (xmlhttp.readyState === 4) {
            if (xmlhttp.status === 200) {
                callback(xmlhttp.responseText)
            }
        }
    }

    xmlhttp.setRequestHeader("Content-Type", "text/xml")
    xmlhttp.send(soapRequest)
}

First Function Call with loop

const approveSelected = (ids: number[]) => {
    ids.forEach((val, idx) => {
        const absoluteUrl = props.context.pageContext.web.absoluteUrl
        // First function
        GetRunningWorkflowTasksForCurrentUserForListItemRequest(
            absoluteUrl,
            val,
            "Temp",
            GetRunningWorkflowTasksForCurrentUserForListItemResponse //XML Response
        )
    })
}

Third Function where we got XML response

const GetRunningWorkflowTasksForCurrentUserForListItemResponse = (response: any) => {
        const parser = require("fast-xml-parser")
        const absoluteUrl = props.context.pageContext.web.absoluteUrl

    if (parser.validate(response) === true) {
        const jSONObj = parser.parse(response)
        const spTaskId =
            jSONObj["soap:Envelope"]["soap:Body"].GetRunningWorkflowTasksForCurrentUserForListItemResponse
                .GetRunningWorkflowTasksForCurrentUserForListItemResult.UserTask.SharePointTaskId
        processFlexiTaskRequest2(
            absoluteUrl,
            "Approve",
            spTaskId,
            "Workflow Tasks",
            processFlexiTaskResponse2Response, //XML Response function
            ""
        )
    }
}

Forth and Final call for inside loop

const processFlexiTaskResponse2Response = (response: any) => {
        const parser = require("fast-xml-parser")

        if (parser.validate(response) === true) {
            const jSONObj = parser.parse(response)
            const result =
                jSONObj["soap:Envelope"]["soap:Body"].ProcessFlexiTaskResponse2Response.ProcessFlexiTaskResponse2Result
        }
    }

I am really confuse, How can I make chain with promise and show confirm once loop finish. Please help