[英]Convert XML to HTML using jquery/javascript
I've some XML
which i need to show in a div
as text. 我有一些
XML
需要在div
显示为文本。
Can we convert this XML
to format like below. 我们可以将此
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 您是否希望在未来6个月投资:也许吧
What Investments are you interested in : Carbon Credits,Green Investments 您对哪些投资感兴趣:碳信用额,绿色投资
How much are you looking to invest : £50,000 - £100,000 您希望投资多少: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>
Your xml is not valid. 你的xml无效。 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.
它们有很多,我联系的这个只是一个例子。
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>
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
})
;
You can use jQuery's $.parseXML to 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!');
})
;
Now we have a xml document to play with. 现在我们有一个xml文档可供使用。 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. 下面的snipnet假设我们在HTML布局中有一个定义列表
<dl>
标签,并且在解析数据之后就会被执行,就像在上一步中一样。
// 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>')
;
})
;
jQuery is what you want to use. jQuery是你想要使用的。 It's chainable nature makes transversing the DOM like cutting butter.
它的可连接性使得像切黄油一样横穿DOM。 I hope this answer to be useful for you.
我希望这个答案对你有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.