I'm parsing a RSS feed which looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:npr="http://www.npr.org/rss/" xmlns:nprml="http://api.npr.org/nprml" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" xmlns:content="http://purl.org/rss/1.0/modules/content/" version="2.0">
<channel>
<title>News</title>
<link>http://www.npr.org/templates/story/story.php?storyId=1001&ft=1&f=1001</link>
<description>NPR news, audio, and podcasts. Coverage of breaking stories, national and world news, politics, business, science, technology, and extended coverage of major national and world events.</description>
<language>en</language>
<copyright>Copyright 2012 NPR - For Personal Use Only</copyright>
<generator>NPR API RSS Generator 0.94</generator>
<lastBuildDate>Tue, 28 Aug 2012 12:19:00 -0400</lastBuildDate>
<image>
<url>http://media.npr.org/images/npr_news_123x20.gif</url>
<title>News</title>
<link>http://www.npr.org/templates/story/story.php?storyId=1001&ft=1&f=1001</link>
</image>
<item>
<title>Reports: Obama Administration Will Unveil New Fuel-Efficiency Standards</title>
<description>The new rules will require U.S. cars to average 54.5 miles per gallon by 2025.</description>
<pubDate>Tue, 28 Aug 2012 12:19:00 -0400</pubDate>
<link>http://www.npr.org/blogs/thetwo-way/2012/08/28/160172356/reports-obama-administration-will-unveil-new-fuel-efficiency-standards?ft=1&f=1001</link>
<guid>http://www.npr.org/blogs/thetwo-way/2012/08/28/160172356/reports-obama-administration-will-unveil-new-fuel-efficiency-standards?ft=1&f=1001</guid>
<content:encoded><![CDATA[<p>The new rules will require U.S. cars to average 54.5 miles per gallon by 2025.</p><p>» E-Mail This » Add to Del.icio.us</p>]]></content:encoded>
</item>
</channel>
</rss>
I'm looping the items like this:
var channel = xml.documentElement.getElementsByTagName("channel");
var items = xml.documentElement.getElementsByTagName("item");
for (var i = 0; i < items.length; i++) {
var ul = document.getElementById("feed");
var li = document.createElement('li');
var item = items.item(i);
var title = item.getElementsByTagName("title").item(0).textContent;
var link = item.getElementsByTagName("link").item(0).textContent;
var description = item.getElementsByTagName("link").item(0).textContent;
//var content = item.getElementsByTagName('content\\:encoded').item(0).textContent;
var li = document.createElement('li');
li.innerHTML = '' + title + '';
document.getElementById('feed').appendChild(li);
}
But how can I get the contents of the node <content:encoded>?
I tried with: item.getElementsByTagName('content\\:encoded').item(0).textContent; but it's not working.
Using jQuery this one inside .each() works: $(this).find('content\\:encoded').text(); but I'd rather use native javaScript.
So, it seems that I needed to use the tag getElementsByTagNameNS and that the node was "encoded" - like this:
var content = item.getElementsByTagNameNS("*", "encoded").item(0).textContent;
my solution:
var result2 = JSON.parse(result1);
setData(result2.rss.channel.item[0].["content:encoded"]);
jus use ["content:encoded"]
Related
I am doing an exercise, but I am stuck. I need to get the first line of each paragraph after each "H4", but at the moment it is getting all the "P" from the first "H4".
I got an HTML and a JavaScript, the idea is to get a news summary after Bizarre News Summary, I have created the 'UL', 'LI' and appended them
function newsSnippets() {
let classNewsarticle = document.getElementsByClassName("newsarticle"); // Get classes by name 'newsarticle'
let headlinesId = document.getElementById("headlines"); // Get Id 'headlines'
let newsSummary = document.createElement("div"); // Create DIV
headlinesId.appendChild(newsSummary); // Append headlines to DIV
let newsSummaryList = document.createElement("ul"); // Create UL
newsSummary.appendChild(newsSummaryList); // Append UL to DIV
console.log(classNewsarticle);
for (let i = 0; i < classNewsarticle.length; i++) {
let newsSummaryListItem = document.createElement("LI"); // Create an LI for each H4
newsSummaryList.appendChild(newsSummaryListItem); // Append the LI to the UL
let getH4 = document.getElementsByTagName("H4")[i].childNodes[0].nodeValue;
let getH4Node = document.createTextNode(getH4);
let ellipsis = document.createTextNode(" . . . ");
let p = document.getElementsByTagName("P")[i].innerHTML;
let pNode = document.createTextNode(p);
newsSummaryListItem.appendChild(getH4Node) + // Append the texts node to the LI element
newsSummaryListItem.appendChild(ellipsis) +
newsSummaryListItem.appendChild(pNode);
let newsList = document.createElement("LI"); // Create the inline text anchor
document.body.insertBefore(newsList, newsSnippets[i]); // Insert the text anchor before headings
}
}
window.onload = newsSnippets;
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
<script src="scripts/fma_t1.3.js"></script>
</head>
<body>
<div id="wrappermain">
<h1>Bizarre News Mash Up</h1>
<section id="headlines">
<h2>Bizarre News Summary</h2>
</section>
<section id="news">
<h3>News Stories in Full</h3>
<article class="newsarticle">
<h4>What a load of Bull!</h4>
<p>Chinese Kung Fu Masters are seeking the ultimate opponents</p>
<p>Several times a week, kung fu teacher Ren Ruzhi enters a ring to spar with a bovine opponent around five times his weight and capable of killing him.</p>
<p>Ren’s mixing of martial arts and bullfighting worries his mother, but the 24-year-old has never been hurt. Besides, he says, grappling with a snorting bull is exciting.</p>
<p>It symbolizes the bravery of a man,” Ren told Reuters in Jiaxing in China’s eastern province of Zhejiang.</P>
</article>
<article class="newsarticle">
<h4>Has Anybody got a Tissue?</h4>
<p>A Hawaiian monk seal got an eel caught in its nose ― and it wasn’t the first time for these endangered creatures.</p>
<p>The Hawaiian Monk Seal Research Program posted a startling pic of the poor pup on Monday, and the National Oceanic and Atmospheric Administration Fisheries provided more details in a post on Wednesday.</p>
</article>
<article class="newsarticle">
<h4>Dog Pulls Off Spectacular Save During Argentina Soccer Match</h4>
<p>A pooch invaded the pitch during a Federal A league match between Juventud Unida and Defensores de Belgrano over the weekend.</p>
<p>Juventud Unida were already comfortably ahead against Defensores de Belgrano in their league clash when the dog made his unexpected cameo.</p>
</article>
<article class="newsarticle">
<h4>Nobody Beats The Laws of Nature</h4>
<p>A 69-year-old Dutch man has failed in his attempt to legally declare himself 20 years younger.</p>
<p>Last month, motivational speaker Emile Ratelband filed a lawsuit against the Dutch government requesting that his date of birth be switched from March 11, 1949, to March 11, 1969.</p>
</article>
</section>
</div>
<!-- Stories from Huffington Post. Used for Teaching purposes -->
</body>
</html>
This seems a little too complicated. If you are allowed to, try something like this:
function newsSnippets() {
const results = document.evaluate('//article[#class="newsarticle"]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
let temp = "<div><ul>"
for (let i = 0; i < results.snapshotLength; i++) {
let node = results.snapshotItem(i);
let new_item = "<li>"+node.querySelector('h4').innerText+ '...' +node.querySelector('p').innerText+"</li>";
temp += new_item;
}
temp += "</ul></div>"
let target = document.querySelector('section#headlines');
target.insertAdjacentHTML('beforeend', temp);
}
I was able to came up with an answer myself and it works just fine.
function newsSnippets() {
let classNewsarticle = document.getElementsByClassName("newsarticle"); // Get classes by name 'newsarticle'
let headlinesId = document.getElementById("headlines"); // Get Id 'headlines'
let newsSummary = document.createElement("div"); // Create DIV
headlinesId.appendChild(newsSummary); // Append headlines to DIV
let newsSummaryList = document.createElement("ul"); // Create UL
newsSummary.appendChild(newsSummaryList); // Append UL to DIV
for (let i = 0; i < classNewsarticle.length; i++) {
let newsSummaryListItem = document.createElement("LI"); // Create an LI for each H4
newsSummaryList.appendChild(newsSummaryListItem); // Append the LI to the UL
let getH4 = document.getElementsByTagName("H4")[i]; // Get H4s
let getH4Text = getH4.childNodes[0].nodeValue; // Get H4s Nodes
let getH4Node = document.createTextNode(getH4Text); // Get H4s HTML Text
let ellipsis = document.createTextNode(" . . . "); // Create Text Node Ellipsis
let p = getH4.nextElementSibling.innerHTML; // Get P as the Next Element Sibling from each H4
let pText = document.createTextNode(p); // Create Text Node for each first P after H4
newsSummaryListItem.appendChild(getH4Node) + // Append the textNodes to the LI element
newsSummaryListItem.appendChild(ellipsis) +
newsSummaryListItem.appendChild(pText);
}
}
window.onload = newsSnippets;
I'm trying to automate my website by setting predetermined monthly featured videos.
I have JavaScript files already saved w/ the annual data for that particular year - e.g. choose_2017_video.js as well as 2018 & 2019 files. Each image URL text and description text I set in arrays but I can't seem to get them to display. Each array element corresponds to a month [0-11].
The getMonth() method will be the way of retrieving the data.
Somehow, I need to import the song info. into the HTML roughly like this:
<h2 align="center">Video of the month: javascript:song_info[mnth];</h2>
I also need to be able to import the corresponding image path which is saved in a parallel array (of filenames).
var song_info[12], img_URL[12], mnth = today().getMonth();
song_info[7] = "Newsboys - God's Not Dead"; // example data
img_URL[7] = "Newsboys-Gods_Not_Dead_video.JPG";
This site won't let me correctly describe how I'll display the img code using the img_URL element.
Can someone give me examples of how I can import the song information into the h2 code example and img src code?
This might be done a lot easier in an ASP script since I'm more familiar w/ BASIC. JS wasn't even conceived until after I had entered the workforce after a couple yrs. in college.
My intent is to declare new arrays and a pointer variable. The pointer is supposed to determine the month from the current date. One array holds the description of the song while the other holds the filename of the screenshot to be used to launch the YouTube URL in a different browser tab. If I wanted to embed the video, I would just use HTML5 code. It is called by a script src="JSfilename" from an HTML file.
Here is one of the JS files:
var song_info[12], img_URL[12], mnth = today().getMonth();
song_info[0] = "Sidewalk Prophets - Help Me Find It";
song_info[1] = "TobyMac with Kirk Franklin & Mandisa - Lose Your Soul";
song_info[2] = "MercyMe - Dear Younger Me";
song_info[3] = "Kari Jobe - I Am Not Alone";
song_info[4] = "Danny Gokey - Tell Your Heart to Beat Again";
song_info[5] = "Hawk Nelson - Drops In the Ocean";
song_info[6] = "Plumb - Exhale";
song_info[7] = "Newsboys - God's Not Dead";
song_info[8] = "Francesca Battistelli - Holy Spirit";
song_info[9] = "Brandon Heath - Give Me Your Eyes";
song_info[10] = "Matthew West - Strong Enough";
song_info[11] = "Jordan Feliz - The River";
img_URL[0] = "Sidewalk_Prophets-Help_Me_Find_It_video.png";
img_URL[1] = "TobyMac-LoseMySoul_video.png";
img_URL[2] = "MercyMe-DearYoungerMe_video.png";
img_URL[3] = "KariJobe-IAmNotAlone_video.png";
img_URL[4] = "DannyGokey-TellYourHeartToBeatAgain_video3.PNG";
img_URL[5] = "HawkNelson-DropsInTheOcean_video.PNG";
img_URL[6] = "Plumb-Exhale_video.PNG";
img_URL[7] = "Newsboys-Gods_Not_Dead_video.JPG";
img_URL[8] = "FrancescaBattistelli-HolySpirit_video.JPG";
img_URL[9] = "BrandonHeath-GiveMeYourEyes_video.JPG";
img_URL[10] = "Matthew_West-StrongEnough_video.JPG";
img_URL[11] = "JordanFeliz-TheRiver_video.PNG";
So to be clear, you want something like
<h2 align="center">Video of the month: {your_random_video_name_from_your_JSFile}</h2>
So why not just doing this :
<h2 align="center" id="video_name">Video of the month:</h2>
<img src="#" alt="" id="video_preview"/>
<script>
var today = new Date();
var song_info = new Array, img_URL = new Array, mnth = today.getMonth();
song_info[9] = "CHVRCHES - Leave A Trace"; // example data
img_URL[9] = "http://diymag.com/media/img/Artists/C/Chvrches/October-cover/_1500x1000_crop_center-center_75/chvrches-mike-massaro-diy-2015-05.jpg";
song_info[10] = "Newsboys - God's Not Dead"; // example data
img_URL[10] = "Newsboys-Gods_Not_Dead_video.JPG";
document.getElementById("video_name").insertAdjacentHTML('beforeend',song_info[mnth]);
var image = document.getElementById("video_preview");
image.src = img_URL[mnth];
</script>
Example JSFiddle
I am trying to parse an RSS feed into an array but the feed is adding CDATA tags and combining certain elements.
My code below parses through the rss feed (url) and adds certain elements to an array. However when I look at the feed itself, it is combining multiple key elements in CDATA tags.
How do I parse through the CDATA tags to get usable xml fields?
Code
buildXMLDoc = function (url) {
var list =[];
$(listXML).find('item').each(function (){
var el = $(this);
console.log(el.find("title").text());
console.log(el.find("pubDate").text());
console.log(el.find("description").text());
list.push({title: el.find("title").text(), description: el.find("description").text(), modified: el.find("pubDate").text()});
});
return list;
};
XML
<?xml version="1.0" encoding="UTF-8"?>
<!--RSS generated by Microsoft SharePoint Foundation RSS Generator on 8/29/2017 10:23:18 AM -->
<?xml-stylesheet type="text/xsl" href="/_layouts/RssXslt.aspx?List=43aaf08e-0153-4f1d-9b46-e66bba563fde" version="1.0"?>
<rss version="2.0">
<channel>
<title>Webdocs: Test</title>
<description>RSS feed for the Test list.</description>
<lastBuildDate>Tue, 29 Aug 2017 14:23:18 GMT</lastBuildDate>
<generator>Microsoft SharePoint Foundation RSS Generator</generator>
<ttl>60</ttl>
<language>en-US</language>
<item>
<title>Alternative Methods for Determining LCRs</title>
<description><![CDATA[<div><b>Short Title:</b> Determining LCRs</div>
<div><b>Description:</b> <div class="ExternalClass6280076BC79848078688B86006BA554F"><p><span style="font-size:11.5pt;font-family:"calibri", "sans-serif"">This project is a carryover from the 2017 effort to identify an alternative method for calculating the Locational Minimum Installed Capacity Requirements (LCRs). </span></p></div></div>
<div><b>Governance Process Status:</b> Progress</div>
<div><b>Topic State:</b> Open/Current</div>
<div><b>Updated Placeholder:</b> updated</div>
]]></description>
<pubDate>Wed, 12 Jul 2017 13:41:06 GMT</pubDate>
</item>
The highlighted items are suppose to be separate elements.
In order to get the CDATA part details I may suggest to use jquery.contents() and so getting the relative sub sections by positon. This may give you wrong results if the positions change but it's a possibility.
var listXML = '<?xml version="1.0" encoding="UTF-8"?>\
<!--RSS generated by Microsoft SharePoint Foundation RSS Generator on 8/29/2017 10:23:18 AM -->\
<?xml-stylesheet type="text/xsl" href="/_layouts/RssXslt.aspx?List=43aaf08e-0153-4f1d-9b46-e66bba563fde" version="1.0"?>\
<rss version="2.0">\
<channel>\
<title>Webdocs: Test</title>\
<description>RSS feed for the Test list.</description>\
<lastBuildDate>Tue, 29 Aug 2017 14:23:18 GMT</lastBuildDate>\
<generator>Microsoft SharePoint Foundation RSS Generator</generator>\
<ttl>60</ttl>\
<language>en-US</language>\
<item>\
<title>Alternative Methods for Determining LCRs</title>\
<description><![CDATA[<div><b>Short Title:</b> Determining LCRs</div>\
<div><b>Description:</b> <div class="ExternalClass6280076BC79848078688B86006BA554F"><p><span style="font-size:11.5pt;font-family:"calibri", "sans-serif"">This project is a carryover from the 2017 effort to identify an alternative method for calculating the Locational Minimum Installed Capacity Requirements (LCRs). </span></p></div></div>\
<div><b>Governance Process Status:</b> Progress</div>\
<div><b>Topic State:</b> Open/Current</div>\
<div><b>Updated Placeholder:</b> updated</div>\
]]></description>\
<pubDate>Wed, 12 Jul 2017 13:41:06 GMT</pubDate>\
</item>';
var list =[];
$(listXML).find('item').each(function (){
var el = $(this);
var cdat = $(listXML).find('item description').contents();
console.log(cdat.eq(1).text() + cdat.eq(2).text());
console.log(cdat.eq(5).contents().eq(0).text() + cdat.eq(5).contents().eq(1).text());
console.log(cdat.eq(6).contents().eq(0).text() + cdat.eq(6).contents().eq(1).text());
list.push({title: cdat.eq(2).text(), description: cdat.eq(5).contents().eq(1).text(), modified: cdat.eq(6).contents().eq(1).text()});
});
console.log('list: ' + JSON.stringify(list));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
A different approach is to get the description element, replace the inner CDATA and convert the result to a jQuery object. On this object you can use find in order to select sub elements.
var listXML = '<?xml version="1.0" encoding="UTF-8"?>\
<!--RSS generated by Microsoft SharePoint Foundation RSS Generator on 8/29/2017 10:23:18 AM -->\
<?xml-stylesheet type="text/xsl" href="/_layouts/RssXslt.aspx?List=43aaf08e-0153-4f1d-9b46-e66bba563fde" version="1.0"?>\
<rss version="2.0">\
<channel>\
<title>Webdocs: Test</title>\
<description>RSS feed for the Test list.</description>\
<lastBuildDate>Tue, 29 Aug 2017 14:23:18 GMT</lastBuildDate>\
<generator>Microsoft SharePoint Foundation RSS Generator</generator>\
<ttl>60</ttl>\
<language>en-US</language>\
<item>\
<title>Alternative Methods for Determining LCRs</title>\
<description><![CDATA[<div><b>Short Title:</b> Determining LCRs</div>\
<div><b>Description:</b> <div class="ExternalClass6280076BC79848078688B86006BA554F"><p><span style="font-size:11.5pt;font-family:"calibri", "sans-serif"">This project is a carryover from the 2017 effort to identify an alternative method for calculating the Locational Minimum Installed Capacity Requirements (LCRs). </span></p></div></div>\
<div><b>Governance Process Status:</b> Progress</div>\
<div><b>Topic State:</b> Open/Current</div>\
<div><b>Updated Placeholder:</b> updated</div>\
]]></description>\
<pubDate>Wed, 12 Jul 2017 13:41:06 GMT</pubDate>\
</item>';
var list =[];
$(listXML).find('item').each(function (){
var el = $(this);
var cdat = $(listXML).find('item description').contents();
var html = $($(listXML).find('item description')[0].innerHTML.replace('<!--[CDATA[', '')).html();
console.log(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My xml looks like this, I am able to retrieve the items and get the data from nodes like <title>, <description>. How to get the values from <media:title> and <media:credit>, <media:thumbnail>
This is how am able to get the data
var xmlparser = new DOMParser();
var xmlData = xmlparser.parseFromString(data.text(), "text/xml");
var items = xmlData.getElementsByTagName('item');
for(var i = 0; i < items.length; i++){
var title = items[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
var desc = items[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;
}
<pre xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:dcterms="http://purl.org/dc/terms/"
xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
<Channel>
<item>
<title>List of records</title>
<description>reading xml</description.
<media:title xmlns:media="http://search.yahoo.com/mrss/">
SinkorSwim Trailer
</media:title>
<title>Sink or Swim - Trailer</title>
<description>Jon Bowermaster's documentary</description>
<media:description xmlns:media="http://search.yahoo.com/mrss/">
Jon Bowermaster's documentary on a learn-to-swim camp
</media:description>
<media:credit xmlns:media="http://search.yahoo.com/mrss/" role="Director"
scheme="urn:ebu">
Jon Bowermaster
</media:credit>
<media:status xmlns:media="http://search.yahoo.com/mrss/" state="active"/>
<media:thumbnail xmlns:media="http://search.yahoo.com/mrss/"
type="landscape" url="http://snagfilms-video.jpg"/>
<media:player xmlns:media="http://search.yahoo.com/mrss/" height="323"
url="http://embed.snagfilms.com/embed/player?filmId=00000158-b20c-d8f9-
affd-b32ce8700000" width="500"/>
</item>
<item></item>
<item></item>
</channel>
</pre>
The media in media:title denotes an XML namespace prefix. The namespace prefix is only a shortcut for the namespace. The namespace has to be defined somewhere in the document with an xmlns:media attribute.
Then you can use the namespace aware getElementsByTagNameNS() function to query for the title element:
console.log(xml.getElementsByTagNameNS('xmlns:media="http://search.yahoo.com/mrss/"', 'title'));
first parameter you have to pass the namespace name and not the prefix.
I have been trying to convert a xml feed into human readable form but have not succeeded . I have tried seeing the example given in tutorails section but its too complex. Please can someone help me out with what is to be done. I can do fine till parsing of xml.
I am using google script and the output has to be in google docs.
here is what i came up with till now
var response = UrlFetchApp.fetch("http://getRecords.php?oauth_token=3e73c7&lat="+lat+"&lon="+lon+"&searchFor="+text+"&miles=100&response_type=xml");
var doc = Xml.parse(response.getContentText(), true)
var root = doc.getElement();
var entryList = "<ul>\n";
var entries = root.getElements("details");
for (var i=0; i<entries.length; i++) {
var e = entries[i];
var name = e.getElement("name").getText();
}
entryList += "<li>name </li>" + name;
entryList += "</ul>\n";
return entryList;
Here is the xml
<record>
<details>
<id>212929</id>
<distance>0</distance>
<category cat="8" sub="202" id="1201">General</category>
<name>Text Book Center</name>
<short_desc>One of Kenya's finest</short_desc>
<long_desc>
One of Kenya's leading bookshops, the Text Book Center offers a wide selection of titles. There is everything here from textbooks to fiction to the latest Information Technology titles. The range of maps is especially impressive. The shop is spacious and cool, giving shoppers plenty of room to browse the shelves upon shelves of books. Look out for the regular special offers.
</long_desc>
<address>
<address1>Kijabe Street</address1>
<city>Nairobi</city>
<country>Kenya</country>
<latitude>0</latitude>
<longitude>0</longitude>
</address>
<neighborhood>Downtown</neighborhood>
<phone>+254 2 330 340</phone>
<email>info#tbc.co.ke</email>
<open_hours>8am-1pm; 2pm-5.30pm Mon-Sat.</open_hours>
</details>
</record>
</records>
how do i remove the tags and just print it out in docs. Please help
thanks
Looks root node opening tag is missing. Is it original doc? or just paste error?
Try like this
var response = UrlFetchApp.fetch("http://getRecords.php? oauth_token=3e73c7&lat="+lat+"&lon="+lon+"&searchFor="+text+"&miles=100&response_type=xml");
var doc = Xml.parse(response.getContentText(), true);
var records = doc.records.getElements("record");
var entryList = "<ul>\n";
for (var i=0; i < records.length; i++) {
var details = records[i].details;
var name = details.name.getText();
entryList += "<li>" + name + "</li>\n";
}
entryList += "</ul>\n";
return entryList;