从外部 XML 实时更新网站上的文本

Question

I'm a back-end programmer tasked with creating a front-end element on a site.

I have to take only two data points from an external XML file and have then both placed within the site's existing html, and have it update every few minutes.

The xml tree is large and has several parent elements, I only need two child elements from the first parent element "Main-Library"

Here is what the xml looks like. I compressed it so only the first child of the first two parents are shown:

<Root>
    <Main-Library>
            <Book>
                <Title>Book Name</Title>
                <Author>John Smith</Author>
                <Genre>Fiction</Genre>
                <Loaned>2020-09-03 13:13:48</Loaned>
                <Price>-13.30</Price>
            </Book>
            .
            .
            .
    </Main-Library>
    <Second-Library>
            <Book>
                <Title>Book Name</Title>
                <Author>John Smith</Author>
                <Genre>Fiction</Genre>
                <Loaned>2020-09-03 13:13:48</Loaned>
                <Price>-13.30</Price>
            </Book>
            .
            .
            .
    </Second-Library>
</Root>

I need to take Loaned and Price from the first parent element Main-Library and place them within the following html:

<p class="feed">
<span class="feed-text-large">Status: </span>
<span class="price">$35.98</span>
<span class="timestamp">Loaned at 13:13 on September 03, 2020</span>
</p>

with price and the date coming from the XML, and refreshing as the xml changes.

Any help to get me started on this will be greatly appreciated. Thanks!

Answer 1

First of all - is it possible to use JSON? If yes, go for it and show how the data looks in JSON.

Steps to do:

1. Create a function that will retrieve data

function getData() {
  return fetch(theUrl).then(response => response.text())
}

2. Create a function that will parse the data

function parseData(str) {
  const data = (new window.DOMParser()).parseFromString(str, 'text/xml')
  // never did anything with XML so this might be wrong
  // that's why JSON would be A LOT EASIER
  // this should get the first Book
  const Book = data.querySelector('Root Main-Library Book')
  const price = Book.querySelector('Price').innerHTML
  const loaned = Book.querySelector('Loaned').innerHTML
  return { price, loaned }
}

3. Print the data

function printData(data) {
  const priceTarget = document.querySelector('.price')
  const loanedTarget = document.querySelector('.timestamp')
  priceTarget.innerHTML = data.price
  loanedTarget = data.loaned
}

4. Create a function that will be run periodically

function update() {
  getData().then(parseData).then(printData)
}

5. Run the function once and set an interval

const minutes = 5
update()
setInterval(update, minutes * 60 * 1000) // interval in ms, so 60*1000 gets us a minute

I'm not 100% sure if it will work - my main concern is parseData() because I've never done anything with XML in JavaScript.

EDIT: That code will read data from first Book element. If you want to list all Books, the code will have to be different. Let me know, I'll answer you in about 8 hours if no one will be quicker than me. Goodnight

Answer 2

With Saxon-JS you could do this by running an XSLT 3.0 stylesheet along the following lines:

<xsl:template name="display">
  <xsl:result-document href="#timestamp">
    <xsl:text>Loaned at {/Root/Main-Library/Book/Loaned
                         => translate(' ', 'T')
                         => xs:dateTime()
                         => format-date('[H00].[m00] on [MNn] [D1o], [Y0001]')
                        }</xsl:text>
  </xsl:result-document>
  <xsl:result-document href="#price">
    <xsl:text>${/Root/Main-Library/Book/Price}</xsl:text>
  </xsl:result-document> 
  <ixsl:schedule-action wait="60000">
    <xsl:call-template name="refresh"/>
  </ixsl:schedule-action>
</xsl-template>

<xsl:template name="refresh">
  <ixsl:schedule-action http-request="....">
    <xsl:call-template name="display"/>
  </ixsl:schedule-action>
</xsl-template>

This is just a sketch to illustrate the idea if you want to go down this route. The main benefit (I know it appeals to some more than others) is that there's no Javascript to get wrong.

Disclaimer: Saxon-JS is my company's product.