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.
- Stability
- Free/Fair Elections
- Regulatory Compliance
Thanks for any suggestions.