-1

I have following XML format returning from API.

I need to extract in LWC Datatable. XML 1:

<steps id="0" last="4">
    <step id="2" type="ValidateStep">
        <parameterizedString isformatted="true">Stp 001</parameterizedString>
        <parameterizedString isformatted="true">Act 001</parameterizedString>
    </step>
    <compref id="4" ref="89">
        <step id="3" type="ValidateStep">
            <parameterizedString isformatted="true">Stp 003</parameterizedString>
            <parameterizedString isformatted="true">Act 003</parameterizedString>
        </step>
    </compref>
</steps>

Expected Output:

Array = [{step: 1, action:Stp 001, result: Act 001 },
         {step: 2, compref,        result:ref-89 },
         {step: 3, action:Stp 003, result: Act 003 }]

XML 2:

<steps id="0" last="6">
    <step id="2" type="ValidateStep">
        <parameterizedString isformatted="true">Stp 001</parameterizedString>
        <parameterizedString isformatted="true">Act 001</parameterizedString>
    </step>
    <compref id="4" ref="89">
        <step id="3" type="ValidateStep">
            <parameterizedString isformatted="true">Stp 003</parameterizedString>
            <parameterizedString isformatted="true">Act 003</parameterizedString>
        </step>
        <compref id="5" ref="91">
            <step id="6" type="ActionStep">
                <parameterizedString isformatted="true">Stp 005</parameterizedString>
                <parameterizedString isformatted="true">Act 005</parameterizedString>
            </step>
        </compref>
    </compref>
</steps>

Expected Output:

Array = [{step: 1, action:Stp 001, result: Act 001 },
         {step: 2, compref,        result:ref-89 },
         {step: 3, action:Stp 003, result: Act 003 },
         {step: 4, compref,        result:ref-91 },
         {step: 5, action:Stp 005, result: Act 005 }]

My Code

const strXML = '**above XML string'
        const steps = [...strXML.querySelectorAll('step')];
        const stepData = new Array;
        steps.forEach((value, index) => {
            stepData.push({
                step: index + 1,
                action: value.querySelectorAll("parameterizedString")[0].textContent,
                result: value.querySelectorAll("parameterizedString")[1].textContent
            });
        });

The above code is just extracting steps tags but how can we extract compref and place in between exact row ?

Note: (we cannot relay on id#, because in source system step can be moved/reordered to any row. )

2
  • 2
    Have you looked at Apex XML parsing? Commented Sep 13, 2023 at 21:31
  • 1
    I am not using apex class to process this data, cause i will add or remove any step from this xml using data table view and re-parse back in same format so processing in UI will be much simpler. But i am strucked on how to extract compref and place in between exact row ?
    – Ragul
    Commented Sep 14, 2023 at 7:24

1 Answer 1

0

we just need to simply traverse the XML tags in order, and extract the contents of each element based on if it is a compref or step tag.

const strXML = '<steps id="0" last="9"><compref id="6" ref="90"><compref id="4" ref="89"><step id="7" type="ActionStep"><parameterizedString isformatted="true">Stp 003</parameterizedString><parameterizedString isformatted="true">Act 003</parameterizedString></step><compref id="8" ref="91"><step id="9" type="ActionStep"><parameterizedString isformatted="true">Stp 005</parameterizedString><parameterizedString isformatted="true">Act 005</parameterizedString></step></compref></compref></compref></steps>';
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(strXML, "text/xml");
const nodes = [...xmlDoc.querySelectorAll("steps *")];
var stepData = new Array();
nodes.filter(function(value) {
   if (value.tagName == "compref") {
      stepData.push({
         step: stepData.length + 1,
         action: "compref",
         result: value.getAttribute("ref")
      });
   }
   else if (value.tagName == "step") {
      stepData.push({
         step: stepData.length + 1,
         action: value.querySelectorAll("parameterizedString")[0].textContent,
         result: value.querySelectorAll("parameterizedString")[1].textContent
      });
   }
});
console.log(stepData);
var xmlString = "<steps id='0' last='" + stepData.length + "'>";
stepData.filter(function(value) {
   xmlString += `<step id="${value.step}" type="ValidateStep"><parameterizedString isformatted="true">${value.action}</parameterizedString><parameterizedString isformatted="true">${value.result}</paramaterizedString></step>`;
});
xmlString += "</steps>";
var indentedXMLString = xmlString.replaceAll("<step ", "\n\t<step ").replaceAll("<parameterizedString", "\n\t\t<parameterizedString").replaceAll("</step>", "\n\t</step>").replace("</steps>", "\n</steps>");
console.log(indentedXMLString);

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .