[英]How to display XML content in HTML file with Javascript
This is my xml code .这是我的 xml 代码。 I want to display the contents in a html page with Javascript.
我想用 Javascript 在 html 页面中显示内容。
<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>
This is the original xml file https://alpha.business-sale.com/bfs.xml I have just took a short portion to describe the situation.这是原始 xml 文件https://alpha.business-sale.com/bfs.xml我刚刚用了一小部分来描述情况。
Requirements要求
<business>
element<business>
元素打印一行<business>
pick some specific child element and print column only for those element.( Not all ).<business>
选择一些特定的子元素并仅为这些元素打印列。(不是全部)。 For an example in this case I only want to print the value for <advertHeader>
;<advertHeader>
的值; <Price>
and <description>
and want to ignore other elements. <Price>
和<description>
并希望忽略其他元素。<business>
where value of <Price>
is > 10000 .<business>
其中<Price>
值为 > 10000 的行。 if it is then less than 10000 do not print that rowThis is the html table这是html表
<table id="MainTable"><tbody id="BodyRows"></tbody></table>
And this is the javascript code that i have tried .这是我尝试过的 javascript 代码。
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);
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 this code prints columns for all the nodes under <business>
element.但是此代码打印
<business>
元素下所有节点的列。 And the number of child elements under <business>
are different .并且
<business>
下的子元素数量不同。 So the result comes like this所以结果是这样的
I dont want that.我不想要那个。 I want to only display the value of specific nodes under
<business>
element (in this case only include <advertHeader>
; <Price>
and <description>
) so that the number of columns are equal in every row.我只想显示
<business>
元素下特定节点的值(在这种情况下只包括<advertHeader>
; <Price>
和<description>
),以便每行的列数相等。 How to do that?怎么做?
Try finding the <business>
-element with the most values and build your table around that.尝试找到具有最多值的
<business>
元素并围绕它构建表格。 Here's an example snippet that does that for the data you presented.这是一个示例代码段,它为您提供的数据执行此操作。
{ const xml = new DOMParser() .parseFromString(getData(), `text/xml`); // the <business>-elements from xml const businessElems = [...xml.querySelectorAll(`business`)]; // the nodeNames will be the header. While we're at it, // we can count the number of headers (len) for later use const headersFromXml = businessElems.map( v => [...v.querySelectorAll(`*`)] .map( v => v.nodeName) ) .map( v => ( {len: v.length, headers: v} ) ); // now determine the longest header using a reducer const businessElemWithMostNodes = headersFromXml .reduce( (acc, v) => v.len > acc.len ? v : acc, {len: 0}); // utility to create a tablecell/header and append it to a row const createCell = (rowToAppendTo, cellType, value) => { const cell = document.createElement(cellType); cell.innerHTML = value; rowToAppendTo.appendChild(cell); } // utility to create a datarow and append it to a table const createDataRow = (tableToAppendTo, businessElem) => { const row = document.createElement(`tr`); const rowValues = []; // create values using the businessElemWithMostNodes order businessElemWithMostNodes.headers .forEach( head => { const valueElem = businessElem.querySelector(`${head}`); rowValues.push(valueElem ? valueElem.innerHTML : `-`); }); rowValues.forEach( v => createCell(row, `td`, v) ); tableToAppendTo.appendChild(row); }; // now we know enough to create the table const table = document.createElement(`table`); // the headerRow first const headRow = document.createElement(`tr`); businessElemWithMostNodes.headers.forEach( hv => createCell(headRow, `th`, hv) ); table.appendChild(headRow); // next create and append the rows businessElems.forEach(be => createDataRow(table, be)); // finally, append the table to document.body document.body.appendChild(table); // your xml string function getData() { return ` <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>`; } }
body { margin: 1rem; font: 12px/15px normal consolas, verdana, arial; } .hidden { display: none; } th { background-color: black; color: white; border: 1px solid transparent; padding: 2px; text-align: left; } td { border: 1px solid #c0c0c0; padding: 2px; vertical-align: top; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.