I want to populate XML tags on the basis of JSON object

Question

I have a sample JSON object. I want to show that in XML in a file dynamically i.e., whenever I update my JSON object the XML code should automatically be updated through jQuery.

Here is my sample JSON object:

[{
    "reporting": "purchase",
    "Name": "3",
    "designation": "ert"
},

{
    "reporting": "quality",
    "Name": "4",
    "designation": "yui"
},

]

I'm using jQuery to update this.

Here is my jQuery:

$.ajax({
    type: "GET",
    url: "sample.json",
    dataType: "json",
    success: function (res) {
        console.log(res);
        $.each(res, function (i, val) { 
            console.log(val['reporting']);
            $("Array").find("add").each(function (u) { 
                console.log(u);
            })
        });
    }
});

In the XML code, I want to update this in and that reporting value from JSON object. The XML code which I want to update is in <add as="<----reporting value from JSON---->"> and also in as <add as="<----reporting value from JSON---->">:

<Array as="templates">
    <add as="purchase">
        <Roundrect label="Purchase" href="">
            <mxCell vertex="1" style="rounded">     
                <mxGeometry as="geometry" width="80" height="40"/>
            </mxCell>
        </Roundrect>
    </add>
    <add as="quality">
        <Roundrect label="Quality" href="">
            <mxCell vertex="1" style="rounded">     
                <mxGeometry as="geometry" width="80" height="40"/>
            </mxCell>
        </Roundrect>
    </add>
<Array>
<mxDefaultToolbar as="toolbar">
    <add as="quality" template="quality" icon="images/rounded.gif"/>
    <add as="purchase" template="purchase" icon="images/rounded.gif"/>
</mxDefaultToolbar>

Answer 1

Guess all you need are some string concatinations, in my example I show you using template strings and arrow functions. but you can also use traditional strings:

var res = [{
    "reporting": "purchase",
    "Name": "3",
    "designation": "ert"
  },
  {
    "reporting": "quality",
    "Name": "4",
    "designation": "yui"
  }
];
var xml = `<Array as="templates">
  ${res.map(value=>`
  <add as="${value.reporting}">
    <Roundrect label="${value.reporting[0].toUpperCase()}${value.reporting.substr(1)}" href="">
      <mxCell vertex="1" style="rounded">
        <mxGeometry as="geometry" width="80" height="40"/>
      </mxCell>
    </Roundrect>
  </add>
  `).join('')}
<Array>
<mxDefaultToolbar as="toolbar">
    <add as="quality" template="quality" icon="images/rounded.gif"/>
    <add as="purchase" template="purchase" icon="images/rounded.gif"/>
</mxDefaultToolbar>`;

note: there is no general way to translate json objects into xml, because you have to make many decisions along the way such as:

• Are props becoming attributes or child elements, ?
• do you need nice formatting?
• your xml has some more custom elements
• ...

And feel free to put the string creation into its own function.