Get values from child XML nodes having same node name in jquery

Question

I've below XML

<Root>
<field/>
<field/>
<field>
    <label>
        Have you invested before
    </label>
    <value>
        No
    </value>
    <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>
        £250,000+
    </value>
</field>

And from this i need to render it as HTML 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: £250,000+

Currently it's output is :

:
:     
Have you invested beforeAre you looking to Invest in the next 6 months: YesMaybe
What Investments are you interested in:  Carbon Credits, Green Investments
How much are you looking to invest:    £250,000+

I'm using below jquery but its not producing the output i'm expecting.

$(data).find('field').each(function (index, element) {
        debugger;
        //if (field.find('label').length > 0) {
        var field = $(element)
        if (field.find('label').length > 1) {

            var confirmationNumbers = $(field).find("label").map(function () {
                //debugger;
                list.append('<dt>' + label + ': </dt>').append('<dd>' + value + '</dd>');
                return $(this).text();
            });                
            //var label = field.find('label').text()
            //var value = field.find('value').text()
            //list.append('<dt>' + label + ': </dt>').append('<dd>' + value + '</dd>');
        }
        else {
            var label = field.find('label').text()
            var value = field.find('value').text()
            list.append('<dt>' + label + ': </dt>').append('<dd>' + value + '</dd>');
        }
        //}            
    });

What i'm doing wrong..

Try using jQuery Templates.

Rajeev Nair
– Rajeev Nair

2013-04-22 10:52:31 +00:00
Commented Apr 22, 2013 at 10:52 — Rajeev Nair
– Rajeev Nair, Commented Apr 22, 2013 at 10:52

Arun P Johny · Accepted Answer · 2013-04-22 12:55:03Z

2

Try

$(data).find('field label').each(function(){
    var $this = $(this);
    list.append('<dt>' + $this.text() + ': </dt>').append('<dd>' + $this.text().val() + '</dd>');
})

Try this for IE

$(data).find('field label').each(function() {
    var $this = $(this);

    list.append('<div><span>' + $this.text() + '</span><span>'
            + $this.text().val() + '</span></div>');
})

edited Apr 22, 2013 at 12:55

answered Apr 22, 2013 at 11:37

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arun P Johny Over a year ago

@MayankPathak try using a simple ul and li

Mayank Pathak Over a year ago

it works with dt and dd as well...Problem was with XML. I just parsed it using $.parseXML() and worked with your code...Many thanks Arun..You provided exact solution mate.. :)

Collectives™ on Stack Overflow

Get values from child XML nodes having same node name in jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related