I'm trying to display some value that is incorporated in an API (This api is used by a program called PRTG to extract information from the program), this is the API
http://192.168.1.65/api/table.xml?content=channels&output=xml&columns=name%2Clastvalue_&id=1234&username=someguy&password=notmypassword
this API give's you an xml file that looks like this.
<?xml version="1.0" encoding="UTF-8"?>
<channels totalcount="0" listend="1">
<prtg-version>16.4.27.6720</prtg-version>
<item>
<name>Tiempo de inactividad</name>
</item>
<item>
<name>Voltaje Bateria</name>
<lastvalue>54,51 VDC</lastvalue>
<lastvalue_raw>0000000000054510.0000</lastvalue_raw>
</item>
</channels>
I want to take the value in the tag lastvalue and display it in a webpage, I have tried using javascript but nothing works at all
I suspect you need JavaScript because result should display on the page. If you calling API just change that ajax part and everything should work. To mimic some response from API I have done this over the file.
<html>
<head>
<title>Demo</title>
</head>
<body>
<p id="result"></p>
<script>
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "channels.xml", true);
xhttp.send();
function myFunction(xml) {
var x, i, txt, xmlDoc, node;
xmlDoc = xml.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("item");
for (i = 0; i < x.length; i++) {
node = x[i].getElementsByTagName('lastvalue');
if (node && node.length > 0){
txt += node[0].textContent + "<br>";
}
}
document.getElementById("result").innerHTML = txt;
}
</script>
</body>
</html>
Related
I don't need anything fancy on this. I'm loading a Q&A page. The Q&A I want on a seperate file so I can just update the file and it will update the page the next time it's loaded by someone.
I created a file "faq.xml" and am trying to load that in to my faq.php file.
<p id="xmlp" class="content" style="text-align: center">
<!-- XML should go here -->
</p>
<script>
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
myFunction(this);
xmlhttp.open("GET", "faq.xml", true);
xmlhttp.send();
}
function myFunction(xml) {
var x, i, xmlDoc, table;
xmlDoc = xml.responseXML;
table = "<tr><th>Question</th><th>Answer</th></tr>";
x = xmlDoc.getElementsByTagName("faqs")
for (i = 0; i < x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("question")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("answer")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("xmlp").innerHTML = table;
}
</script>
For whatever reason, it's not loading anything. The XML file currently has this...
<?xml version="1.0" encoding="UTF-8"?>
<faqs>
<question>When do you fly?</question>
<answer>We fly at sunrise weather permitting. Flights are more peaceful and the winds are great. We even fly low enough to have a conversation with those less fortunate on the ground. People tend to hang around at launch and landings to see what it’s all about.</answer>
</faqs>
Any suggestions? I'm new to XML (this is my first one).
Thank you in advanced.
I put an alert in to ensure the js was getting started and it did function.
<script>
loadXMLDoc();
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
alert();
myFunction(this);
xmlhttp.open("GET", "faq.xml", true);
xmlhttp.send();
}
Still not sure where the hold up is.
I did more testing and I think I found where at least something is wrong...
<p id="xmlp" class="content" style="text-align: center">
<!-- XML should go here -->
</p>
<script>
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
myFunction(this);
xmlhttp.open("GET", "faq.xml", true);
xmlhttp.send();
}
function myFunction(xml) {
var x, i, xmlDoc, table;
xmlDoc = xml.responseXML;
table = "<tr><th>Question</th><th>Answer</th></tr>";
alert("This one works");
x = xmlDoc.getElementsByTagName("faqs")
alert("This one does not work");
for (i = 0; i < x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("question")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("answer")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("xmlp").innerHTML = table;
}
</script>
This is a basic example of loading an xml file via AJAX from https://www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_xml:
<body onLoad="loadXMLDocument('someXMLfile.xml')">
<p>
<b>Status:</b> <span id="statusInfo"></span>
</p>
<p>
<b>Status text:</b><span id="statusTextInfo"></span>
</p>
<p>
<b>Response:</b> <span id="xmlContent"></span>
</p>
<script>
function loadXMLDocument(url) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById('statusText').innerHTML = this.status;
document.getElementById('statusTextInfo').innerHTML = this.statusText;
document.getElementById('xmlContent').innerHTML = this.responseText;
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
</script>
</body>
This will load an XML file into Javascript.
Though as I mentioned, if you're getting to grips with AJAX, PHP and XML all at once
the straightforward way might be to make an AJAX call to PHP and process the xml using a php function on the server.
The 4/200 status codes make AJAX debugging a little easier.
I am trying to input the value of the currency using the Value="AUD" as a starter. I am very new to JSON and AJAX. I cannot work out why there is an 404 error linked to JSON.parse and XMLHttpRequest, any advise of where I am going wrong would be much appreciated. Thanks in advance.
`enter code here`
<html lang="en">
<head>
</head>
<body>
<div id ="forex-info">
<p id="currencyList" class="currencyList" value ="AUD">Australia</p>
<p id="rateList" class="event"></p>
</div
<script type="text/javascript">
var tableContainer = document.getElementById("forex-info");
var ourRequest = new XMLHttpRequest();
var myData = "http://api.fixer.io/latest".rates;
ourRequest.open('GET', myData, true);
ourRequest.onload = function loading() {
var ourData = JSON.parse(ourRequest.responseText);
renderHTML(ourData);
function renderHTML(data) {
var output = "";
for (var key in data)
{
output += "<p>" + key + output + "</p>"
}
}
};
</script>
</body>
The main issue is how your calling the api "http://api.fixer.io/latest".rates
You call rest endpoints by there address params or with query params.
Please see example below calling your specified endpoint. That should get you started
var myData = 'https://api.fixer.io/latest'
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let res = JSON.parse(xhttp.responseText)
Object.keys(res.rates).forEach((e)=>{
console.log(`${e}: ${res.rates[e]}`)
//Add your stuff here
})
}
};
xhttp.open("GET", myData, true);
xhttp.send();
I am new to html and javascript. I have been trying to parse and access the data of an xml file through the javascript code. Presently it is showing null. I am posting my codes below. Please have a look and do help.
Html code:
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<body>
<p id="demo"></p>
<script>
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "http://10.21.64.222/LoadBreakSwitch/LBS_Commands.xml", true);
xhttp.send();
function myFunction(xml) {
var x, i, txt, xmlDoc;
xmlDoc = xml.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("Ping");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
The xml file:
<?xml version="1.0" encoding="utf-8"?>
<LBSCommands>
<Ping Commkey="A3070000AA00A4" Value="A309008001043101A4"/>
<Frequency Commkey="A3070300AD00A4" CommValue="A309038001013101A4"/>
<SwitchStatus Commkey="A3071D01C800A4" CommValue="A3091D8101014C01A4"/>
</LBSCommands>
I'm not sure what exactly you mean by "it is showing null", but maybe changing your code to using onload callback would help:
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onload = function() {
myFunction(this);
};
Also, this line: txt += x[i].childNodes[0].nodeValue + "<br>"; will throw an exception since childNodes[0] is undefined in your XML document.
EDIT:
To make x[i].childNodes[0] non-null, you must move the desired attribute to be the child element's text value. For instance, if you replace:
<Ping Commkey="A3070000AA00A4" Value="A309008001043101A4"/>
with:
<Ping>
<Commkey key="A3070000AA00A4">
A309008001043101A4
<Commkey/>
<Ping/>
(and do the same to the rest of the elements) then you'll have something like:
<p id="demo">
A309008001043101A4<br>
A309038001013101A4<br>
A3091D8101014C01A4<br>
</p>
as your HTML.
If that's not the exact HTML outcome you want please show an example HTML so I'll be able to help.
I am trying to update certain attributes of my xml file using javascript.
I am able to set new value by calling setAttribute() method, but unable to reflect it in the physical file.
I am very much new to html javascript. Please help.
Below I am posting my HTML as well as xml file code.
Html code:
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<body>
<p id="demo"></p>
<script>
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "http://10.21.64.222/LoadBreakSwitch/vbn.xml", true);
xhttp.send();
function myFunction(xml) {
var x, i, txt, xmlDoc;
xmlDoc = xml.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("Ping");
x[0].setAttribute("CommValue","1122222");
txt +=x[0].getAttribute("CommValue")+"<br>";
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
xml file code:
<?xml version="1.0" encoding="utf-8"?>
<LBSCommands>
<Ping Commkey="A3070000AA00A4" CommValue="A309008001043101A4"/>
<Frequency Commkey="A3070300AD00A4" CommValue="A309038001013101A4"/>
<SwitchStatus Commkey="A3071D01C800A4" CommValue="A3091D8101014C01A4"/>
<SwitchLockStatus Commkey="A3071E01C900A4" CommValue="A3091E8101004C01A4"/>
<SetFrequency01 Commkey="A308130001BF00A4" CommValue="A309038001013101A4"/>
</LBSCommands>
How can i show excel value in a html page
within a table, and to be interactive,
when even i change the value in excel, it will save XML file,
and i want the HTML to read the new value from that XML file,
and show it in the table.
lets say, i have in excel
table 2 by 2
name, vlad
age, 29
found an example for how to load xml data to html, but its not readig my xml file that created from excel.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "db_from_excel.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}
</script>
</body>
I think i found the issue, when i opened the same code in firefox, it displayed all the values from xml.
But, not working in chrome.... why is that ?