Xml / html formatting and output

Question

Hi I'm still newish to javascript / html / xml, but do understand the concepts and can do some basic coding.

I'm trying to get some xml data, and put this data into some html tables, this all works, but the data is not being put onto separate table rows. I understand I may have to create arrays ,but the code I have is via the net and I'm stuck on how to to do this. So I'm looking for some help around javascript/ html.

It's working but the display does not look right, as it's all on one line per header, and I need it to be on separate rows.

I've googled, and tried various options, but with no luck.

The javascript function:

function myGetEventsXmlData() {
    $.ajax({
        type: "GET",
        url: "data/event_list.xml",
        dataType: "xml",
        success: xmlEventParser
    });
}

function xmlEventParser(xml) {
$(xml).find('event_list').each(function () {
    var $show = $(this);
    var data = {
        title: $show.find('title').text(),
        name: $show.find('name').text(),
        severity: $show.find('severity').text(),

    };
    var row = $('<tr />');
    for (var prop in data) {
        $('<td>' + data[prop] + '</td>').appendTo(row);
    }

    $('#eventtable').append(row);
});
}  

This is the xml file im trying to parse

<?xml version="1.0" encoding="UTF-8"?>
<event_list>
    <event>
        <id>9199acca-df09-71e6-1946-c0a800820000</id>
        <title>client.createConnection(691) - AMQ214016: Failed to create netty connection </title>
        <name>test1.system.com</name>
        <state>open</state>
        <severity>critical</severity>
        <priority>medium</priority>
        <category>Internal</category>
     </event>
     <event>
         <id>9199acca-df09-71e6-1946-c0a800820000</id>
         <title>ssh login failed </title>
         <name>test2.system.com</name>
         <state>open</state>
         <severity>major</severity>
         <priority>medium</priority>
         <category>OS</category>
     </event>
     <event>
         <id>9199acca-df09-71e6-1946-c0a800820000</id>
         <title>Oracle Connection OK </title>
         <name>test3.system.com</name>
         <state>open</state>
         <severity>normal</severity>
         <priority>medium</priority>
         <category>Database</category>
     </event>
 </event_list>

html code section

              <table id="eventtable" table=table style="width:100%"               align="center">
            <tr>
                <th>Title</th>
                <th>Name</th>
                <th>Severity</th>

            </tr>
        </table>

The data appears in the section but its all together and not seperate rows, what I'd like is for the data to be on a new row for each new data, rather than on the one row.

Any thoughts on how to do this would be great.

Answer 1

$(xml).find('event_list').each(function () {

You are looping over each <event_list> (of which you have only one).

You should be looping over each <event> .