This is my xml code . I want to display the contents in a html page with Javascript.
`<businesses>
<business bfsId=”” id=”41481″>
<advertHeader>Welding Supplies, Equipment and Service Business</advertHeader>
<Price>265000</Price>
<catalogueDescription>Extremely profitable (Sales £500k, GP £182k) business</catalogueDescription>
<keyfeature1>
Well established 25 year business with excellent trading record
</keyfeature1>
<keyfeature2>
Consistently high levels of turnover and profitability over last 5 years
</keyfeature2>
</business>
<business bfsId=”” id=”42701″>
<broker bfsRef=”1771″ ref=”003″>Birmingham South, Wolverhampton & West Midlands</broker>
<tenure>freehold</tenure>
<advertHeader>Prestigious Serviced Office Business</advertHeader>
<Price>1200000</Price>
<reasonForSale>This is a genuine retirement sale.</reasonForSale>
<turnoverperiod>Annual</turnoverperiod>
<established>28</established>
<catalogueDescription>This well-located and long-established serviced office</catalogueDescription>
<underOffer>No</underOffer>
<image1>https://www.business-partnership.com/uploads/business/businessimg15977.jpg</image1>
<keyfeature1>other connections</keyfeature1>
<keyfeature2> Investment Opportunity</keyfeature2>
<keyfeature3>Over 6,000 sq.ft.</keyfeature3>
<keyfeature4>Well-maintained </keyfeature4>
<keyfeature5>In-house services & IT provided</keyfeature5>
</business>
</businesses>
Requirements
– Print a row for every element– Pick specific child elements from business element . and print column in that row ( Not all ) . For an example only print the value for ; and . Ignore other . So that every row for Business element has the equal number of columns– Only print the row if the value of node is > 10000 . if the value is then 10000 then do not print that row– Pagination after every 10 row
How to do that
This is my javascript code
“`
window.addEventListener(“load”, function() {
getRows();
});
function getRows() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open(“get”, “2l.xml”, true);
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
showResult(this);
}
};
xmlhttp.send(null);
}
function showResult(xmlhttp) {
var xmlDoc = xmlhttp.responseXML.documentElement;
removeWhitespace(xmlDoc);
var outputResult = document.getElementById(“BodyRows”);
var rowData = xmlDoc.getElementsByTagName(“business”);
addTableRowsFromXmlDoc(rowData,outputResult);
}
function addTableRowsFromXmlDoc(xmlNodes,tableNode) {
var theTable = tableNode.parentNode;
var newRow, newCell, i;
console.log (“Number of nodes: ” + xmlNodes.length);
for (i=0; i<xmlNodes.length; i++) {
newRow = tableNode.insertRow(i);
newRow.className = (i%2) ? “OddRow” : “EvenRow”;
for (j=0; j<xmlNodes[i].childNodes.length; j++) {
newCell = newRow.insertCell(newRow.cells.length);
//x[i].getElementsByTagName(“ARTIST”)[0].childNodes[0].nodeValue);
// var ah = getElementsByTagName(“ARTIST”)[0].childNodes[0].nodeValue.getElementsByTagName(“advertHeader”)[0]
//var advertHeader = xmlNodes[i].childNodes[j].getElementsByTagName();
if (xmlNodes[i].childNodes[j].firstChild) {
newCell.innerHTML = xmlNodes[i].childNodes[j].firstChild.nodeValue;
} else {
newCell.innerHTML = “-“;
}
console.log(“cell: ” + newCell);
}
}
theTable.appendChild(tableNode);
}
function removeWhitespace(xml) {
var loopIndex;
for (loopIndex = 0; loopIndex < xml.childNodes.length; loopIndex++)
{
var currentNode = xml.childNodes[loopIndex];
if (currentNode.nodeType == 1)
{
removeWhitespace(currentNode);
}
if (!(/S/.test(currentNode.nodeValue)) && (currentNode.nodeType == 3))
{
xml.removeChild(xml.childNodes[loopIndex–]);
}
}
}
But But it includes all the nodes . and as the number of child elements under are not same the result comes like this
[https://discourse-user-assets.s3.dualstack.us-east-1.amazonaws.com/original/3X/7/4/74a0b4a83f6b331b1f864274bb0a004a8d271241.jpeg