仅使用JavaScript将xml数据解析为筛选表和图表的数组

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

本文关键字：筛选 数组 JavaScript 数据 xml      更新时间：2023-09-26

我是JavaScript新手，如果有任何帮助，我将不胜感激。

我目前正在设计一个网站，将获取redmine xml数据。xml数据类似于:http://www.redmine.org/projects/redmine/issues.xml?set_filter=100。它也可以在json中使用。

我需要做的是获取问题数据，过滤它并将其放入两组三个表中。第一组表应该有一个表列出关于done_ratio=0的问题的所有细节，第二个表列出100> done_ratio> 0，第三个表列出done_ratio=100。第二组三个表应该包含根据三个状态名过滤的所有问题细节，即一个表的状态名="new"等。

这只能在JavaScript中完成，如果绝对需要，可以使用jQuery。不能使用Redmine插件

, 

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;

我不确定如何循环遍历所有数据，并将所有问题数据放入数组中，特别是对于具有两个部分的元素，如id="", name=""和子元素，如<id="" name=""><value></value></>，然后过滤放入不同的表中。

最终，在所有这些之后，另一个目标是对数据进行一些计算并生成图表，例如燃尽和速度图表。

任何帮助，因为我一直在研究这个问题，并坚持如何做到这一点。

这样做

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();
相关文章：