A tiny zero-dependency function to parse an XML sitemap and return an array of URL objects.
Import the parseXmlSitemap module directly, or use a module bundler of your choice.
Then, in an async function, await parseXmlSitemap('./path-to/sitemap.xml') supplying the path to your sitemap file:
import parseXmlSitemap from 'https://unpkg.com/@nfalcone/[email protected]/index.min.js';
(async () => {
const ul = document.getElementById('sitemapList');
const urls = await parseXmlSitemap('./path-to/sitemap.xml'); // despite the warning, await is needed here.
})();In the example above, urls is an array of URL objects. Each URL object contains properties including href.
Assuming an <ul id="sitemapList"></ul>, we can add list items for our site's URLs:
import parseXmlSitemap from 'https://unpkg.com/@nfalcone/[email protected]/index.min.js';
(async () => {
const ul = document.getElementById('sitemapList');
const urls = await parseXmlSitemap('./sitemap.xml'); // despite the warning, await is needed here.
urls.forEach((url) => {
const li = document.createElement('li');
li.innerText = url.href;
ul.appendChild(li);
});
})();If the sitemap.xml file is hosted on a different origin, proper CORS headers should be in place.
$ git clone [email protected]:nickFalcone/parse-sitemap.git
$ cd parse-sitemap/
$ npm install
$ http-server # runs the app.js demo