EDIT :
The problem is, when my html page is generated by Node/express/hbs, the handlebars parser try to resolve the blocks inside the script tags, it can't so it is just ignoring it, is there a way to make handlebars ignore the content of the script tags ?
Here is my Handlebars template file
<section id="movies-to-sort"></section>
<script id="movies2sort" type="text/x-handlebars-template">
<ul>
{{#movies}}
<li>
<p>{{name}} <small>({{ext}})</small></p>
</li>
{{/movies}}
</ul>
</script>
Then I have this ajax done() function :
.done(function(datas) {
var source = $('#movies2sort').html();
var template = Handlebars.compile(source, {noEscape: true});
$("#movies-to-sort").html(template(JSON.stringify(datas)));
// I have also tried without stringifying the datas
});
Here is the raw datas from the ajax response in firefox
{"movies":[{"name":"8½ - Otto et Mezzo (1963) 720p [MKV Corp].mkv","ext":"mkv"},{"name":"Al Final del Tunel (2016) 720p [MKV Corp].mkv","ext":"mkv"},{"name":"Banshun (Printemps Tardif)(1949) 720p [MKV Corp].mkv","ext":"mkv"},{"name":"Beasts of the Southern Wild (2012) 720p.mkv","ext":"mkv"},{"name":"Cashback (2006) 720p [MKV Corp].mkv","ext":"mkv"},{"name":"Celeste & Jesse Forever (2012) 720p.mkv","ext":"mkv"},{"name":"Citizen Kane (1941) 720p [MKV Corp].mkv","ext":"mkv"},{"name":"Das Boot (1981) [MKV Corp].mkv","ext":"mkv"},{"name":"It's a Wonderful Life (1946) 720p [MKV Corp].mkv","ext":"mkv"},{"name":"Jodaeiye Nader az Simin - Une Separation (2011) 720p.mkv","ext":"mkv"},{"name":"Ne Nous Fâchons Pas (1966) [STEN] 720p by johnchen [MKV Corp].mkv","ext":"mkv"},{"name":"Seven Psychopaths (2012) 720p.mkv","ext":"mkv"},{"name":"Tasogare Seibei (Le Samouraï du Crépuscule)(2002) 720p.mkv","ext":"mkv"},{"name":"The Artist (2011) 1080p [MKV Corp].mkv","ext":"mkv"},{"name":"The Aviator (2004) 720p [MKV Corp].mkv","ext":"mkv"},{"name":"The Big Short - Le Casse du Siècle (2015) 720p [MKV Corp].mkv","ext":"mkv"},{"name":"The Blues Brothers (1980) 720p [MKV Corp].mkv","ext":"mkv"},{"name":"The Bourne Identity (2002) 720p [MKV Corp].mkv","ext":"mkv"}]}
But the only html thing which is inserted in is an empty html list, the {{#movies}}{{/movies}} is always ignored.
<section id="movies-to-sort">
<ul></ul>
</section>
I feel I am very close, but I can't figure out what is wrong, any help/hint will be appreciated.
Related
I am trying to download every CSV file on this site: http://data.cnmc.es/datagraph/jsp/inf_trim.jsp
Each CSV is in a radio button inside a sub-page (not a different site) of that main page (I believe the term used to describe this type of site is 'dynamic'). Example of location of one of the CSV files:
image
Problem:
When I run the following code in python in jupyter notebook in order to find patterns in the html - so that I can automate the file downloading process - only a small part of the html is retrieved.
Code:
import requests
from bs4 import BeautifulSoup
webpage = 'http://data.cnmc.es/datagraph/jsp/inf_trim.jsp'
response = requests.get(webpage)
html = response.text
print(html)
What it retrieves:
...some code above which I have purposefully removed for post...
<noframes>
<h1>Informe Trimestral</h1>
<p>Aplicación de consulta de los informes que elabora trimestralmente la Comisión Nacional de los Mercados y la Competencia (CNMC)) en relación al mercado de las telecomunicaciones en España</p>
<h2>Trimestral IV 2014</h2>
<p>1. DATOS GENERALES DEL SECTOR</p>
<p>2. INFRAESTRUCTURAS</p>
<p>3. COMUNICACIONES FIJAS</p>
<p>4. COMUNICACIONES MÓVILES</p>
<p>5. SERVICIOS DE TELEVISIÓN Y RADIO</p>
<p>6. SERVICIOS MAYORISTAS</p>
<h3>EL SECTOR</h3>
<h2>COMUNICACIONES FIJAS</h2>
<h2>COMUNICACIONES MÓVILES</h2>
<h2>AUDIOVISUAL</h2>
<p>2014 © CNMC Comisión Nacional de los Mercados y de la Competencia.</p>
</noframes>
...some code below which I have purposefully removed for post...
What I can see using 'right-click > inspect' on the site:
image
As you can see, the 'right-click > inspect' html shown is much more extended (i.e. it includes <a> tags to dynamically navigate the page which the code-retrieved html does not).
How can I fetch ALL of the html, including those <a> tags?
I believe the answer/problem may lie in this line of code (complete guess, have no clue really):
image
FYI: please correct me if my strategy is not good. My intention is to get the full webpage html to find a pattern in the html tags that will allow me to automate the process of clicking on each CSV radio button using the selenium library
Thanks for your time
Jaime
I've been working on a site for school, and for some reason when I attempt to change the link for the source the console outputs
Uncaught TypeError: Cannot set property 'href' of null
at pierre (pierre.html:49)
at HTMLButtonElement.onclick (pierre.html:60)
I attempted to fix this by changing the ids but it also didn't work, even copying and pasting the 'link1' line over the 'link2' line does not work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="pierre, omidyar, bourne">
<title id="title">Pierre Omidyar</title>
</head>
<script>
var x = 0;
function pierre() {
if (x == 0) {
x = 1
document.getElementById('title').innerHTML='Pierre\xa0Bourne';
document.getElementById('heading').innerHTML='Pierre\xa0Bourne';
document.getElementById('tag').play();
document.getElementById('image1').src='https://cdn3.pitchfork.com/longform/699/Pierre1.jpg';
document.getElementById('cite1').innerHTML = "Sheldon Pearce, Pitchfork.com, 2019";
document.getElementById('para1').innerHTML = "Jordan Timothy Jenks, known professionally as Pi\'erre Bourne, is a Belizean-American record producer, rapper, songwriter, and audio engineer. He is known for producing the singles \"Magnolia\" by Playboi Carti, and \"Gummo\" by 6ix9ine, with the two peaking at number 29 and 12 on the US Billboard Hot 100 respectively.";
document.getElementById('link1').href = "https://en.wikipedia.org/wiki/Pierre_Bourne";
document.getElementById('image2').src='https://cdn3.pitchfork.com/longform/699/Pierre4.jpg';
document.getElementById('para2').innerHTML = "Songs Pierre Bourne has produced";
document.getElementById('l1o1').innerHTML = "Magnolia";
document.getElementById('l1o2').innerHTML = "wokeuplikethis*";
document.getElementById('l1o3').innerHTML = "Pissy Pamper";
document.getElementById('l1o4').innerHTML = "Pain 1993";
document.getElementById('link2').href = "https://en.wikipedia.org/wiki/Pierre_Bourne";
document.getElementById('para3').innerHTML = "He was born in Fort Riley, Kansas but grew up in Columbia, South Carolina to a military family from Queens, New York. Growing up, he would spend his summers with his grandmother in Queens, which lead to his interest in East Coast hip hop artists such as Dipset and G-Unit. He is related to Mobile Malachi, a Belizean Kriol Reggae artist and musician. He is also a cousin of Papoose, who is of Liberian descent."
document.getElementById('para4').innerHTML = "Jenks began producing for Young Nudy and Trippie Redd in 2016. He met Playboi Carti in February 2017, collaborating on the track \"Woke Up Like This\" and producing most tracks on his debut project. Their song \"Magnolia\" peaked at 29 on the US Billboard Hot 100. This kickstarted Jenks' producing career, producing songs for 21 Savage, Trippie Redd, Rich the Kid, Lil Yachty, Famous Dex, Nav, Young Thug and Lil Uzi Vert. Jenks has also released a series of mixtapes called The Life of Pi'erre and has his own imprint, SossHouse, at Interscope Records. He produced Travis Scott's single \"Watch\" which features Kanye West and Lil Uzi Vert. He also produced Playboi Carti's album Die Lit. He also helped produce for Kanye West's albums Ye and Jesus Is King.";
document.getElementById("link3").href = "https://en.wikipedia.org/wiki/Pierre_Bourne";
document.getElementById('para5').innerHTML = "Pierre Bourne has been hooked on the anime show Bleach since a two-week beat-making excursion to Tokyo earlier in the month. “'Bleach' is kind of accurate to how it looks over there [in Japan]. It reminds me of the neighborhoods I was walking through. So, that’s why I’ve been watching that a lot. Like, a lot a lot.”";
document.getElementById("link4").href = "https://www.highsnobiety.com/p/pierre-bourne-interview";
}
else {
x = 0
document.getElementById('title').innerHTML='Pierre\xa0Omidyar';
document.getElementById('heading').innerHTML='Pierre\xa0Omidyar';
document.getElementById('tag').pause();
document.getElementById('image1').src='https://upload.wikimedia.org/wikipedia/commons/0/0b/Pierre_Omidyar_%2850911249%29.jpg';
document.getElementById('cite1').innerHTML = "JD Lasica, Flickr.com, 2005";
document.getElementById('para1').innerHTML="Pierre Morad Omidyar is an American billionaire entrepreneur, software engineer and philanthropist. He is the founder of eBay where he served as chairman from 1998 to 2015. He became a billionaire at the age of 31 with eBay's 1998 initial public offering (IPO).Omidyar and his wife Pamela are philanthropists who founded Omidyar Network in 2004 in order to expand their efforts beyond non-profits to include for-profits and public policy.";
document.getElementById('link1').href = "https://en.wikipedia.org/wiki/Pierre_Omidyar"
document.getElementById('image2').src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Pomidyarji.jpg/800px-Pomidyarji.jpg';
document.getElementById('para2').innerHTML = "Companies Pierre Omidyar has Founded";
document.getElementById('l1o1').innerHTML = "eBay";
document.getElementById('l1o2').innerHTML = "First Look Media";
document.getElementById('l1o3').innerHTML = "Honolulu Civil Beat";
document.getElementById('l1o4').innerHTML = "Omidyar Network";
document.getElementById('para3').innerHTML = "Omidyar was born in Paris, the son of Iranian parents who migrated to France for higher education. He was given the name of Parviz. His father, Cyrus Omidyar, is a surgeon who worked as a urologist at Johns Hopkins University in Baltimore and now practices in Aliso Viejo, California. Due to his father's work, the family moved to the US when Omidyar was a child. His mother, who did her doctorate in linguistics at the Sorbonne, is an academic.";
document.getElementById('link2').href = "https://en.wikipedia.org/wiki/Pierre_Omidyar";
document.getElementById('para4').innerHTML = "In 1991, he co-founded Ink Development, a pen-based computing startup that later was rebranded as an e-commerce company and was renamed eShop Inc. Microsoft acquired eShop on June 11, 1996, for less than $50 million and Omidyar earned $1 million from the deal. In 1995, at the age of 28, Omidyar began to write the original computer code for an online venue to enable the listing of a direct person-to-person auction for collectible items. He created a simple prototype on his personal web page, and on Labor Day, Monday, September 4, 1995, he launched an online service called Auction Web, which would eventually become the auction site eBay. In 2013, prompted by the Edward Snowden leaks, Omidyar announced the creation of First Look Media, a journalism venture launched on February 10, 2014, with The Intercept and including such journalists as Glenn Greenwald, Laura Poitras, Jeremy Scahill, Dan Froomkin, John Temple, and Jay Rosen.";
document.getElementById('link3').href = "https://en.wikipedia.org/wiki/Pierre_Omidyar";
document.getElementById('para5').innerHTML = "Omidyar has been part of the executive producer team for the films \"Merchants of Doubt\" (2014) and \"Spotlight\" (2015)"
document.getElementById('link4').href = "https://en.wikipedia.org/wiki/Pierre_Omidyar";
}
}
</script>
<body>
<audio id="tag"><source src="https://codehs.com/uploads/9af74ff56cf4b8ed3809fba276efa59e" type="audio/mpeg"></audio>
<h1 id="heading">Pierre Omidyar</h1>
<button onclick="pierre()" type="button"><em>Swap!</em></button><br>
<img height=50% width=50% id="image1" src="https://upload.wikimedia.org/wikipedia/commons/0/0b/Pierre_Omidyar_%2850911249%29.jpg"/><br>
<cite id="cite1">JD Lasica, Flickr.com, 2005</cite><br>
<span id="para1">Pierre Morad Omidyar is an American billionaire entrepreneur, software engineer and philanthropist. He is the founder of eBay where he served as chairman from 1998 to 2015. He became a billionaire at the age of 31 with eBay's 1998 initial public offering (IPO).Omidyar and his wife Pamela are philanthropists who founded Omidyar Network in 2004 in order to expand their efforts beyond non-profits to include for-profits and public policy.</span><br>
<a id="link1" href="https://en.wikipedia.org/wiki/Pierre_Omidyar"><b>Source</b></a><br>
<hr>
<h1>What has Pierre done?</h1>
<img height=50% width=50% id="image2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Pomidyarji.jpg/800px-Pomidyarji.jpg"/><br>
<span id="para2">Companies Pierre Omidyar has Founded</span>
<ul>
<li id="l1o1">eBay</li>
<li id="l1o2">First Look Media</li>
<li id="l1o3">Honolulu Civil Beat</li>
<li id="l1o4">Omidyar Network</li>
</ul>
<hr>
<h1>Family Info</h1>
<p id="para3">Omidyar was born in Paris, the son of Iranian parents who migrated to France for higher education. He was given the name of Parviz. His father, Cyrus Omidyar, is a surgeon who worked as a urologist at Johns Hopkins University in Baltimore and now practices in Aliso Viejo, California. Due to his father's work, the family moved to the US when Omidyar was a child. His mother, who did her doctorate in linguistics at the Sorbonne, is an academic.</span><br>
<a id="link2" href="https://en.wikipedia.org/wiki/Pierre_Omidyar"><b>Source</b></a><br>
<hr>
<h1>Professional Info</h1>
<p id="para4">In 1991, he co-founded Ink Development, a pen-based computing startup that later was rebranded as an e-commerce company and was renamed eShop Inc. Microsoft acquired eShop on June 11, 1996, for less than $50 million and Omidyar earned $1 million from the deal. In 1995, at the age of 28, Omidyar began to write the original computer code for an online venue to enable the listing of a direct person-to-person auction for collectible items. He created a simple prototype on his personal web page, and on Labor Day, Monday, September 4, 1995, he launched an online service called Auction Web, which would eventually become the auction site eBay. In 2013, prompted by the Edward Snowden leaks, Omidyar announced the creation of First Look Media, a journalism venture launched on February 10, 2014, with The Intercept and including such journalists as Glenn Greenwald, Laura Poitras, Jeremy Scahill, Dan Froomkin, John Temple, and Jay Rosen.</span><br>
<a id="link3" href="https://en.wikipedia.org/wiki/Pierre_Omidyar"><b>Source</b></a>
<hr>
<h1>Hobby Info</h1>
<p id="para5">Omidyar has been part of the executive producer team for the films "Merchants of Doubt" (2014) and "Spotlight" (2015)</span><br>
<a id="link4" href="https://en.wikipedia.org/wiki/Pierre_Omidyar"><b>Source</b></a>
<hr>
</body>
</html>
It looks like the problem was mismatching the start and end span/p tags for the para information.
HTML with mismatched opening and closing tags causes the javascript DOM parser to miss elements despite them actually being on the page.
I'm using the wikipedia API to call information from different searches.
This is how I call it:
const api = `${proxy}http://en.wikipedia.org/w/api.php?action=parse&format=json§ion=0&prop=text&page=${this.state.value}`;
Then when I get it back I'm interested in the HTML. I get that through:
jsonObject.parse.text["*"]
Then I want to use this to create a replica of the wikipedia page. This is how I try recreate the wikipedia page:
ReactDOM.render(jsonObject.parse.text["*"], document.getElementById('root'))
It doesn't work as intended. Can anyone explain why? The resulting page just has a long string. The result is something along the lines of:
<div class="mw-parser-output"><div class="shortdescription nomobile noexcerpt noprint searchaux" style="display:none">A four-wheeled motor vehicle used to transport people</div> <div role="note" class="hatnote navigation-not-searchable">For broader coverage of this topic, see Motor vehicle.</div> <div role="note" class="hatnote navigation-not-searchable">For other uses, see Car (disambiguation) and Automobile (disambiguation).</div> <p class="mw-empty-elt"> </p> <table class="infobox" style="width:22em"><tbody><tr><th colspan="2" style="text-align:center;font-size:125%;font-weight:bold">Car</th></tr><tr><td colspan="2" style="text-align:center"><img alt="401 Gridlock.jpg" src="//upload.wikimedia.org/wikipedia/commons/thumb/5/5d/401_Gridlock.jpg/300px-401_Gridlock.jpg" decoding="async" width="300" height="200" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/5/5d/401_Gridlock.jpg/450px-401_Gridlock.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/5/5d/401_Gridlock.jpg/600px-401_Gridlock.jpg 2x" data-file-width="1600" data-file-height="1066" /><div>Cars and trucks driving on Highway 401 in Ontario, Canada</div></td></tr><tr><th scope="row">Classification</th><td>Vehicle</td></tr><tr><th scope="row">Industry</th><td>Various</td></tr><tr><th scope="row">Application</th><td>Transportation</td></tr><tr><th scope="row">Fuel source</th><td>Gasoline, diesel, natural gas, electric, hydrogen, solar, vegetable oil</td></tr><tr><th scope="row">Powered</th><td>Yes</td></tr><tr><th scope="row">Self-propelled</th><td>Yes</td></tr><tr><th scope="row">Wheels</th><td>3–4</td></tr><tr><th scope="row">Axles</th><td>2</td></tr><tr><th scope="row">Inventor</th><td>Karl Benz<sup id="cite_ref-stein_1-0" class="reference">[1]</sup></td></tr></tbody></table> <p>A <b>car</b> (or <b>automobile</b>) is a wheeled motor vehicle used for transportation. Most definitions of <i>car</i> say they run primarily on roads, seat one to eight people, have four tires, and mainly transport people rather than goods.<sup id="cite_ref-2" class="reference">[2]</sup><sup id="cite_ref-OEDmotrcar_3-0" class="reference">[3]</sup> </p><p>Cars came into global use during the 20th century, and developed economies depend on them. The year 1886 is regarded as the birth year of the modern car when German inventor Karl Benz patented his Benz Patent-Motorwagen. Cars became widely available in the early 20th century. One of the first cars accessible to the masses was the 1908 Model T, an American car manufactured by the Ford Motor Company. Cars were rapidly adopted in the US, where they replaced animal-drawn carriages and carts, but took much longer to be accepted in Western Europe and other parts of the world.<sup class="noprint Inline-Template Template-Fact" style="white-space:nowrap;">[<i><span title="This claim needs references to reliable sources. (August 2019)">citation needed</span></i>]</sup> </p><p>Cars have controls for driving, parking, passenger comfort, and a variety of lights. Over the decades, additional features and controls have been added to vehicles, making them progressively more complex, but also more reliable and easier to operate.<sup class="noprint Inline-Template Template-Fact" style="white-space:nowrap;">[<i><span title="This claim needs references to reliable sources. (August 2019)">citation needed</span></i>]</sup> These include rear reversing cameras, air conditioning, navigation systems, and in-car entertainment. Most cars in use in the 2010s are propelled by an internal combustion engine, fueled by the combustion of fossil fuels. Electric cars, which were invented early in the history of the car, became commercially available in the 2000s and have the potential to cost less to buy than gasoline cars in the early 2020s.<sup id="cite_ref-4" class="reference">[4]</sup> </p><p>There are costs and benefits to car use. The costs to the individual include acquiring the vehicle, interest payments (if the car is financed), repairs and maintenance, fuel, depreciation, driving time, parking fees, taxes, and insurance.<sup id="cite_ref-racv_5-0" class="reference">[5]</sup> The costs to society include maintaining roads, land use, road congestion, air pollution, public health, health care, and disposing of the vehicle at the end of its life. Traffic collisions are the largest cause of injury-related deaths worldwide.<sup id="cite_ref-who_stats_6-0" class="reference">[6]</sup> </p><p> The personal benefits include on-demand transportation, mobility, independence, and convenience.<sup id="cite_ref-setright_7-0" class="reference">[7]</sup> The societal benefits include economic benefits, such as job and wealth creation from the automotive industry, transportation provision, societal well-being from leisure and travel opportunities, and revenue generation from the taxes. People's ability to move flexibly from place to place has far-reaching implications for the nature of societies.<sup id="cite_ref-parking_8-0" class="reference">[8]</sup> There are around 1 billion cars in use worldwide. The numbers are increasing rapidly, especially in China, India and other newly industrialized countries.<sup id="cite_ref-plunkettresearch.com_9-0" class="reference">[9]</sup></p><div class="mw-references-wrap"><ol class="references"> <li id="cite_note-stein-1"><span class="mw-cite-backlink"><b>^</b></span> <span class="error mw-ext-cite-error" lang="en" dir="ltr">Cite error: The named reference <code>stein</code> was invoked but never defined (see the help page). </span></li> <li id="cite_note-2"><span class="mw-cite-backlink"><b>^</b></span> <span class="reference-text"><cite class="citation book">Fowler, H.W.; Fowler, F.G., eds. (1976). <i>Pocket Oxford Dictionary</i>. Oxford University Press. ISBN <bdi>978-0198611134</bdi>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Pocket+Oxford+Dictionary&rft.pub=Oxford+University+Press&rft.date=1976&rft.isbn=978-0198611134&rfr_id=info%3Asid%2Fen.wikipedia.org%3ACar" class="Z3988"></span><style data-mw-deduplicate="TemplateStyles:r886058088">.mw-parser-output cite.citation{font-style:inherit}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation .cs1-lock-free a{background:url("//upload.wikimedia.org/wikipedia/commons/thumb/6/65/Lock-green.svg/9px-Lock-green.svg.png")no-repeat;background-position:right .1em center}.mw-parser-output .citation .cs1-lock-limited a,.mw-parser-output .citation .cs1-lock-registration a{background:url("//upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Lock-gray-alt-2.svg/9px-Lock-gray-alt-2.svg.png")no-repeat;background-position:right .1em center}.mw-parser-output .citation .cs1-lock-subscription a{background:url("//upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Lock-red-alt-2.svg/9px-Lock-red-alt-2.svg.png")no-repeat;background-position:right .1em center}.mw-parser-output .cs1-subscription,.mw-parser-output .cs1-registration{color:#555}.mw-parser-output .cs1-subscription span,.mw-parser-output .cs1-registration span{border-bottom:1px dotted;cursor:help}.mw-parser-output .cs1-ws-icon a{background:url("//upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Wikisource-logo.svg/12px-Wikisource-logo.svg.png")no-repeat;background-position:right .1em center}.mw-parser-output code.cs1-code{color:inherit;background:inherit;border:inherit;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;font-size:100%}.mw-parser-output .cs1-visible-error{font-size:100%}.mw-parser-output .cs1-maint{display:none;color:#33aa33;margin-left:0.3em}.mw-parser-output .cs1-subscription,.mw-parser-output .cs1-registration,.mw-parser-output .cs1-format{font-size:95%}.mw-parser-output .cs1-kern-left,.mw-parser-output .cs1-kern-wl-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right,.mw-parser-output .cs1-kern-wl-right{padding-right:0.2em}</style></span> </li> <li id="cite_note-OEDmotrcar-3"><span class="mw-cite-backlink"><b>^</b></span> <span class="error mw-ext-cite-error" lang="en" dir="ltr">Cite error: The named reference <code>OEDmotrcar</code> was invoked but never defined (see the help page). </span></li> <li id="cite_note-4"><span class="mw-cite-backlink"><b>^</b></span> <span class="reference-text"><cite class="citation web"><a rel="nofollow" class="external text" href="https://cleantechnica.com/2019/08/09/ev-price-parity-coming-soon-claims-vw-executive/">"EV Price Parity Coming Soon, Claims VW Executive"</a>. <i>CleanTechnica</i>. 9 August 2019<span class="reference-accessdate">. Retrieved <span class="nowrap">10 August</span> 2019</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=CleanTechnica&rft.atitle=EV+Price+Parity+Coming+Soon%2C+Claims+VW+Executive&rft.date=2019-08-09&rft_id=https%3A%2F%2Fcleantechnica.com%2F2019%2F08%2F09%2Fev-price-parity-coming-soon-claims-vw-executive%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3ACar" class="Z3988"></span><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r886058088"/></span> </li> <li id="cite_note-racv-5"><span class="mw-cite-backlink"><b>^</b></span> <span class="reference-text"><cite class="citation web"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20091007121101/http://www.racv.com.au/wps/wcm/connect/racv/Internet/Primary/my%2Bcar/advice%2B_%2Binformation/vehicle%2Boperating%2Bcosts/">"Car Operating Costs"</a>. RACV. Archived from <a rel="nofollow" class="external text" href="http://www.racv.com.au/wps/wcm/connect/racv/Internet/Primary/my+car/advice+_+information/vehicle+operating+costs/">the original</a> on 7 October 2009<span class="reference-accessdate">. Retrieved <span class="nowrap">22 December</span> 2009</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Car+Operating+Costs&rft.pub=RACV&rft_id=http%3A%2F%2Fwww.racv.com.au%2Fwps%2Fwcm%2Fconnect%2Fracv%2FInternet%2FPrimary%2Fmy%2Bcar%2Fadvice%2B_%2Binformation%2Fvehicle%2Boperating%2Bcosts%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3ACar" class="Z3988"></span><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r886058088"/></span> </li> <li id="cite_note-who_stats-6"><span class="mw-cite-backlink"><b>^</b></span> <span class="reference-text"><cite class="citation book">Peden, Margie; Scurfield, Richard; Sleet, David; Mohan, Dinesh; Hyder, Adnan A.; Jarawan, Eva; Mathers, Colin, eds. (2004). <a rel="nofollow" class="external text" href="http://who.int/violence_injury_prevention/publications/road_traffic/world_report/en/"><i>World report on road traffic injury prevention</i></a>. World Health Organization. ISBN <bdi>92-4-156260-9</bdi><span class="reference-accessdate">. Retrieved <span class="nowrap">24 June</span> 2008</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=World+report+on+road+traffic+injury+prevention&rft.pub=World+Health+Organization&rft.date=2004&rft.isbn=92-4-156260-9&rft_id=http%3A%2F%2Fwho.int%2Fviolence_injury_prevention%2Fpublications%2Froad_traffic%2Fworld_report%2Fen%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3ACar" class="Z3988"></span><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r886058088"/></span> </li> <li id="cite_note-setright-7"><span class="mw-cite-backlink"><b>^</b></span> <span class="error mw-ext-cite-error" lang="en" dir="ltr">Cite error: The named reference <code>setright</code> was invoked but never defined (see the help page). </span></li> <li id="cite_note-parking-8"><span class="mw-cite-backlink"><b>^</b></span> <span class="reference-text"><cite class="citation book">Jakle, John A.; Sculle, Keith A. (2004). <i>Lots of Parking: Land Use in a Car Culture</i>. University of Virginia Press. ISBN <bdi>0-8139-2266-6</bdi>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Lots+of+Parking%3A+Land+Use+in+a+Car+Culture&rft.pub=University+of+Virginia+Press&rft.date=2004&rft.isbn=0-8139-2266-6&rft.aulast=Jakle&rft.aufirst=John+A.&rft.au=Sculle%2C+Keith+A.&rfr_id=info%3Asid%2Fen.wikipedia.org%3ACar" class="Z3988"></span><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r886058088"/></span> </li> <li id="cite_note-plunkettresearch.com-9"><span class="mw-cite-backlink"><b>^</b></span> <span class="reference-text"><cite class="citation web"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20110722031051/http://www.plunkettresearch.com/automobiles%20trucks%20market%20research/industry%20overview">"Automobile Industry Introduction"</a>. Plunkett Research. Archived from <a rel="nofollow" class="external text" href="http://www.plunkettresearch.com/Industries/AutomobilesTrucks/AutomobileTrends/tabid/89/Default.aspx">the original</a> on 22 July 2011.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Automobile+Industry+Introduction&rft.pub=Plunkett+Research&rft_id=http%3A%2F%2Fwww.plunkettresearch.com%2FIndustries%2FAutomobilesTrucks%2FAutomobileTrends%2Ftabid%2F89%2FDefault.aspx&rfr_id=info%3Asid%2Fen.wikipedia.org%3ACar" class="Z3988"></span><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r886058088"/></span> </li> </ol></div> <!-- NewPP limit report Parsed by mw1289 Cached time: 20191013083710 Cache expiry: 2592000 Dynamic content: false Complications: [vary‐revision‐sha1] CPU time usage: 0.332 seconds Real time usage: 0.499 seconds Preprocessor visited node count: 1184/1000000 Preprocessor generated node count: 0/1500000 Post‐expand include size: 22522/2097152 bytes Template argument size: 3602/2097152 bytes Highest expansion depth: 13/40 Expensive parser function count: 4/500 Unstrip recursion depth: 0/20 Unstrip post‐expand size: 12133/5000000 bytes Number of Wikibase entities loaded: 0/400 Lua time usage: 0.152/10.000 seconds Lua memory usage: 3.95 MB/50 MB --> <!-- Transclusion expansion time report (%,ms,calls,template) 100.00% 476.128 1 -total 18.96% 90.271 3 Template:Cite_book 11.75% 55.942 1 Template:Pp-semi-vandalism 10.35% 49.266 2 Template:Cn 9.87% 47.004 1 Template:Short_description 9.05% 43.105 1 Template:Pagetype 8.69% 41.353 2 Template:Fix 7.57% 36.060 6 Template:Broken_ref 6.32% 30.079 1 Template:Infobox_machine 5.53% 26.318 4 Template:Category_handler --> </div>
React will block HTML inserted by javascript by default. If you want to get around this, you need to use the dangerouslySetInnerHTML prop on the parent of your content.
Example:
// data from fetch
let data;
return <div dangerouslySetInnerHTML={data}></div>
When you do this, make sure that you trust the HTML source. If you add user generated HTML to your site like this, your site will be vulnerable to XSS attacks.
I am using feedparser version 2.2.9 to parse feed:
"https://www.veganlifemag.com/feed/".
As to the description tag of the rss feed, it has HTML (CDATA) content and tags that brackets the content I needed to extract. I was wondering if there is a way to extract the content or specific content within CDATA.
thanks in advance,
Jerry
RSS feed example
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>VegNews.com (News)</title>
<description></description>
<link>https://vegnews.com/news</link>
<language>en</language>
<item>
<title>London Fashion Week Will Be Fur-Free This Year for the First Time</title>
<category>News</category>
<pubDate>Mon, 10 Sep 2018 01:50:00 -0700</pubDate>
<link>https://vegnews.com/2018/9/london-fashion-week-will-be-fur-free-this-year-for-the-first-time</link>
<guid>https://vegnews.com/2018/9/london-fashion-week-will-be-fur-free-this-year-for-the-first-time</guid>
<description>
<![CDATA[<img src="https://vegnews.com/media/W1siZiIsIjEyOTE1L1ZlZ05ld3MuRmFzaGlvbkxvbmRvbi5wbmciXSxbInAiLCJ0aHVtYiIsIjgwMHg0NzMjIix7ImZvcm1hdCI6ImpwZyJ9XSxbInAiLCJvcHRpbWl6ZSJdXQ/VegNews.FashionLondon.png?sha=ec3755007e36522e" /><p>Anticipated event London Fashion Week (LFW) kicks off September 14, this year with no fur in sight. While LFW did not impose a ban on fur, every designer that will present their collections this year has adopted a fur-free policy, including last-minute holdout Burberry. After more than a decade of pressure from animal-rights organizations, including Humane Society International UK and People for the Ethical Treatment of Animals, Burberry announced this month that it would no longer use fur in its collections and appointed Riccardo Tisci as its new creative director to phase out any remaining fur items. “I don’t think it is compatible with modern luxury and with the environment in which we live, and Riccardo has a very strong view as well on this,” LFW CEO Marco Gobbetti told <em>Business of Fashion</em>. “It’s part of what Burberry is today.” Similarly, animal fur is falling out of favor in the United States. Earlier this year, American designer Donna Karan pledged to eliminate the material from her future collections, and the city of San Francisco joined West Hollywood and Berkeley in banning fur sales within city limits.</p>]]>
</description>
</item>
CDATA just means "Treat this content at plain text" so it ignores the special meaning of characters which would normally have special meaning in XML (like < meaning "start of tag").
The value of the description is a fragment of HTML. If you want to extract specific content from it, then run it through an HTML parser.
So I have an list with items where the years are bolded. But when i put them in JSON and later I set the text in HTML, the text is not bolded. In the link ,now I have the bold tags and the text . This is confusing . Can i make this work ?
<div class="year-list">
<h3 class="time-line">Here's a time line of Dr. Borlaug's life:</h3>
<div class="big-list">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li><b>1938 </b> - Marries wife of 69 years Margret Gibson. Gets laid off due to budget cuts. Inspired by Elvin Charles Stakman, he returns to school study under Stakman, who teaches him about breeding pest-resistent plants.</li>
<li><b>1941 </b> - Tries to enroll in the military after the Pearl Harbor attack, but is rejected. Instead, the military asked his lab to work on waterproof glue, DDT to control malaria, disenfectants, and other applied science.</li>
<li><b>1942 </b> - Receives a Ph.D. in Genetics and Plant Pathology</li>
<li><b>1944 </b> - Rejects a 100% salary increase from Dupont, leaves behind his pregnant wife, and flies to Mexico to head a new plant pathology program. Over the next 16 years, his team breeds 6,000 different strains of disease resistent wheat - including different varieties for each major climate on Earth.</li>
<li><b>1945 </b> - Discovers a way to grown wheat twice each season, doubling wheat yields</li>
<li><b>1953 </b> - crosses a short, sturdy dwarf breed of wheat with a high-yeidling American breed, creating a strain that responds well to fertalizer. It goes on to provide 95% of Mexico's wheat.</li>
<li><b>1962 </b> - Visits Delhi and brings his high-yielding strains of wheat to the Indian subcontinent in time to help mitigate mass starvation due to a rapidly expanding population</li>
<li><b>1970 </b> - receives the Nobel Peace Prize</li>
<li><b>1983 </b> - helps seven African countries dramatically increase their maize and sorghum yields</li>
<li><b>1984 </b> - becomes a distinguished professor at Texas A&M University</li>
<li><b>2005 </b> - states "we will have to double the world food supply by 2050." Argues that genetically modified crops are the only way we can meet the demand, as we run out of arable land. Says that GM crops are not inherently dangerous because "we've been genetically modifying plants and animals for a long time. Long before we called it science, people were selecting the best breeds."</li>
<li></li>
</ul>
</div>
</div>
This is the part of mine JSON.
{"divHoldingTitle":{"title":"Dr. Norman Borlaug","textSave":"The man who saved a billion lives"},"imageHolder":{"theBigPicture":"./images/smiling-people.jpg","textUnderPicture":"Dr. Norman Borlaug, second from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger."},"bigList":{"itemList":[{"item":"<b>1914 </b> - Born in Cresco, Iowa"},{"item":"<li><b>1933 </b> - Leaves his family\'s farm to attend the University of Minnesota, thanks to a Depression era program known as the\'National Youth Administration\'"}]}}
for(i in obj.bigList.itemList){
$('li').text(obj.bigList.itemList[i].item);
}
};
The problem is this.
Screenshot of the problem
As you can see. The lists have 1933 - Leaves his family's farm to..
But it is not bolded.
I am not sure how to solve this problem. I am using JavaScript .
This is due to using .text() method - it removes all formatting tags.
Use html() instead:
$('li').html(obj.bigList.itemList[i].item);