Convert XML to HTML using jquery/javascript -


i've xml need show in div text.
can convert xml format below.

<root> <field>   <label>have invested before</label>   <value>no</value> </field> <field>   <label>are looking invest in next 6 months</label>   <value>maybe</value> </field> <field>   <label>what investments interested in</label>   <value>carbon credits, green investments</value> </field> <field>   <label>how looking invest</label>   <value>£50,000 -  £100,000</value> </field> </root>

output should below:

have invested before : no
looking invest in next 6 months : maybe
investments interested in : carbon credits,green investments
how looking invest : £50,000 - £100,000

is possible using jquery/javascript.??

and should rendering below html.

<div class="how-to"> <div class="how-text">     <h3>your requirements</h3>         <ul class="requirements">          <li><label class="field-l">have invested before:</label> <span>no</span></li>          <li><label class="field-l">are looking invest in next 6 months: </label>      <span>maybe</span></li>          <li><label class="field-l">what investments interested in:</label>  <span>carbon  credits,green investments</span></li>  <li><label class="field-l">how looking invest:</label>   <span>£50,000 -  £100,000</span></li>       <li class="link-pad"><a href="index.html" class="requirements">      change  requirements</a></li>     </ul> <div class="clear"></div>  </div>   </div>

step 1: validate xml

your xml not valid. can check it's valid or not, example, in online validator. there lots of them, 1 linked example.

for answer suposse have xml follows

<root>   <field>       <label>have invested before</label>       <value>no</value>   </field>   <field>       <label>are looking invest in next 6 months</label>       <value>maybe</value>   </field>   <field>       <label>what investments interested in</label>       <value>carbon credits, green investments</value>   </field>   <field>       <label>how looking invest</label>       <value>£50,000 -  £100,000</value>   </field> </root>

step2: xml, maybe through ajax

i suposse obvious include here anyway.

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

step 3: parse xml

you can use jquery's $.parsexml parse , convert raw data xml document

$.get('/url_of_the_xml_resource')   .done(function(data){     // parse xml     data = $.parsexml(data);     //     // want parsed data   })   .fail(function(){     alert('something went wrong!');   }) ;

step 4: play data

now have xml document play with. following snipnet assumes have definition list, <dl> tag, in our html layout, , supossed executed after data parsed, in previous step.

// first query html document list element // , store later use var list = $('dl'); // data xml document now, query it... $(data)   // , search <field> elements   .find('field')   // can play each <field>   .each(function(index, element){     // example query & store field     var field = $(element)     // values want     var label = field.find('label').text()     var value = field.find('value').text()     // , append html in <dl> element stored     list       .append('<dt>'+label+': </dt>')       .append('<dd>'+value+'</dd>')     ;   }) ;

conclusion

jquery want use. it's chainable nature makes transversing dom cutting butter. hope answer useful you.

as aditional reference, see full example on jsfiddle


Comments

Post a Comment

Popular posts from this blog

c# - Send Image in Json : 400 Bad request -

from android trying send image class of data, iis webservice. (c#) the problem 400 bad request . the image being encoded base64 . , placed json rest of class elements. my guess base64 not valid inside json. server not understand it. if set string "" , post accepted fine. so question is, how make base64 valid within json array? ( tried url.encode no success). or how should send image android webservice? gson gson = new gson(); string json = gson.tojson(record); // record has param { string base64photo } how big image? i'm pretty sure surpassing iis json size limit (default 4 mb). check http://geekswithblogs.net/frankw/archive/2008/08/05/how-to-configure-maxjsonlength-in-asp.net-ajax-applications.aspx or http://www.webtrenches.com/post.cfm/iis7-file-upload-size-limits good luck!
Read more

javascript - addthis share facebook and google+ url -

i attempting use addthis create simple url shares whichever current page user on when click share button. of right now, have twitter working. when user clicks, able see url populated in tweet box. when user clicks facebook or google+, url doesn't seem show in share box. <ul class="addthis_toolbox addthis_default_style "> <li><a class="addthis_button_facebook"><img src="/img/facebook-social.png" width="20" height="20" border="0" alt="share" /></a></li> <li><a class="addthis_button_twitter"><img src="/img/twitter-social.png" width="20" height="20" border="0" alt="share" /></a></li> <li><a class="addthis_button_google_plusone_share"><img src="/img/google-social.png" width="20" height="20" border="0" alt="s...
Read more

ios - Show keyboard with UITextField in the input accessory view -

i have buttona , when buttona clicked, want keyboard show uitextfield in inputaccessoryview. there way have keyboard show manually , set inputaccessoryview without having uitextfield initially? thanks. you cannot summon keyboard without object can become first responder. there 2 ways work around: subclass uiview , implement uikeyinput protocol in it. example: in .h file: @interface inputobject : uiview<uikeyinput> @property (nonatomic, copy) nsstring *text; @property (nonatomic, strong) uiview *inputaccessoryview; // must override inputaccessoryview , since it's readonly default @end in .m file, implement protocol: - (bool)canbecomefirstresponder { return yes; } - (bool)hastext { return [self.text length]; } - (void)inserttext:(nsstring *)text { nsstring *selftext = self.text ? self.text : @""; self.text = [selftext stringbyappendingstring:text]; [[nsnotificationcenter defaultcenter] postnotificationname:kinputobjec...
Read more