The String "AbfahrtszeitIst" cant be shown in the HTML document. When I user other Strings there is no problem. I dont understand why, because in the XML Document tag "Haltepositionen" there all stings working but the string "AbfahrtszeitIst" doesnt.
<html>
<head>
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
</head>
<body onload="loadXMLDoc()">
<script>
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xmlhttp.open("GET", "https://start.vag.de/dm/api/v1/fahrten.xml/Bus/2049872", true);
xmlhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th style='text-align:left'></th><th></th></tr>";
var x = xmlDoc.getElementsByTagName("Halteposition");
var c = xmlDoc.getElementsByTagName("FahrtResponse");
var t = xmlDoc.getElementsByTagName("Fahrtverlauf");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("Haltestellenname")[0].childNodes[0].nodeValue +
"</td><td>" +
"<a target='_blank' href='https://www.google.com/maps?q=" + x[i].getElementsByTagName("Latitude")[0].childNodes[0].nodeValue + "," + x[i].getElementsByTagName("Longitude")[0].childNodes[0].nodeValue + "'><grau>Karte</a>" +
"</td><td>" + //PROBLEM:
x[i].getElementsByTagName("AbfahrtszeitIst")[0].childNodes[0].nodeValue +
"</td></tr>";
}
for (v = 0; v <c.length; v++) {
document.getElementById("fahrten-titel").innerHTML = c[v].getElementsByTagName("Linienname")[0].childNodes[0].nodeValue + " " + c[v].getElementsByTagName("Richtungstext")[0].childNodes[0].nodeValue;
}
for (m = 0; m <t.length; m++) {
var startzeit_hhmm = new Date(t[m].getElementsByTagName("AbfahrtszeitIst")[0].childNodes[0].nodeValue).toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");
document.getElementById("startzeit").innerHTML = "Start um: " + startzeit_hhmm + " Uhr";
}
document.getElementById("fahrten-tabelle").innerHTML = table;
document.getElementById("fahrzeug").innerHTML = "Bus: " + (parameter_fnummer) ;
}
</script>
<div id="fahrten-table"></div>
</body>
</html>
Its because there is no node with the name AbfahrtszeitIst for the last node Halteposition. You can add a check like below :
for (i = 0; i <x.length; i++)
{
//Added line
var abfahrtszeitistvalue = x[i].getElementsByTagName("AbfahrtszeitIst")[0] ? x[i].getElementsByTagName("AbfahrtszeitIst")[0].childNodes[0].nodeValue : "";
table += "<tr><td>" +
x[i].getElementsByTagName("Haltestellenname")[0].childNodes[0].nodeValue +
"</td><td>" +
"<a target='_blank' href='https://www.google.com/maps?q=" + x[i].getElementsByTagName("Latitude")[0].childNodes[0].nodeValue + "," + x[i].getElementsByTagName("Longitude")[0].childNodes[0].nodeValue + "'><grau>Karte</a>" +
"</td><td>" + //PROBLEM:
abfahrtszeitistvalue +
"</td></tr>";
}
Related
With id="cancel_upload" I want to delete one file in the queue to upload with jQuery, is there a way to do this? this is my code:
$("#files").on("change", function() {
var fp = $("#files");
var lg = fp[0].files.length;
var items = fp[0].files;
var fragment = "";
if (lg > 4) {
alert('Upload maksimal 4 file!');
return false;
} else {
$("#list_file").show();
for (var i = 0; i < lg; i++) {
var fileName = items[i].name;
var fileSize = items[i].size;
fragment += '<div class="item">' + '<a class="ui label">' + "(" + formatFileSize(fileSize) + ") " + fileName + '<i class="delete icon" id="cancel_upload"></i>' + "</a>" + "</div>" + "<br>";
}
$("#list_file").append(fragment);
$("#files").prop('disabled', true);
}
});
$("cancel_upload").on('click', function() {
fileName.abort();
});
Try something like
var ajaxCalll;
$("#files").on("change", function() {
var fp = $("#files");
var lg = fp[0].files.length;
var items = fp[0].files;
var fragment = "";
if (lg > 4) {
alert('Upload maksimal 4 file!');
return false;
} else {
$("#list_file").show();
for (var i = 0; i < lg; i++) {
var fileName = items[i].name;
var fileSize = items[i].size;
fragment += '<div class="item">' + '<a class="ui label">' + "(" + formatFileSize(fileSize) + ") " + fileName + '<i class="delete icon" id="cancel_upload"></i>' + "</a>" + "</div>" + "<br>";
}
$("#list_file").append(fragment);
$("#files").prop('disabled', true);
// assign AJAX Call to ajaxCalll variable
}
});
$("#cancel_upload").on('click', function() {
ajaxCalll.abort();
});
Hope this will help you.
basically, I am reading out an XML file and I want to make sure that you can read the content clearly. In the current way I am trying to read it out, you get one long line of content. I rather would like it to be:
TITLE: VAL
TITLE: VAL2
etc. I tried using a HTML linebreak tag yet that is not working. Any suggestions? Here is the output as it is now: https://gyazo.com/f98de4fc8941874aea27ad03750f6955?token=981b91ccbeae94c64a15b76e654708b9
<!DOCTYPE html>
<html>
<body>
<div id="XMLDisplay">
<p id="container"></p>
</div>
<script>
var paragraph = document.getElementById("container");
var xmlhttp, xmlDoc;
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "Opdracht1XML.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
x = xmlDoc.getElementsByTagName("CD")[0].childNodes;
z = xmlDoc.getElementsByTagName("CD")
for (k = 0; k < x.length; k++) {
y = xmlDoc.getElementsByTagName("CD")[k].firstChild;
for (i = 0; i < x.length; i++) //looping xml childnodes
{
if (y.nodeType == 1) {
var elements = y.nodeName;
var values = y.firstChild.nodeValue;
paragraph.append(elements + ": " + values);
}
y = y.nextSibling;
}
document.write("<br/>");
}
</script>
</body>
</html>
Found a solution myself, thanks if you took the effort to try to find a solution yourself!
(solution:
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xmlhttp.open("GET", "Opdracht1XML.xml", true);
xmlhttp.send();
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Title</th><th>Artist</th><th>Country</th><th>Company</th><th>Price</th><th>Year</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("PRICE")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("table").innerHTML = table;
}
</script>
)
I'm have a tough time getting the value for a particular node. I'm pulling my XML data from the url http://eutils.ncbi.nlm.nih.gov/entrez/eutils/efetch.fcgi?db=pubmed&id=25092882,25260646,25242549&retmode=xml and I'm using the following code
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
xhttp.open("GET",
"http://eutils.ncbi.nlm.nih.gov/entrez/eutils/efetch.fcgi?db=pubmed&id=25092882,25260646,25242549&retmode=xml",
true);
xhttp.send();}
function myFunction(xml) {
var txt = '';
var i;
var affiliation;
var aff;
var pmcid = '';
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("PubmedArticle");
var authors = "";
for (i = 0; i < x.length; i++) {
var pmid = 'PMID: ' + x[i].getElementsByTagName("PMID")[0].childNodes[
0].nodeValue;
txt += pmid + "</br> ";
var author = x[i].getElementsByTagName("Author");
for (a = 0; a < author.length; a++) {
authors += author[a].getElementsByTagName("LastName")[0].childNodes[
0].nodeValue;
authors += " ";
authors += author[a].getElementsByTagName("Initials")[0].childNodes[
0].nodeValue;
affiliation = author[a].getElementsByTagName("AffiliationInfo")
authors += " Author Affiliation: " + affiliation[0].getElementsByTagName(
"Affiliation")[0].childNodes[0].nodeValue;
authors += " " + "</br> ";
}
txt += authors + " ";
var articleTitle = 'Article Title: ' + x[i].getElementsByTagName(
"ArticleTitle")[0].childNodes[0].nodeValue;
txt += articleTitle + "</br> ";
var journal = 'Journal Title: ' + x[i].getElementsByTagName("Title")[
0].childNodes[0].nodeValue;
txt += journal + "</br> ";
var yearPub = 'Date Published: ';
txt += yearPub + "</br> "
var AbstractText = 'Abstract Text: ' + x[i].getElementsByTagName(
"AbstractText")[0].childNodes[0].nodeValue;
txt += AbstractText + "</br> ";
txt += "PMCID: " + pmcid + "</br> "
txt += "</br> "
}
document.getElementById("demo").innerHTML += txt;
}
The line I'm having trouble with is the affiliation. The value is inside the Author Node that I'm looping and then there is the AffiliationInfo then Affiliation. If I take the Affiliation information out the function runs fine but I need to get the Affiliation values.
Thanks ahead of time.
Not all Author nodes have Author Affiliation nodes. You will need to check for existence.
affiliation = author[a].getElementsByTagName("AffiliationInfo")
if (affiliation.length > 0) {
authors += " Author Affiliation: " + affiliation[0].getElementsByTagName("Affiliation")[0].childNodes[0].nodeValue;
authors += " " + "</br> ";
}
Set Month to a variable and check if the length.
var pubMonth = [add code to get month]
if (pubMonth.length > 0) {
'..Do stuff
}
If you really wanted to get serious with XML parsing, I would suggest using XPath. There is a lot of extra code you're writing just to get node values and traverse the tree.
https://developer.mozilla.org/en/docs/Web/API/Document/evaluate
If you don't mind getting into a library that removes alot of the headache, JQuery does it nicely.
https://api.jquery.com/jQuery.parseXML/
Here's a little example with JsJaxy(https://github.com/riversun/JsJaxy).
It's easy to parse XML(xml document) and convert it into JavaScript object.
var xmlParser = new org.riversun.jsjx.XmlParser();
var xhr = new XMLHttpRequest();
xmlParser.addArrayElementName('PubmedArticleSet.PubmedArticle');
xmlParser.addArrayElementName('PubmedArticleSet.PubmedArticle.CommentsCorrectionsList.CommentsCorrections');
xhr.open('GET', 'http://eutils.ncbi.nlm.nih.gov/entrez/eutils/efetch.fcgi?db=pubmed&id=25092882,25260646,25242549&retmode=xml', true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var doc = xhr.responseXML;
//do parse
var root = xmlParser.parseDocument(doc);
//show element
console.log(root.PubmedArticleSet.PubmedArticle[0].MedlineCitation.CommentsCorrectionsList.CommentsCorrections[0].RefSource);
}
}
};
xhr.send(null);
I am trying to code a simple weather app.
I am having trouble targeting the attribute, there are several nodes that are named the same, but differentiated by the attribute.
displayWET(0);
function displayWET(i) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
myFunction(xmlhttp, i);
}
}
xmlhttp.open("GET", "http://forecast.weather.gov/MapClick.php? lat=33.749&lon=-84.388&unit=0&lg=english&FcstType=dwml", true);
xmlhttp.send();
}
function myFunction(xml, i) {
var xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName("data");
var summary;
var wetSummary;
s = xmlDoc.getElementsByTagName("weather"[1]);
for (var i=0;i<s.length;i++)
{
wetSummary=s[i].getElementsByTagName("weather-conditions");
summary = wetSummary.item(i).getAttributeNode("weather-summary");
}
document.getElementById("showWet").innerHTML =
"<h2 class='title'>ATLANTA</h2>" + "<h2 class='number'>" +
x[1].getElementsByTagName("value")[0].childNodes[0].nodeValue
+ "° F</h2><br/>" +
"H: " +
x[0].getElementsByTagName("value")[0].childNodes[0].nodeValue
+ "° F / L: " +
x[0].getElementsByTagName("value")[7].childNodes[0].nodeValue
+ "° F<br/><img src='" +
x[1].getElementsByTagName("icon-link")[0].childNodes[0].nodeValue
+ "'/><br/>" + "<br/><strong>Today:</strong> " +
x[0].getElementsByTagName("text")[0].childNodes[0].nodeValue
+ "<br/>" + summary
;
}
The var summary is returning undefined. Here is the link to my xml.
http://forecast.weather.gov/MapClick.php?lat=33.7712&lon=-84.3764&unit=0&lg=english&FcstType=dwml
Any help would be much appreciated.
I'm making a paging on list of products. When i clicked on "Next" button and show in console value of "tranght" (My code only show value of "tranght") then type of "tranght" is converted to NaN. Help me, i'm newer in Jquery.
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery-1.6.2.js"></script>
<script type="text/javascript">
var ds = [];
var tranght = 1;
var sobanghi = 0;
var sotrang = 0;
$(document).ready(function(){
$('#btnshow').click(function(){
$.ajax({
type : 'GET',
headers : {
Accept : "application/json; charset=utf-8",
"Content-Type" : "application/json; charset=utf-8"
},
url : '${pageContext.request.contextPath }/findall.html',
success : function(result) {
ds = result.dssp;
sobanghi = result.dssp.length;
if ((sobanghi % 3) === 0){
sotrang = Math.floor(sobanghi / 3);
} else {
sotrang = Math.floor(sobanghi / 3) + 1;
}
var s = "";
s = s + "<table border=\"1\"><tr class=\"title\"><td>Ma sp</td><td>Ten sp</td><td>Gia</td><td>So luong</td><td>Ngay sx</td><td>Tinh trang</td><td>Mo ta</td><td>Hinh anh</td><td>Danh muc</td></tr>";
for (var i=0; i<3; i++){
s = s + "<tr><td>" + result.dssp[i].masp + "</td><td>" + result.dssp[i].tensp + "</td><td>" + result.dssp[i].gia + "</td><td>"+ result.dssp[i].soluong +"</td><td>"+ result.dssp[i].ngaysx + "</td><td>"+ result.dssp[i].tinhtrang +"</td><td>"+ result.dssp[i].mota +"</td><td>"+ result.dssp[i].hinhanh +"</td><td>"+ result.dssp[i].danhmuc.tendm +"</td></tr>" ;
}
s = s + "</table>";
$('#result').html(s);
var s1 = "<div class='prev'>Prev</div>";
s1 += "<div class='index clicked'>" + 1 + "</div>";
for (var i=2; i<=sotrang; i++){
s1 += "<div class='index'>" + i + "</div>";
}
s1 += "<div class='next'>Next</div>";
$('#result1').html(s1);
}
});
});
//select a page
$(".index").live('click', function(){
$("#result1 > div").removeClass('clicked');
$(this).addClass('clicked');
tranght = parseInt($(this).html());
var startpoint = (tranght - 1)*3;
var endpoint = startpoint + 3;
sobanghi = ds.length
if (endpoint > sobanghi){
endpoint = sobanghi;
}
var s = "";
s = s + "<table border=\"1\"><tr class=\"title\"><td>Ma sp</td><td>Ten sp</td><td>Gia</td><td>So luong</td><td>Ngay sx</td><td>Tinh trang</td><td>Mo ta</td><td>Hinh anh</td><td>Danh muc</td></tr>";
for (var i=startpoint; i<endpoint; i++){
s = s + "<tr><td>" + ds[i].masp + "</td><td>" + ds[i].tensp + "</td><td>" + ds[i].gia + "</td><td>"+ ds[i].soluong +"</td><td>"+ ds[i].ngaysx + "</td><td>"+ ds[i].tinhtrang +"</td><td>"+ ds[i].mota +"</td><td>"+ ds[i].hinhanh +"</td><td>"+ ds[i].danhmuc.tendm +"</td></tr>" ;
}
s = s + "</table>";
$('#result').html(s);
});
// click "next" button
$(".next").live('click', function(){
console.log("value of tranght: " + tranght);
console.log("Type of: " + typeof tranght);
if (tranght === sotrang){
tranght = sotrang;
console.log("Type of: " + typeof tranght);
} else {
tranght = parseInt(tranght,6) + 1;
console.log("value: " + tranght);
console.log("Type of: " + typeof tranght);
}
});
});
</script>
We are missing some code, is the html object with the class 'index' an input? if so, you need to change
tranght = parseInt($(this).html());
to
tranght = parseInt($(this).val());
to capture the value and not the content.