Parse xml data using only JavaScript into arrays for filtered table and chart

Question

I'm new to JavaScript so any help would be greatly appreciated.

I'm currently designing a website that will fetch redmine xml data. The xml data is similar to: http://www.redmine.org/projects/redmine/issues.xml?set_filter=100 . It is also available in json.

What I need to do is fetch the issues data, filter it and put it into two sets of three tables. The first set of tables should have one table listing all the details about the issues that have done_ratio=0, the second table for 100 > done_ratio > 0 and the third table for done_ratio=100. The second set of three tables should contain all the issue details filtered dependent on three status names, ie one table for status name="new" etc.

This has to be done solely in JavaScript, if absolutely required jQuery can be used. Can't use Redmine plugins.

So far,

xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "http://www.redmine.org/projects/redmine/issues.xml?set_filter=100", true);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
x = xmlDoc.getElementsByTagName("issue");
for (i = 0; i <x.length; i++) {
table += "<tr><td>";
table +=  x[i].getElementsByTagName("id")[0].childNodes[0].nodeValue;
table += "</td><td>";
document.getElementById("demo").innerHTML = table;

I'm not sure how to loop through all the data, and put all the issues data into an array, especially for elements with two parts such as id="" , name="" , and for child elements such as <id="" name=""><value></value></> , and then filter in to put into different tables.

Eventually, after all of this, the other aim is to do some calculations on the data and produce charts, such as burndown and velocity charts.

Any help, as I've been researching this for a while and stuck on how to do it.

Answer 1

Do something like this.

function getData() {
    xmlhttp = new XMLHttpRequest();
    //request below doesn't really work because of CORS problem
    xmlhttp.open("GET", "http://www.redmine.org/projects/redmine/issues.xml?set_filter=100", true);
    //XMLHttpRequest is asynchronous so response is not available immediately
    xmlhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {//loaded successfully 
            var xmlDoc = xmlhttp.responseXML;
            //create tables
            var done0 = document.createElement('table');
            var doneSome = document.createElement('table');
            var done100 = document.createElement('table');
            var issues = xmlDoc.getElementsByTagName('issue');
            //HTMLCollection received
            for (var i = 0, issue; issue = issues[i]; ++i) {
                var done = +issue.getElementsByTagName('done_ratio')[0].textContent;
                if (done >= 100)
                    addTableRow(done100, issue);//see helper function below
                else if(done>0)
                    addTableRow(doneSome, issue);
                else
                    addTableRow(done0, issue);
            }
            //everything done. Show results.
            document.getElementById('demo').appendChild(done0);
            document.getElementById('demo').appendChild(doneSome);
            document.getElementById('demo').appendChild(done100);
        }
    }
    xmlhttp.send();//send request 
}

//helper function to work with tables
function addTableRow(tblObj, dataObj) {
    var row = tblObj.insertRow(-1);//create new row and add to the bottom
    //add table cell and put content from xml element <id>
    row.insertCell(-1).innerHTML = dataObj.getElementsByTagName('id')[0].textContent;
    row.insertCell(-1).innerHTML = dataObj.getElementsByTagName('done_ratio')[0].textContent;
    //use content from attribute
    row.insertCell(-1).innerHTML = dataObj.getElementsByTagName('priority')[0].getAttribute('name');
}

getData();