xml output

xml output

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:
  1. <?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:
  1. <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.

  • Stability
  • Free/Fair Elections
  • Regulatory Compliance

Thanks for any suggestions.