My problem is I don't have an idea about parsing XML and getting display data in react-js jsx... Here is my RSS https://anchor.fm/s/75abc654/podcast/rss.I have already tried Axios,node-fetch,xml2js,react-RSS-feeder..etc. As far I researched no packages have a clear idea about it. Help me to display the data of each data in react... Thanks
sorry, I'm not a react developer, here's how you do it in vanilla JS.
<html>
<body>
<script type='text/javascript'>
let RSS_URL = "https://anchor.fm/s/75abc654/podcast/rss"
fetch(RSS_URL)
.then(response => response.text())
.then(str => new window.DOMParser().parseFromString(str, "text/xml"))
.then(data => {
console.log(data);
const items = data.querySelectorAll("item");
let html = `<table>`;
items.forEach(el => {
let title = null;
let link = null;
let description = null;
let image = null;
// since we can't use querySelector to locate itunes:image namespaces, iterate through all child nodes, and pick off what we want.
let itemNodes = el.querySelectorAll( "*" );
itemNodes.forEach( item => {
switch( item.nodeName ) {
case "title":
title = item.textContent;
break;
case "description":
description = item.textContent;
break;
case "link":
link = item.innerHTML;
break;
case "itunes:image":
image = item.getAttribute( "href" );
break;
}
});
// Build the HTML
html += `
<tr>
<td>
<a href="${link}" target="_blank" rel="noopener">${title}</a>
</td>
<td>
<img src="${image}" width='100px'/>
</td>
<td>
${description}
</td>
</tr>
`;
});
html += "</table>";
document.body.insertAdjacentHTML("beforeend", html);
});
</script>
</body>
</html>