Convert XML to HTML using jquery/javascript
Step 1: validate your 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.
For this answer i will suposse we have some xml as follows
<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
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
You can use jQuery's $.parseXML to parse it and convert the raw data into a XML document
$.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
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.
// 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
jQuery is 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.
As aditional reference, see the full example on jsfiddle
Mayank Pathak
I am an Application and Information Security enthusiast. I do consultation for Security Operations, Application Security Architecture, Penetration testing, helping development teams to integrate security into CI/CD process. I work with both Java and .Net based enterprise applications and help them architecture in secure way. I have good experience with working on highly transactional systems. For any project/consultation contact me at [email protected]
Updated on July 21, 2022Comments
-
Mayank Pathak almost 2 years
I've some
XML
which i need to show in adiv
as text.
Can we convert thisXML
to format like below.<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,000Is this possible using Jquery/javascript.??
And it should be rendering like below 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>
-
Makoto about 11 yearsCare to add some meat to this answer?
-
11684 about 11 yearsWow. This is one of the most complete answers I've seen on SO (not counting Jon Skeet's).
-
Makoto about 11 yearsMuch, much better. Well written!
-
Mayank Pathak about 11 yearsThanks laconbass..I generated XML this way and it worked for me..thanks mate.. :)