Home > Mobile >  How to extract xml attribute and its value into json format using javascript
How to extract xml attribute and its value into json format using javascript

Time:12-21

Seek for help to transform the xml to json. I got an input with this.

"<logRecord>
  <logRecord>
    <logRecord>
      <class name="dto">
        <logField fieldName="ID" oldValue=" " newValue="650"/>
        <logField fieldName="submissionDt" oldValue="" newValue="03-12-2022"/>
      </class>
    </logRecord>
  </logRecord>
</logRecord>"

and i want change to

[{fieldName : 'ID', oldValue : '' , newValue " '650'}.
{fieldName : 'submissionDt', oldValue : '' , newValue : '03-12-2022'}]

Is it possible? Thanks

CodePudding user response:

I'm almost certain there is probably a better way of doing this, so I fully expect someone to come along and critique my attempt. However, the way I would achieve this (using the functions I know) would be using xpath to extract given values from the XML.

I've commented the code to try explain exactly what I'm doing but in essence, I'm looping over each <class> then looping each <logField> before finally looping over each of the attributes.

//First we'll take our (slightly more complex) XML input string
var xmlString = "<logRecord><logRecord><logRecord><class name=\"dto\"><logField fieldName=\"ID\" oldValue=\"\" newValue=\"650\" /><logField fieldName=\"submissionDt\" oldValue=\"\" newValue=\"03-12-2022\" /></class></logRecord><logRecord><class name=\"dto\"><logField fieldName=\"ID\" oldValue=\"\" newValue=\"123\" /><logField fieldName=\"submissionDt\" oldValue=\"\" newValue=\"19-12-2022\" /></class></logRecord></logRecord></logRecord>";
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlString, "text/xml");

//Create a new XPathEvaluator
const evaluator = new XPathEvaluator();
//Evaluate given xpath to target every <class> found inside the XML
const classExpression = evaluator.createExpression('//class');
const classResult = classExpression.evaluate(xmlDoc, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);

//Declare a final array
var arr = [];

//Loop each found instance of <class>
for (i=0; i<classResult.snapshotLength; i  ) {
  
  //Find all instances of <logField> inside of THIS <class>
  const logFieldExpression = evaluator.createExpression('./logField');
  const logFieldResult = logFieldExpression.evaluate(classResult.snapshotItem(i), XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);
  
  //Declare an array to hold each of our <logField>s
  var logFieldObj = [];
  
  //Loop each <logField> inside of the <class>
  for (j=0; j<logFieldResult.snapshotLength; j  ) {
    
    //Find all attributes for THIS <logField>
    const attrEvaluator = evaluator.createExpression('./@*');
    const attrResult = attrEvaluator.evaluate(logFieldResult.snapshotItem(j), XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);
    
    //Declare a final object to hold each of the attributes fieldName, oldValue and newValue
    var attrObj = {};
    
    //Loop over each attribute
    for (k=0; k<attrResult.snapshotLength; k  ) {
      //Add attribute as attributeName => attributeValue to our object
      attrObj[attrResult.snapshotItem(k).localName] = attrResult.snapshotItem(k).textContent;
    }
    //Add our object to an array
    logFieldObj.push(attrObj);
  }
  
  //Create the final resulting array
  arr.push(logFieldObj);
}

console.log(arr);

  • Related