Search jQuery

jQuery Forum

xml output

in Using jQuery • 8 years ago

I am reading an xml document and I have a couple of additional things I would like the output to "do":

Here is the xml:

<?xml version="1.0" encoding="UTF-8"?>

<bn>
    <node>
        <name>Stability</name>
        <state>Low -
            <state-prob>0.15</state-prob>
        </state>
        <state>Moderate -
            <state-prob>0.25</state-prob>
        </state>
        <state>High -
            <state-prob>0.60</state-prob>
        </state>
    </node>

    <node>
        <name>Free/Fair Elections</name>
        <state>Yes -
            <state-prob>0.6</state-prob>
        </state>
        <state>No -
            <state-prob>0.4</state-prob>
        </state>
    </node>

    <node>
        <name>Regulatory Compliance</name>
        <state>Yes -
            <state-prob>0.8</state-prob>
        </state>
        <state>No -
            <state-prob>0.2</state-prob>
        </state>

    </node>
</bn>

Here is my JS:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(document).ready(function(){
           $.ajax({
               type:'get',
               url:'bn_my-test-data.xml',
               beforeSend: function(){$('#nodes').html("Loading..."); },
               timeout: 10000,
               error: function(xhr, status, error){
                alert("Error: " + xhr.status + " - " + error)
               },
               dataType: "xml",
               success: function(data){
                $('#nodes').html("");
                $('#nodes').html("<h3>Nodes</h3>");
                $(data).find('bn').children().each(function(){
                   var xmlDoc = $(this);
                   $('#nodes').append('<ul><li>' +
                           xmlDoc.find('name').text() + '</li><ul>' +
                           '<li>' + xmlDoc.find('state').text() + '</li>'
                    );
                });
               }
           });
        });
    </script>

I output the results to a div id="nodes", and it looks like this:

Stability
Low - 0.15 Moderate - 0.25 High - 0.60, etc.

I wonder if I can make each state have it's own <li> instead of the current format of one <li> for all states?

Also how do I hide the states unless someone clicks on the name? So I want the output to be a list of node names unless a name is clicked on.