使用 jquery/javascript 将 XML 转换为 HTML

Convert XML to HTML using jquery/javascript

提问by Mayank Pathak

I've some XMLwhich i need to show in a divas text.
Can we convert this XMLto format like below.

我有一些XML我需要以div文本形式显示的内容。
我们可以将其转换XML为如下格式吗？

<root>
<field>
  <label>Have you invested before</label>
  <value>No</value>
</field>
<field>
  <label>Are you looking to invest in the next 6 months</label>
  <value>Maybe</value>
</field>
<field>
  <label>What investments are you interested in</label>
  <value>Carbon Credits, Green Investments</value>
</field>
<field>
  <label>How much are you looking to invest</label>
  <value>￡50,000 -  ￡100,000</value>
</field>
</root>

Output should be like as below:

输出应如下所示：

Have you invested before : No
Are you looking to Invest in the next 6 months : Maybe
What Investments are you interested in : Carbon Credits,Green Investments
How much are you looking to invest : ￡50,000 - ￡100,000

您之前是否投资过：否
您是否打算在未来 6 个月内进行投资：也许
您对什么投资感兴趣：碳信用、绿色投资
您打算投资多少：￡50,000 - ￡100,000

Is this possible using Jquery/javascript.??

这可以使用 Jquery/javascript.??

And it should be rendering like below HTML.

它应该像下面的 HTML 一样呈现。

<div class="how-to">
<div class="how-text">
    <h3>Your Requirements</h3>
        <ul class="requirements">         
<li><label class="field-l">Have you invested before:</label> <span>No</span></li>         
<li><label class="field-l">Are you looking to Invest in the next 6 months:
</label>      <span>Maybe</span></li>         
<li><label class="field-l">What Investments are you interested in:</label> 
<span>Carbon  Credits,Green Investments</span></li>
 <li><label class="field-l">How much are you looking to invest:</label>
  <span>￡50,000 -  ￡100,000</span></li>
      <li class="link-pad"><a href="index.html" class="requirements">
     Change  your requirements</a></li>
    </ul>
<div class="clear"></div>
 </div>
  </div>

回答by laconbass

Step 1: validate your xml

第 1 步：验证您的 xml

Your xml is not valid. You can check it it's valid or not, for example, in an online validator. There are lots of them, this one i linked is only an example.

您的 xml 无效。您可以检查它是否有效，例如，在在线验证器中。有很多，我链接的这个只是一个例子。

For this answer i will suposse we have some xml as follows

对于这个答案，我将假设我们有一些 xml，如下所示

<root>
  <field>
      <label>Have you invested before</label>
      <value>No</value>
  </field>
  <field>
      <label>Are you looking to invest in the next 6 months</label>
      <value>Maybe</value>
  </field>
  <field>
      <label>What investments are you interested in</label>
      <value>Carbon Credits, Green Investments</value>
  </field>
  <field>
      <label>How much are you looking to invest</label>
      <value>￡50,000 -  ￡100,000</value>
  </field>
</root>

Step2: get the xml, maybe through ajax

Step2：获取xml，可能通过ajax

I suposse this is obvious but i will include here anyway.

我认为这是显而易见的，但无论如何我都会包括在这里。

$.get('/url_of_the_xml_resource')
  .done(function(data){
    // this function is executed if the request was sucessfull
  })
  .fail(function(){
    // this function is executed if the request fails
  })
;

Step 3: parse the xml

第三步：解析xml

You can use jQuery's $.parseXMLto parse it and convert the raw data into a XML document

你可以使用 jQuery 的$.parseXML来解析它并将原始数据转换成 XML 文档

$.get('/url_of_the_xml_resource')
  .done(function(data){
    // parse the xml
    data = $.parseXML(data);
    //
    // do anything you want with the parsed data
  })
  .fail(function(){
    alert('something went wrong!');
  })
;

Step 4: play with the data

第 4 步：使用数据

Now we have a xml document to play with. The following snipnet assumes we have a definition list, <dl>tag, in our HTML layout, and is supossed to be executed after the data is parsed, like in the previous step.

现在我们有一个 xml 文档可以使用。下面的 snipnet 假设我们<dl>在 HTML 布局中有一个定义列表和标签，并且应该在解析数据后执行，就像上一步一样。

// first we query the HTML document to get the list element
// and store it for later use
var list = $('dl');
// data is a xml document now, so we query it...
$(data)
  // and search for all <field> elements
  .find('field')
  // now we can play with each <field>
  .each(function(index, element){
    // as example we query & store the field
    var field = $(element)
    // get the values we want
    var label = field.find('label').text()
    var value = field.find('value').text()
    // and append some html in the <dl> element we stored previously
    list
      .append('<dt>'+label+': </dt>')
      .append('<dd>'+value+'</dd>')
    ;
  })
;

Conclusion

结论

jQueryis what you want to use. It's chainable nature makes transversing the DOM like cutting butter. I hope this answer to be useful for you.

jQuery就是你想要使用的。它的可链接特性使得遍历 DOM 就像切黄油一样。我希望这个答案对你有用。

As aditional reference, see the full example on jsfiddle

作为附加参考，请参阅jsfiddle 上的完整示例