How to display XML content in HTML file with Javascript

Question

This is my xml code . I want to display the contents in a html page with Javascript.


    
        Welding Supplies, Equipment and Service Business
        265000
        Extremely profitable (Sales £500k, GP £182k) business
        
        Well established 25 year business with excellent trading record
        
        
        Consistently high levels of turnover and profitability over last 5 years
        
    
    
        Birmingham South, Wolverhampton & West Midlands
        freehold
        Prestigious Serviced Office Business
        1200000
        This is a genuine retirement sale.
        Annual
        28
        This well-located and long-established serviced office
        No
        https://www.business-partnership.com/uploads/business/businessimg15977.jpg
        other connections
         Investment Opportunity
        Over 6,000 sq.ft.
        Well-maintained 
        In-house services & IT provided

This is the original xml file https://alpha.business-sale.com/bfs.xml I have just took a short portion to describe the situation.

Requirements

Print a row for every element
For every pick some specific child element and print column only for those element.( Not all ). For an example in this case I only want to print the value for ; and and want to ignore other elements.
Only print the row those where value of is > 10000 . if it is then less than 10000 do not print that row
pagination after every 10 row

This is the html table

And this is the javascript code that i have tried .

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



But this code prints columns for all the nodes under  element. And the number of child elements under  are different  . So the result comes like this


I dont want that. I want to only display the value of specific nodes under  element (in this case only include  ;  and  ) so that the number of columns are equal in every row. How to do that?

KooiInc · Accepted Answer

Try finding the -element with the most values and build your table around that. Here's an example snippet that does that for the data you presented.

{
  const xml = new DOMParser()
    .parseFromString(getData(), `text/xml`);
  
  // the -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 `
    
      
        Welding Supplies, Equipment and Service Business
        265000
        Extremely profitable (Sales £500k, GP £182k) business
        
          Well established 25 year business with excellent trading record
        
        
          Consistently high levels of turnover and profitability over last 5 years
        
      
      
        Birmingham South, Wolverhampton & West Midlands
        freehold
        Prestigious Serviced Office Business
        1200000
        This is a genuine retirement sale.
        Annual
        28
        This well-located and long-established serviced office
        No
        https://www.business-partnership.com/uploads/business/businessimg15977.jpg
        other connections
         Investment Opportunity
        Over 6,000 sq.ft.
        Well-maintained 
        In-house services & IT provided
      
    `;
  }
}

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;
}

How to display XML content in HTML file with Javascript

Answers (1)

Related Questions