如何使用javascript将xml属性及其值提取为json格式

Question

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

Answer 1

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);