我想基于JSON对象填充XML标签

问题描述

我有一个示例JSON对象。我想以动态方式显示文件中的XML，即，每当我更新JSON对象时，XML代码都应通过jQuery自动更新。

这是我的示例JSON对象：

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

]

我正在使用jQuery进行更新。

这是我的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);
            })
        });
    }
});

在XML代码中，我想更新此内容以及JSON对象的报告值。我要更新的XML代码在<add as="<----reporting value from JSON---->">中，也以<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>

解决方法

猜想您所需要的只是一些字符串缩写，在我的示例中，我向您展示了如何使用模板字符串和箭头函数。但您也可以使用传统字符串：

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

注意：没有将json对象转换为xml的通用方法，因为您必须沿以下方式做出许多决定：

• 道具变成属性或子元素了吗？
• 您需要很好的格式吗？
• 您的xml还有更多自定义元素
• ...

随意将字符串创建放入其自己的函数中。