d2jsp
Log InRegister
d2jsp Forums > Off-Topic > Computers & IT > Programming & Development > Anyone Here Good With Javascript And Xml? > Asking For A Friend
Add Reply New Topic New Poll
Member
Posts: 7,855
Joined: Apr 25 2016
Gold: 222.46
Jun 23 2020 01:49pm
I have no friends, would be useful to have a conversation about a project I'm working on though, I'm using javascript to get information from an xml file for an estate agency website and I can iterate through each property node I'm getting the table information from but then inside each property node there are repeating nodes sorted by id, I could do this if it was once to get the information from each id'd node but im really struggling to do it when I'm already going over each property node for the table rows. I can post the script below and please let me know if you can help.


first is the xml data, each 'property' node is repeated many times in the actual xml file but Ive reduced it to one property node for readability, followed by the javascript which would feed into the html table with ID myTable
code below is working perfectly for nodes without an ID value such as name and street but I cant figure out how to using javascript or jquery select information from each of the bullet nodes e.g. the first four bullet nodes of each property and display them as cells in the table (bullets with id="1", id="2", id="3", id="4")

<?xml version="1.0" encoding="utf-8" ?>
<propertydatas>
<property id="29601398" propertyid="15268365" system="B" firmid="81445" branchid="1" database="2" featured="0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xsi:noNamespaceSchemaLocation="thishasbeenreplaced">
<reference><agents /></reference>
<address><name>2</name><street>Percy</street></address>
<bullets><bullet id="1">4 bedrooms</bullet><bullet id="2">En-suite options</bullet><bullet id="3">Perfect for a group of 4 friends</bullet><bullet id="4">Popular house</bullet><bullet id="5">Large living/kitchen space</bullet><bullet id="6">Neutral decor</bullet><bullet id="7">All bills inclusive</bullet><bullet id="8">Flexible contracts (T&amp;C apply)</bullet><bullet id="9">Free wifi + TV license</bullet><bullet id="10">TV included</bullet></bullets>
</property>
</propertydatas>



<script>
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xmlhttp.open("GET", "propertiescombined.xml", true);
xmlhttp.send();
}

function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<thead ><tr><th >main property image</th><th>Title</th></tr></thead><tbody>";
var x = xmlDoc.getElementsByTagName("property");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x.getElementsByTagName("street")[0].childNodes[0].nodeValue +
"</td><td>" +
x.getElementsByTagName("name")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("myTable").innerHTML = table;
}
window.onload = loadXMLDoc ();

</script>
Member
Posts: 12,703
Joined: May 17 2013
Gold: 12,935.00
Jun 23 2020 02:56pm
You are already looping over all of the properties (which have IDs themselves..), which all contain reference, address and bullets.

There are a number of ways to do this, but XPath is probably the simplest to allow future extension:

Just do exactly the same for the bullets in a new loop:

Code
<script>
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xmlhttp.open("GET", "propertiescombined.xml", true);
xmlhttp.send();
}

function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<thead ><tr><th >main property image</th><th>Title</th></tr></thead><tbody>";
var x = xmlDoc.getElementsByTagName("property");
for (i = 0; i <x.length; i++) {

// here we are looping over properties
table += "<tr><td>" + x.getElementsByTagName("street")[0].childNodes[0].nodeValue + </td><td>" + x.getElementsByTagName("name")[0].childNodes[0].nodeValue + </td></tr>";

// now find the bullets for the current property with XPath:

var path = "propertydatas/property[@id='" + x[i].getAttribute('id') +"']/bullets"
var bulletNodes = xmlDoc.evaluate(path, xmlDoc, null, XPathResult.ANY_TYPE, null);

var result = nodes.iterateNext();
while (result) {
// iterate over bullets for the property and do something with them..
stuff += result.childNodes[0].nodeValue + "<br>";
result = nodes.iterateNext();
}

}
document.getElementById("myTable").innerHTML = table;
}
window.onload = loadXMLDoc ();

</script>


hope that helps

This post was edited by Klexmoo on Jun 23 2020 02:58pm
Member
Posts: 7,855
Joined: Apr 25 2016
Gold: 222.46
Jun 23 2020 03:35pm
Quote (Klexmoo @ Jun 23 2020 09:56pm)
You are already looping over all of the properties (which have IDs themselves..), which all contain reference, address and bullets.

There are a number of ways to do this, but XPath is probably the simplest to allow future extension:

Just do exactly the same for the bullets in a new loop:

Code
<script>
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xmlhttp.open("GET", "propertiescombined.xml", true);
xmlhttp.send();
}

function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<thead ><tr><th >main property image</th><th>Title</th></tr></thead><tbody>";
var x = xmlDoc.getElementsByTagName("property");
for (i = 0; i <x.length; i++) {

// here we are looping over properties
table += "<tr><td>" + x.getElementsByTagName("street")[0].childNodes[0].nodeValue + </td><td>" + x.getElementsByTagName("name")[0].childNodes[0].nodeValue + </td></tr>";

// now find the bullets for the current property with XPath:

var path = "propertydatas/property[@id='" + x[i].getAttribute('id') +"']/bullets"
var bulletNodes = xmlDoc.evaluate(path, xmlDoc, null, XPathResult.ANY_TYPE, null);

var result = nodes.iterateNext();
while (result) {
// iterate over bullets for the property and do something with them..
stuff += result.childNodes[0].nodeValue + "<br>";
result = nodes.iterateNext();
}

}
document.getElementById("myTable").innerHTML = table;
}
window.onload = loadXMLDoc ();

</script>


hope that helps


wow I wasn't expecting a useful response from here, I will try this and donate you something soon, thank you for your time
Member
Posts: 56,842
Joined: Dec 8 2009
Gold: 65.10
Warn: 10%
Jun 25 2020 08:44am
Quote (FaceDeath @ Jun 23 2020 02:49pm)
I have no friends


o-oooohhh, okay. i see. kewl.
Member
Posts: 7,855
Joined: Apr 25 2016
Gold: 222.46
Jul 1 2020 03:50pm
Quote (xBx @ Jun 25 2020 03:44pm)
o-oooohhh, okay. i see. kewl.


lol
Go Back To Programming & Development Topic List
Add Reply New Topic New Poll