How to parse XML structure with javascript JQuery

Question

This is the XML File:

<Test>
    <Category>
        <SubCat>
            <Name>Name</Name>
            <Properties>
                <Key>Key</Key>
                <Value>Value</Value>
            </Properties>
        </SubCat>
        <SubCat>
            <Name>Name</Name>
            <SubCat>
                <Name>AnotherName</Name>
                <Properties>
                    <Key>Key</Key>
                    <Value>Value</Value>
                </Properties>
            </SubCat>
        </SubCat>
    </Category>
</Test>

I would like to get the Name. But only the Name of the first SubCat. And the properties key value. The problem is the SubCat exist two times.

I tried this:

$(xml).find('SubCat').each(function() {
    var name = $(this).find("Name").text();
    alert(name);

}

but this show the name of the first and the second SubCat.

i search for something like this.

rootElement(Category).selectallchildren(SubCat).Name for the first SubCat Name
rootElement(Category).selectallchildren(SubCat).(SubCat).Name for the second SubCat Name

And same explicit select for the Key and values

api.jquery.com/category/selectors - should contain your answer — KyorCode
– KyorCode, Commented Oct 18, 2012 at 7:27
i tried this $(xml).find('Category').each(function() { $(xml).find('SubCat:first').each(function() { var name = $(this).find("Name").text(); alert(name); });}); but it show me only the name of the first subcat item — PMe
– PMe, Commented Oct 18, 2012 at 8:25

Aletheios · Accepted Answer · 2012-10-18 09:41:20Z

1

The trick here is to make use of jQuery's ability to evaluate CSS3 selectors.

SubCat:nth-of-type(1) selects every first occurrence of SubCat with arbitrary parent elements.

So this should work:

$(xml).find("SubCat:nth-of-type(1)").each(function(){
    var name = $(this).find("Name").text(),
        property = { };    //use an object to store the key value tuple
    property[$(this).find("Properties Key").text()] = $(this).find("Properties Value").text();

    console.log(name, property);
});

//Output:
//Name Object { Key="Value" }
//AnotherName Object { Key="Value"}

Hopefully that's what you want; when writing my first answer I obviously misinterpreted your question, sorry for the confusion...

edited Oct 18, 2012 at 9:41

answered Oct 18, 2012 at 8:56

Aletheios

4,0202 gold badges36 silver badges48 bronze badges

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

2 Comments

PMe Over a year ago

this works. But it shows me only the first Element SubCat with the Name "Name" of the Category. But i need the second on too. I need all SubCat's and their Names, from Category. All nextchilds under Category.

Aletheios Over a year ago

Ok, now I'm really confused. ;) But it all depends on the CSS selector used in .find(). If you only want SubCat elements that are direct childs of Category, use the selector Category > SubCat. Note that you'll then have to use .find("Name:first").text() to get the name. If I'm still misinterpreting you, please tell me exaclty which output you want to have...

Collectives™ on Stack Overflow

How to parse XML structure with javascript 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