How do I display XML data in a HTML table using Javascript? [on hold]
Question
I am trying to create a HTML document that will read an XML file, and use that data to populate a table, using javascript.
I have tried following a few examples online but for some reason, I can't get it to work.
The expected outcome should show the readings in a table, across multiple columns and rows. All I am getting is a blank webpage, with no data being rendered at all.
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Diabetes Readings</title>
<script>
</script>
</head>
<body>
<p id="out">Nothing</p>
<table id="readings">
<tr><td>Hello</td></tr>
</table>
<script>
</script>
</body>
XML code:
<?xml version="1.0" encoding="UTF-8"?>
<readings>
<entry>
<date>15-10-19</date>
<time>1236</time>
<bs>12.9</bs>
<chk>No</chk>
<ket>1</ket>
<food>Sandwich</food>
<carb>37</carb>
<ins_carb>4</ins_carb>
<ins_corr>2</ins_corr>
<ins_ket>1</ins_ket>
<ins_tot>7</ins_tot>
</entry>
<entry>
<date>15-10-19</date>
<time>1703</time>
<bs>10.7</bs>
<chk>No</chk>
<ket>0</ket>
<ins_corr>1</ins_corr>
<ins_ket>1</ins_ket>
<ins_tot>2</ins_tot>
</entry>
<entry>
<date>15-10-19</date>
<time>1914</time>
<bs>5.5</bs>
<chk>Yes</chk>
<ket>0</ket>
<food>Pasta bake</food>
<carb>41</carb>
<ins_carb>4</ins_carb>
<ins_tot>4</ins_tot>
</entry>
<entry>
<date>15-10-19</date>
<time>2143</time>
<bs>9.4</bs>
<chk>Yes</chk>
<ket>0</ket>
</entry>
<entry>
<date>16-10-19</date>
<time>0049</time>
<bs>6.7</bs>
<chk>Yes</chk>
</entry>
<entry>
<date>16-10-19</date>
<time>0921</time>
<bs>14.6</bs>
<chk>No</chk>
<ket>0</ket>
<food>Toast w/ butter and jam</food>
<carb>39</carb>
<ins_carb>4</ins_carb>
<ins_corr>3</ins_corr>
<ins_tot>7</ins_tot>
</entry>
<entry>
<date>16-10-19</date>
<time>1415</time>
<bs>9.7</bs>
<chk>Yes</chk>
</entry>
<entry>
<date>16-10-19</date>
<time>2040</time>
<bs>10.1</bs>
<chk>No</chk>
<food>Chicken nuggets & chips</food>
<carb>73</carb>
<ins_carb>7</ins_carb>
<ins_corr>1</ins_corr>
<ins_tot>8</ins_tot>
</entry>
<entry>
<date>17-10-19</date>
<time>0023</time>
<bs>8.7</bs>
<chk>Yes</chk>
</entry>
<entry>
<date>17-10-19</date>
<time>0859</time>
<bs>17.1</bs>
<chk>No</chk>
<ket>0</ket>
<food>Cheerios w/ milk</food>
<carb>43</carb>
<ins_corr>3</ins_corr>
<ins_carb>4</ins_carb>
<ins_tot>7</ins_tot>
</entry>
<entry>
<date>17-10-19</date>
<time>1215</time>
<bs>10.0</bs>
<chk>No</chk>
<food>Scrambled egg w/ 2 toast</food>
<carb>34</carb>
<ins_carb>3</ins_carb>
<ins_corr>1</ins_corr>
<ins_tot>4</ins_tot>
</entry>
<entry>
<date>17-10-19</date>
<time>1903</time>
<bs>13.0</bs>
<chk>No</chk>
<food>Tortellini w/ sauce</food>
<carb>111</carb>
<ins_carb>11</ins_carb>
<ins_corr>2</ins_corr>
</entry>
<entry>
<date>18-10-19</date>
<time>0019</time>
<bs>13.2</bs>
<ins_corr>2</ins_corr>
</entry>
<entry>
<date>18-10-19</date>
<time>0855</time>
<bs>13.9</bs>
<ins_corr>2</ins_corr>
<ins_carb>4</ins_carb>
</entry>
<entry>
<date>18-10-19</date>
<time>1316</time>
<bs>9.8</bs>
<chk>Yes</chk>
<food>2 x chicken caesar wrap</food>
<carb>92.6</carb>
<ins_carb>14</ins_carb>
</entry>
<entry>
<date>18-10-19</date>
<time>2013</time>
<bs>14.0</bs>
<chk>No</chk>
<ket>0</ket>
<food>Pizza</food>
<carb>91.2</carb>
<ins_carb>9</ins_carb>
<ins_corr>3</ins_corr>
</entry>
</readings>
Javascript code:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("get","diabetes.xml",true);
xhttp.send();
function myFunction(xml) {
var i;
var xmlDOC = xml.responseXML;
var table = "<tr><th>Date</th><th>Time</th><th>Reading</th><th>Check</th><th>Ketone</th><th>Food</th><th>Carbs></th><th>Insulin (corr)</th><th>Insulin (carbs)</th><th>Insulin (ketones)</th><th>Insulin (total)</th></tr>";
var x = xmlDoc.getElementsByTagName("entry");
for (i = 0; i < x.length; i++)
{
table += "<tr><td>" + x[i].getElementsByTagName("date")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("time")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("bs")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("chk")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("ket")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("food")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("carb")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("ins_corr")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("ins_carb")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("ins_ket")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("ins_tot")[0].childNodes[0].nodeValue + "</td></tr>";
}
document.getElementById("out").innerHTML = table;
}
1 answers
solution1
0 2019-10-19 00:41:13
hopefully my snippet can help you in any ways. cheers!
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Diabetes Readings</title>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("get", "diabetes.xml", true);
xhttp.send();
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table = "<tr><th>Date</th><th>Time</th><th>Reading</th><th>Check</th><th>Ketone</th><th>Food</th><th>Carbs</th><th>Insulin (corr)</th><th>Insulin (carbs)</th><th>Insulin (ketones)</th><th>Insulin (total)</th></tr>";
var x = xmlDoc.getElementsByTagName("entry");
for (i = 0; i < x.length; i++) {
date = (x[i].getElementsByTagName("date")[0]) ?
x[i].getElementsByTagName("date")[0].childNodes[0].nodeValue :
"-";
time = (x[i].getElementsByTagName("time")[0]) ?
x[i].getElementsByTagName("time")[0].childNodes[0].nodeValue :
"-";
bs = (x[i].getElementsByTagName("bs")[0]) ?
x[i].getElementsByTagName("bs")[0].childNodes[0].nodeValue :
"-";
chk = (x[i].getElementsByTagName("chk")[0]) ?
x[i].getElementsByTagName("chk")[0].childNodes[0].nodeValue :
"-";
ket = (x[i].getElementsByTagName("ket")[0]) ?
x[i].getElementsByTagName("ket")[0].childNodes[0].nodeValue :
"-";
food = (x[i].getElementsByTagName("food")[0]) ?
x[i].getElementsByTagName("food")[0].childNodes[0].nodeValue :
"-";
carb = (x[i].getElementsByTagName("carb")[0]) ?
x[i].getElementsByTagName("carb")[0].childNodes[0].nodeValue :
"-";
ins_corr = (x[i].getElementsByTagName("ins_corr")[0]) ?
x[i].getElementsByTagName("ins_corr")[0].childNodes[0].nodeValue :
"-";
ins_carb = (x[i].getElementsByTagName("ins_carb")[0]) ?
x[i].getElementsByTagName("ins_carb")[0].childNodes[0].nodeValue :
"-";
ins_ket = (x[i].getElementsByTagName("ins_ket")[0]) ?
x[i].getElementsByTagName("ins_ket")[0].childNodes[0].nodeValue :
"-";
ins_tot = (x[i].getElementsByTagName("ins_tot")[0]) ?
x[i].getElementsByTagName("ins_tot")[0].childNodes[0].nodeValue :
"-";
table += "<tr><td>" + date + "</td><td>" + time + "</td><td>" + bs + "</td><td>" + chk + "</td><td>" + ket + "</td><td>" + food + "</td><td>" + carb + "</td><td>" + ins_corr + "</td><td>" + ins_carb + "</td><td>" + ins_ket + "</td><td>" + ins_tot + "</td></tr>";
}
document.getElementById("readings").innerHTML = table;
}
</script>
</head>
<body>
<table id="readings" border="1"></table>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I display this XML data in an HTML table?
How do I display JSON file data into HTML table (using JavaScript only, not jQuery)
How do i import a xml tag with JavaScript to display an image in html
How can I iterate over an XML file and display the data in a HTML web page using JavaScript?
Using javascript to display XML data in HTML
How can I parse data from XML file into HTML table using pure JavaScript?
How can I fetch XML Data from a file stored on my PC and populate a table in HTML using javascript?
How do i display a variable from a XML document using Javascript?
Display data in an HTML table using JavaScript/jQuery
How do I look up the HTML5 'data' attribute when parsing an xml file using Javascript?
Related Tags