Как отобразить данные XML в таблице HTML с использованием Javascript?

Как отобразить данные XML в таблице HTML с использованием Javascript?

Я пытаюсь создать HTML-документ, который будет читать XML-файл, и использовать эти данные для заполнения таблицы, используя JavaScript.

Я попытался следовать нескольким примерам онлайн, но по какой-то причине я не могу заставить его работать.

HTML код:

 {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;title{amp}gt;Diabetes Readings{amp}lt;/title{amp}gt; {amp}lt;script{amp}gt; {amp}lt;/script{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;p id="out"{amp}gt;Nothing{amp}lt;/p{amp}gt; {amp}lt;table id="readings"{amp}gt; {amp}lt;tr{amp}gt;{amp}lt;td{amp}gt;Hello{amp}lt;/td{amp}gt;{amp}lt;/tr{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;script{amp}gt; {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; 

XML-код:

 {amp}lt;?xml version="1.0" encoding="UTF-8"?{amp}gt; {amp}lt;readings{amp}gt; {amp}lt;entry{amp}gt; {amp}lt;date{amp}gt;15-10-19{amp}lt;/date{amp}gt; {amp}lt;time{amp}gt;1236{amp}lt;/time{amp}gt; {amp}lt;bs{amp}gt;12.9{amp}lt;/bs{amp}gt; {amp}lt;chk{amp}gt;No{amp}lt;/chk{amp}gt; {amp}lt;ket{amp}gt;1{amp}lt;/ket{amp}gt; {amp}lt;food{amp}gt;Sandwich{amp}lt;/food{amp}gt; {amp}lt;carb{amp}gt;37{amp}lt;/carb{amp}gt; {amp}lt;ins_carb{amp}gt;4{amp}lt;/ins_carb{amp}gt; {amp}lt;ins_corr{amp}gt;2{amp}lt;/ins_corr{amp}gt; {amp}lt;ins_ket{amp}gt;1{amp}lt;/ins_ket{amp}gt; {amp}lt;ins_tot{amp}gt;7{amp}lt;/ins_tot{amp}gt; {amp}lt;/entry{amp}gt; {amp}lt;entry{amp}gt; {amp}lt;date{amp}gt;15-10-19{amp}lt;/date{amp}gt; {amp}lt;time{amp}gt;1703{amp}lt;/time{amp}gt; {amp}lt;bs{amp}gt;10.7{amp}lt;/bs{amp}gt; {amp}lt;chk{amp}gt;No{amp}lt;/chk{amp}gt; {amp}lt;ket{amp}gt;0{amp}lt;/ket{amp}gt; {amp}lt;ins_corr{amp}gt;1{amp}lt;/ins_corr{amp}gt; {amp}lt;ins_ket{amp}gt;1{amp}lt;/ins_ket{amp}gt; {amp}lt;ins_tot{amp}gt;2{amp}lt;/ins_tot{amp}gt; {amp}lt;/entry{amp}gt; {amp}lt;entry{amp}gt; {amp}lt;date{amp}gt;15-10-19{amp}lt;/date{amp}gt; {amp}lt;time{amp}gt;1914{amp}lt;/time{amp}gt; {amp}lt;bs{amp}gt;5.5{amp}lt;/bs{amp}gt; {amp}lt;chk{amp}gt;Yes{amp}lt;/chk{amp}gt; {amp}lt;ket{amp}gt;0{amp}lt;/ket{amp}gt; {amp}lt;food{amp}gt;Pasta bake{amp}lt;/food{amp}gt; {amp}lt;carb{amp}gt;41{amp}lt;/carb{amp}gt; {amp}lt;ins_carb{amp}gt;4{amp}lt;/ins_carb{amp}gt; {amp}lt;ins_tot{amp}gt;4{amp}lt;/ins_tot{amp}gt; {amp}lt;/entry{amp}gt; {amp}lt;entry{amp}gt; {amp}lt;date{amp}gt;15-10-19{amp}lt;/date{amp}gt; {amp}lt;time{amp}gt;2143{amp}lt;/time{amp}gt; {amp}lt;bs{amp}gt;9.4{amp}lt;/bs{amp}gt; {amp}lt;chk{amp}gt;Yes{amp}lt;/chk{amp}gt; {amp}lt;ket{amp}gt;0{amp}lt;/ket{amp}gt; {amp}lt;/entry{amp}gt; {amp}lt;entry{amp}gt; {amp}lt;date{amp}gt;16-10-19{amp}lt;/date{amp}gt; {amp}lt;time{amp}gt;0049{amp}lt;/time{amp}gt; {amp}lt;bs{amp}gt;6.7{amp}lt;/bs{amp}gt; {amp}lt;chk{amp}gt;Yes{amp}lt;/chk{amp}gt; {amp}lt;/entry{amp}gt; {amp}lt;entry{amp}gt; {amp}lt;date{amp}gt;16-10-19{amp}lt;/date{amp}gt; {amp}lt;time{amp}gt;0921{amp}lt;/time{amp}gt; {amp}lt;bs{amp}gt;14.6{amp}lt;/bs{amp}gt; {amp}lt;chk{amp}gt;No{amp}lt;/chk{amp}gt; {amp}lt;ket{amp}gt;0{amp}lt;/ket{amp}gt; {amp}lt;food{amp}gt;Toast w/ butter and jam{amp}lt;/food{amp}gt; {amp}lt;carb{amp}gt;39{amp}lt;/carb{amp}gt; {amp}lt;ins_carb{amp}gt;4{amp}lt;/ins_carb{amp}gt; {amp}lt;ins_corr{amp}gt;3{amp}lt;/ins_corr{amp}gt; {amp}lt;ins_tot{amp}gt;7{amp}lt;/ins_tot{amp}gt; {amp}lt;/entry{amp}gt; {amp}lt;entry{amp}gt; {amp}lt;date{amp}gt;16-10-19{amp}lt;/date{amp}gt; {amp}lt;time{amp}gt;1415{amp}lt;/time{amp}gt; {amp}lt;bs{amp}gt;9.7{amp}lt;/bs{amp}gt; {amp}lt;chk{amp}gt;Yes{amp}lt;/chk{amp}gt; {amp}lt;/entry{amp}gt; {amp}lt;entry{amp}gt; {amp}lt;date{amp}gt;16-10-19{amp}lt;/date{amp}gt; {amp}lt;time{amp}gt;2040{amp}lt;/time{amp}gt; {amp}lt;bs{amp}gt;10.1{amp}lt;/bs{amp}gt; {amp}lt;chk{amp}gt;No{amp}lt;/chk{amp}gt; {amp}lt;food{amp}gt;Chicken nuggets {amp}amp;amp; chips{amp}lt;/food{amp}gt; {amp}lt;carb{amp}gt;73{amp}lt;/carb{amp}gt; {amp}lt;ins_carb{amp}gt;7{amp}lt;/ins_carb{amp}gt; {amp}lt;ins_corr{amp}gt;1{amp}lt;/ins_corr{amp}gt; {amp}lt;ins_tot{amp}gt;8{amp}lt;/ins_tot{amp}gt; {amp}lt;/entry{amp}gt; {amp}lt;entry{amp}gt; {amp}lt;date{amp}gt;17-10-19{amp}lt;/date{amp}gt; {amp}lt;time{amp}gt;0023{amp}lt;/time{amp}gt; {amp}lt;bs{amp}gt;8.7{amp}lt;/bs{amp}gt; {amp}lt;chk{amp}gt;Yes{amp}lt;/chk{amp}gt; {amp}lt;/entry{amp}gt; {amp}lt;entry{amp}gt; {amp}lt;date{amp}gt;17-10-19{amp}lt;/date{amp}gt; {amp}lt;time{amp}gt;0859{amp}lt;/time{amp}gt; {amp}lt;bs{amp}gt;17.1{amp}lt;/bs{amp}gt; {amp}lt;chk{amp}gt;No{amp}lt;/chk{amp}gt; {amp}lt;ket{amp}gt;0{amp}lt;/ket{amp}gt; {amp}lt;food{amp}gt;Cheerios w/ milk{amp}lt;/food{amp}gt; {amp}lt;carb{amp}gt;43{amp}lt;/carb{amp}gt; {amp}lt;ins_corr{amp}gt;3{amp}lt;/ins_corr{amp}gt; {amp}lt;ins_carb{amp}gt;4{amp}lt;/ins_carb{amp}gt; {amp}lt;ins_tot{amp}gt;7{amp}lt;/ins_tot{amp}gt; {amp}lt;/entry{amp}gt; {amp}lt;entry{amp}gt; {amp}lt;date{amp}gt;17-10-19{amp}lt;/date{amp}gt; {amp}lt;time{amp}gt;1215{amp}lt;/time{amp}gt; {amp}lt;bs{amp}gt;10.0{amp}lt;/bs{amp}gt; {amp}lt;chk{amp}gt;No{amp}lt;/chk{amp}gt; {amp}lt;food{amp}gt;Scrambled egg w/ 2 toast{amp}lt;/food{amp}gt; {amp}lt;carb{amp}gt;34{amp}lt;/carb{amp}gt; {amp}lt;ins_carb{amp}gt;3{amp}lt;/ins_carb{amp}gt; {amp}lt;ins_corr{amp}gt;1{amp}lt;/ins_corr{amp}gt; {amp}lt;ins_tot{amp}gt;4{amp}lt;/ins_tot{amp}gt; {amp}lt;/entry{amp}gt; {amp}lt;entry{amp}gt; {amp}lt;date{amp}gt;17-10-19{amp}lt;/date{amp}gt; {amp}lt;time{amp}gt;1903{amp}lt;/time{amp}gt; {amp}lt;bs{amp}gt;13.0{amp}lt;/bs{amp}gt; {amp}lt;chk{amp}gt;No{amp}lt;/chk{amp}gt; {amp}lt;food{amp}gt;Tortellini w/ sauce{amp}lt;/food{amp}gt; {amp}lt;carb{amp}gt;111{amp}lt;/carb{amp}gt; {amp}lt;ins_carb{amp}gt;11{amp}lt;/ins_carb{amp}gt; {amp}lt;ins_corr{amp}gt;2{amp}lt;/ins_corr{amp}gt; {amp}lt;/entry{amp}gt; {amp}lt;entry{amp}gt; {amp}lt;date{amp}gt;18-10-19{amp}lt;/date{amp}gt; {amp}lt;time{amp}gt;0019{amp}lt;/time{amp}gt; {amp}lt;bs{amp}gt;13.2{amp}lt;/bs{amp}gt; {amp}lt;ins_corr{amp}gt;2{amp}lt;/ins_corr{amp}gt; {amp}lt;/entry{amp}gt; {amp}lt;entry{amp}gt; {amp}lt;date{amp}gt;18-10-19{amp}lt;/date{amp}gt; {amp}lt;time{amp}gt;0855{amp}lt;/time{amp}gt; {amp}lt;bs{amp}gt;13.9{amp}lt;/bs{amp}gt; {amp}lt;ins_corr{amp}gt;2{amp}lt;/ins_corr{amp}gt; {amp}lt;ins_carb{amp}gt;4{amp}lt;/ins_carb{amp}gt; {amp}lt;/entry{amp}gt; {amp}lt;entry{amp}gt; {amp}lt;date{amp}gt;18-10-19{amp}lt;/date{amp}gt; {amp}lt;time{amp}gt;1316{amp}lt;/time{amp}gt; {amp}lt;bs{amp}gt;9.8{amp}lt;/bs{amp}gt; {amp}lt;chk{amp}gt;Yes{amp}lt;/chk{amp}gt; {amp}lt;food{amp}gt;2 x chicken caesar wrap{amp}lt;/food{amp}gt; {amp}lt;carb{amp}gt;92.6{amp}lt;/carb{amp}gt; {amp}lt;ins_carb{amp}gt;14{amp}lt;/ins_carb{amp}gt; {amp}lt;/entry{amp}gt; {amp}lt;entry{amp}gt; {amp}lt;date{amp}gt;18-10-19{amp}lt;/date{amp}gt; {amp}lt;time{amp}gt;2013{amp}lt;/time{amp}gt; {amp}lt;bs{amp}gt;14.0{amp}lt;/bs{amp}gt; {amp}lt;chk{amp}gt;No{amp}lt;/chk{amp}gt; {amp}lt;ket{amp}gt;0{amp}lt;/ket{amp}gt; {amp}lt;food{amp}gt;Pizza{amp}lt;/food{amp}gt; {amp}lt;carb{amp}gt;91.2{amp}lt;/carb{amp}gt; {amp}lt;ins_carb{amp}gt;9{amp}lt;/ins_carb{amp}gt; {amp}lt;ins_corr{amp}gt;3{amp}lt;/ins_corr{amp}gt; {amp}lt;/entry{amp}gt; {amp}lt;/readings{amp}gt; 

Javascript код:

 var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 {amp}amp;{amp}amp; this.status == 200) { myFunction(this); } }; xhttp.open("get","diabetes.xml",true); xhttp.send(); function myFunction(xml) { var i; var xmlDOC = xml.responseXML; var table = "{amp}lt;tr{amp}gt;{amp}lt;th{amp}gt;Date{amp}lt;/th{amp}gt;{amp}lt;th{amp}gt;Time{amp}lt;/th{amp}gt;{amp}lt;th{amp}gt;Reading{amp}lt;/th{amp}gt;{amp}lt;th{amp}gt;Check{amp}lt;/th{amp}gt;{amp}lt;th{amp}gt;Ketone{amp}lt;/th{amp}gt;{amp}lt;th{amp}gt;Food{amp}lt;/th{amp}gt;{amp}lt;th{amp}gt;Carbs{amp}gt;{amp}lt;/th{amp}gt;{amp}lt;th{amp}gt;Insulin (corr){amp}lt;/th{amp}gt;{amp}lt;th{amp}gt;Insulin (carbs){amp}lt;/th{amp}gt;{amp}lt;th{amp}gt;Insulin (ketones){amp}lt;/th{amp}gt;{amp}lt;th{amp}gt;Insulin (total){amp}lt;/th{amp}gt;{amp}lt;/tr{amp}gt;"; var x = xmlDoc.getElementsByTagName("entry"); for (i = 0; i {amp}lt; x.length; i  ) { table  = "{amp}lt;tr{amp}gt;{amp}lt;td{amp}gt;"   x[i].getElementsByTagName("date")[0].childNodes[0].nodeValue   "{amp}lt;/td{amp}gt;{amp}lt;td{amp}gt;"   x[i].getElementsByTagName("time")[0].childNodes[0].nodeValue   "{amp}lt;/td{amp}gt;{amp}lt;td{amp}gt;"   x[i].getElementsByTagName("bs")[0].childNodes[0].nodeValue   "{amp}lt;/td{amp}gt;{amp}lt;td{amp}gt;"   x[i].getElementsByTagName("chk")[0].childNodes[0].nodeValue   "{amp}lt;/td{amp}gt;{amp}lt;td{amp}gt;"   x[i].getElementsByTagName("ket")[0].childNodes[0].nodeValue   "{amp}lt;/td{amp}gt;{amp}lt;td{amp}gt;"   x[i].getElementsByTagName("food")[0].childNodes[0].nodeValue   "{amp}lt;/td{amp}gt;{amp}lt;td{amp}gt;"   x[i].getElementsByTagName("carb")[0].childNodes[0].nodeValue   "{amp}lt;/td{amp}gt;{amp}lt;td{amp}gt;"   x[i].getElementsByTagName("ins_corr")[0].childNodes[0].nodeValue   "{amp}lt;/td{amp}gt;{amp}lt;td{amp}gt;"   x[i].getElementsByTagName("ins_carb")[0].childNodes[0].nodeValue   "{amp}lt;/td{amp}gt;{amp}lt;td{amp}gt;"   x[i].getElementsByTagName("ins_ket")[0].childNodes[0].nodeValue   "{amp}lt;/td{amp}gt;{amp}lt;td{amp}gt;"   x[i].getElementsByTagName("ins_tot")[0].childNodes[0].nodeValue   "{amp}lt;/td{amp}gt;{amp}lt;/tr{amp}gt;"; } document.getElementById("out").innerHTML = table; } 

Я ожидаю, что данные будут отображаться в таблице в нескольких строках.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector