仅使用JavaScript将xml数据解析为筛选表和图表的数组
Parse xml data using only JavaScript into arrays for filtered table and chart
我是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();
相关文章:
- 根据多个值筛选数组
- 使用特定值筛选数组
- 在javascript中按字符串长度筛选数组
- 如何筛选数组数组
- 如何获取输入字段的值并使用它来筛选数组
- 基于键和值的筛选数组
- 对多个选项进行筛选数组以在新选择中返回选项
- AngularJS ngOptions按布尔字段筛选数组
- 使用用户输入的维度,根据每个元素中的字符数筛选数组
- 需要有关创建筛选数组内容的复选框的帮助
- 使用jQuery筛选数组
- 如何使用foreach绑定将select选项中的参数传递给触发器和筛选数组可观测值
- 如何使用jQuery.grep()动态筛选数组
- 数组的严格筛选数组
- 在PHP中使用关键字筛选数组
- 基于javascript中的另一个数组筛选数组
- 基于索引数组筛选数组
- 为提前输入筛选数组的最快方法
- Angularjs基于array类型的属性来筛选数组
- 返回只包含与给定值匹配的元素的筛选数组