CODEWITHSUNDEEP
javascriptjsonxml
MrNew
MrNew

Reputation: 1414

build XML format from JSON in JavaScript

I'm trying to generate an XML format based on my JSON, not trying to convert it from JSON to XML.

An example of JSON I'm trying to generate to XML

var jObj = { "Smart Shoes":{  
      "Product":"Smart Shoes",
      "Price":24.99,
      "Quantity":"1x "
   },
   "Denim Jeans":{  
      "Product":"Denim Jeans",
      "Price":30,
      "Quantity":"1x "
   }
}

Trying to generate XML in a format like below.

<xml id="POSCMD" LateProcessing="true">
 <commands>
  <injectfieldmacro type="field" name="FIELD_CLEAR"/>
  forEach(Item in Basket) {
    <injectdata type="literal" data="{Item.UPC}"/>
    <injectfieldmacro type="field" name="FIELD_UPC"/>
  }
 </commands>
</xml>

Plnkr

Upvotes: 0

Views: 200

Answers (2)

Damian T.
Damian T.

Reputation: 332

You can use JavaScript (or jQuery) to directly create your XML elements in a DOM-style fashion. This approach I feel is better than creating a string because this method will handle proper format and encapsulation.

Here is a JavaScript example:

var jObj = { "Smart Shoes":{  
      "Product":"Smart Shoes",
      "Price":24.99,
      "Quantity":"1x "
   },
   "Denim Jeans":{  
      "Product":"Denim Jeans",
      "Price":30,
      "Quantity":"1x "
   }
};

var xml = document.createElement("xml");
xml.setAttribute("id","POSCMD");
xml.setAttribute("LateProcessing","true");
var commands = document.createElement("commands");
xml.appendChild(commands);
var injFM = document.createElement("injectfieldmacro");
injFM.setAttribute("type","field");
injFM.setAttribute("name","FIELD_CLEAR");
commands.appendChild(injFM);
var injData;
for (var item in jObj) {
    injData = document.createElement("injectdata");
    injData.setAttribute("type","literal");
    injData.setAttribute("data",JSON.stringify(jObj[item]));
    injFM = document.createElement("injectfieldmacro");
    injFM.setAttribute("type","field");
    injFM.setAttribute("name","FIELD_UPC");
    commands.appendChild(injData);
    commands.appendChild(injFM);
}

// Append XML to DOM
var body = document.getElementsByTagName("body")[0];
body.appendChild(xml);

I just wrote the code to stick the JSON object data into the data field, because it wasn't really clear about how you were trying to proceed. However, the code below should at least provide enough information to expand upon if you would want/need to split the data into multiple "injectdata" XML elements.

Edit: I edited the snippet so the XML gets appended directly to the DOM body tag. When you run the snippet, if you right click on the iframe and inspect, you should see these elements actually put in the DOM:

enter image description here

Upvotes: 2

Stan
Stan

Reputation: 26511

Quick and dirty.

var gen = function() {
    var jObj = {"Smart Shoes":{"Product":"Smart Shoes","Price":24.99,"Quantity":"1x "},"Denim Jeans":{"Product":"Denim Jeans","Price":30,"Quantity":"1x "}}
    var xmlString = '<xml id="POSCMD" LateProcessing="true"><commands><injectfieldmacro type="field" name="FIELD_CLEAR"/>';

    for (var item in jObj) {
      if (jObj.hasOwnProperty(item)) {
        xmlString += '<injectdata type="literal" data="' + jObj[item].Price + '"/>'; // I don't know where you got UPC from
        xmlString += '<injectfieldmacro type="field" name="FIELD_UPC"/>'
      }
    }

    xmlString += '</commands></xml>';

    console.log(xmlString);
}

This will produce valid XML like so:

<?xml version="1.0" encoding="UTF-8"?>
<xml id="POSCMD" LateProcessing="true">
   <commands>
      <injectfieldmacro type="field" name="FIELD_CLEAR" />
      <injectdata type="literal" data="24.99" />
      <injectfieldmacro type="field" name="FIELD_UPC" />
      <injectdata type="literal" data="30" />
      <injectfieldmacro type="field" name="FIELD_UPC" />
   </commands>
</xml>

I would, however suggest converting your objects/arrays to xml.

Upvotes: 0

Related Questions