How do I display XML using XSLT and filter it?

[Wisnu_1]

Hello! I'm having trouble with my college assignment. The assignment wants me to display an XML file using XSLT and add some filtering function.

I have no problem displaying the XML with XSLT in my web page using javascript. I used the tutorial from w3school (http://www.w3schools.com/xsl/xsl_client.asp).

However i have no idea how to filter my results. For example I have this following XML:

<fruitsList>
    <fruit>
        <name>Apple</name>
        <color>Red</color>
    </fruit>
    <fruit>
        <name>Banana</name>
        <color>Yellow</color>
    </fruit>
    <fruit>
        <name>Tomato</name>
        <color>Red</color>
    </fruit>
    <fruit>
        <name>Grape</name>
        <color>Purple</color>
    </fruit>
</fruitsList>

I only want the page to display fruits that has red color. How do I do this?

In the tutorial, they use this line of code to transform the XML and XSLT resultDocument = xsltProcessor.transformToFragment(xml, document); and then append it to the page using document.getElementById("example").appendChild(resultDocument); so I thought I could use and process the resultDocument variable to filter it but I have no idea how. The resultDocument appears to be a DocumentFragment node. I thought I could just simply use resultDocument.getElementsByTagName("fruit") and then loop each result to find element with red color then only display that. However I couldn't.

Can anyone help me with this? I'm new to javascript so kind of really confused :(. Oh, and please do forgive me if my english is confusing, i'm not a native speaker.

Thank you.

[pritaeas]

Did you change the XSLT? It should do the filtering of the XML, and afterwards the entire output is added to the example div. See this link for example on how to use if.

[Wisnu_1]

Forgot to mention, i want to apply the filtering from the webpage dynamically. So that i can change whether i want to display red fruits or other color from the webpage. hope it makes sense though.

[pritaeas]

You could do hat by making use of a parameter.