How can I generate a Bandcamp player embed code given an album? - javascript

Given the link to an album on Bandcamp, how can I generate the code to embed a corresponding Bandcamp player? The embed codes provided by Bandcamp seem to contain opaque album IDs, which I cannot get at programmatically.

The HTML source of Bandcamp album pages contains a <script> tag inside the <head> section that has a JSON object with all the necessary information to construct an embedded web player.
For example, https://muvaofearth.bandcamp.com/album/high contains the following:
<script type="application/ld+json">
{"byArtist":{"#type":"MusicGroup","name":"muva of Earth","#id":"https://muvaofearth.bandcamp.com"},"albumReleaseType":"SingleRelease","numTracks":1,"name":"High","#type":"MusicAlbum","copyrightNotice":"All Rights Reserved","keywords":["Alternative","Neo-Soul","afro","alternative","nu-jazz","soul","London"],"publisher":{"event":[{"startDate":"06 Aug 2022 00:00:00 GMT","location":{"name":"Foyer, Queen Elizabeth Hall","#type":"MusicVenue","address":"London, UK"},"#type":"MusicEvent","name":"muva of Earth","url":"https://www.songkick.com/concerts/40422319-pink-siifu-at-foyer-queen-elizabeth-hall?utm_source=1471&utm_medium=partner"},{"startDate":"13 Aug 2022 00:00:00 GMT","location":{"name":"Crystal Palace Bowl","#type":"MusicVenue","address":"Bromley, UK"},"#type":"MusicEvent","name":"muva of Earth","url":"https://www.songkick.com/concerts/40264294-kamasi-washington-at-crystal-palace-bowl?utm_source=1471&utm_medium=partner"},{"startDate":"17 Nov 2022 00:00:00 GMT","location":{"name":"The Lower Third","#type":"MusicVenue","address":"London, UK"},"#type":"MusicEvent","name":"muva of Earth","url":"https://www.songkick.com/concerts/40563917-muva-of-earth-at-lower-third?utm_source=1471&utm_medium=partner"}],"genre":"https://bandcamp.com/tag/alternative","#type":"MusicGroup","name":"muva of Earth","foundingLocation":{"#type":"Place","name":"London, UK"},"#id":"https://muvaofearth.bandcamp.com","image":"https://f4.bcbits.com/img/0029361084_10.jpg","additionalProperty":[{"value":3580433718,"name":"band_id","#type":"PropertyValue"},{"value":"GBP","name":"currency","#type":"PropertyValue"},{"value":true,"name":"has_any_downloads","#type":"PropertyValue"},{"value":true,"name":"has_download_codes","#type":"PropertyValue"},{"value":4096,"name":"image_height","#type":"PropertyValue"},{"value":29361084,"name":"image_id","#type":"PropertyValue"},{"value":3072,"name":"image_width","#type":"PropertyValue"}],"subjectOf":[{"#type":"WebPage","name":"music","url":"https://muvaofearth.bandcamp.com/music","additionalProperty":[{"value":"m","name":"nav_type","#type":"PropertyValue"}]},{"#type":"WebPage","name":"community","url":"https://muvaofearth.bandcamp.com/community","additionalProperty":[{"value":"c","name":"nav_type","#type":"PropertyValue"}]}],"description":"muva of Earth is an alternative jazz singer and ASCENDING SOULSTRESS from tribe ‘Crown of Ọṣun’ in Yorubaland, Nigeria. \nBorn and raised in London, today the ever-evolving being is inspired by Sun Ra, Sade and Fela Kuti. By connecting to her roots, muva of Earth’s music explores the complexities of identity, the self and human connections over a bed of afrofuturistic rhythms and atmospheric horns","mainEntityOfPage":[{"#type":"WebPage","name":"Instagram","url":"https://www.instagram.com/muvaofearth/"}]},"#id":"https://muvaofearth.bandcamp.com/album/high","#context":"https://schema.org","additionalProperty":[{"value":3292814127,"name":"art_id","#type":"PropertyValue"},{"value":1,"name":"featured_track_num","#type":"PropertyValue"},{"value":"all_rights_reserved","name":"license_name","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/a3292814127_10.jpg","track":{"itemListElement":[{"position":1,"#type":"ListItem","item":{"copyrightNotice":"All Rights Reserved","name":"High","#type":"MusicRecording","#id":"https://muvaofearth.bandcamp.com/track/high","additionalProperty":[{"value":1973219776,"name":"track_id","#type":"PropertyValue"},{"value":"all_rights_reserved","name":"license_name","#type":"PropertyValue"}],"duration":"P00H02M56S"}}],"#type":"ItemList","numberOfItems":1},"albumRelease":[{"musicReleaseFormat":"DigitalFormat","#type":["MusicRelease","Product"],"name":"High","offers":{"price":0.0,"priceSpecification":{"minPrice":0.0},"priceCurrency":"GBP","#type":"Offer","url":"https://muvaofearth.bandcamp.com/album/high#a3879992644-buy","additionalProperty":[{"value":1000.0,"name":"max_price","#type":"PropertyValue"}],"availability":"OnlineOnly"},"#id":"https://muvaofearth.bandcamp.com/album/high","image":["https://f4.bcbits.com/img/a3292814127_10.jpg"],"additionalProperty":[{"value":3879992644,"name":"item_id","#type":"PropertyValue"},{"value":"a","name":"item_type","#type":"PropertyValue"},{"value":4286003490,"name":"selling_band_id","#type":"PropertyValue"},{"value":"Digital","name":"type_name","#type":"PropertyValue"},{"value":3292814127,"name":"art_id","#type":"PropertyValue"}],"description":"Includes high-quality download in MP3, FLAC and more. Paying supporters also get unlimited streaming via the free Bandcamp app.","recordLabel":{"#type":"MusicGroup","name":"Brownswood Recordings","#id":"https://brownswoodrecordings.bandcamp.com","additionalProperty":[{"value":"/music?from=btl","name":"url_suffix","#type":"PropertyValue"}]},"identifier":"5060180325619"},{"#type":"MusicRelease","#id":"https://muvaofearth.bandcamp.com/track/high"}],"description":"Brownswood Recordings are happy to present our newest family member, muva of Earth, an alternative jazz singer and ASCENDING SOULSTRESS from South East London. Thought-provoking debut single ‘High’ encapsulates a human’s ability to shape, transform and play with their own point of view. For example, reframing nervousness into excitement and making the most out of a negative situation, resulting in a value-creating experience that demonstrates the power of manifestation. ‘High’ by muva of Earth is released on digital format only on Wednesday 27th July 2022 via Brownswood Recordings. \r\n\r\nInspired by the breakdown of a relationship, the track opens with a euphoric harmony, the ethereal vocals are grounded by the chugging Hip Hop drum beat, inviting the listener into muva of Earth’s Afro-spiritual world. The lyrics carry a poignant message, “Thirsting for knowledge, thirsting for thought’ touches upon the purpose of human life on a constant quest for stimulation. “Wondering why people divide” is a reflexive moment pondering existential questions like, why is there so much turmoil in life? The vocals build up to a powerful crescendo elevating the affirmations developed throughout the song, representing an empowering realisation of life as part of a Divine whole to be appreciated and celebrated. \r\n\r\nGrowing up in both London & Kent under the influence of Amy Winehouse and Beyoncé. Moving back to London in her teenage years marks an important moment for muva of Earth as she had the freedom to immerse herself into her music, from studying at college to gracing stages around London with her soulful croons. Today, the ever-evolving being is deeply inspired by Sun Ra, Sade, Alice Coltrane and Fela Kuti. By connecting to her Yoruba roots, muva of Earth’s music explores the complexities of identity, the self and human connections over a bed of afrofuturistic rhythms and atmospheric horns.\r\n\r\nListening to muva of Earth is like planting your feet in rich warm soil; blending spiritual mantras and conscious lyricism, her music is truly transformative.\r\n\r\n‘High’ by muva of Earth is available across all digital streaming platforms on Wednesday July 27th 2022","creditText":"Vocals & Harp performed by muva of Earth \r\nKeyboards, Guitar, Percussion and Programming by Stephen Wesley Holmes\r\nSaxophone by Jaz Lee","dateModified":"28 Jul 2022 11:33:02 GMT","datePublished":"27 Jul 2022 00:00:00 GMT","sponsor":[{"name":"Steve Harrington","#type":"Person","url":"https://bandcamp.com/steveharrington","additionalProperty":[{"value":6141626,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0006141626_50.jpg"},{"name":"detroitlyons1969","#type":"Person","url":"https://bandcamp.com/detroitlyons1969","additionalProperty":[{"value":28555487,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0028555487_50.jpg"},{"name":"SBL Anderson","#type":"Person","url":"https://bandcamp.com/sbl","additionalProperty":[{"value":4524324,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0004524324_50.jpg"},{"name":"mustafa popal","#type":"Person","url":"https://bandcamp.com/mustafapopal","additionalProperty":[{"value":1121612,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0001121612_50.jpg"},{"name":"mxwix","#type":"Person","url":"https://bandcamp.com/ash_hanners","additionalProperty":[{"value":27522757,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0027522757_50.jpg"},{"name":"SHACHO","#type":"Person","url":"https://bandcamp.com/shacho","additionalProperty":[{"value":4216957,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0004216957_50.jpg"},{"name":"lifeboogie","#type":"Person","url":"https://bandcamp.com/lifeboogie","additionalProperty":[{"value":8896602,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0008896602_50.jpg"},{"name":"essarai","#type":"Person","url":"https://bandcamp.com/essarai","additionalProperty":[{"value":3289423,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0003289423_50.jpg"},{"name":"barndog","#type":"Person","url":"https://bandcamp.com/barndog18","additionalProperty":[{"value":27608387,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0027608387_50.jpg"},{"name":"Barry Tucker","#type":"Person","url":"https://bandcamp.com/barrytucker","additionalProperty":[{"value":22231639,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0022231639_50.jpg"},{"name":"Mike Allin","#type":"Person","url":"https://bandcamp.com/mikeallin","additionalProperty":[{"value":24391202,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0024391202_50.jpg"},{"name":"djmeatraffle","#type":"Person","url":"https://bandcamp.com/djmeatraffle","additionalProperty":[{"value":19491106,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0019491106_50.jpg"},{"name":"parjugs","#type":"Person","url":"https://bandcamp.com/parjugs","additionalProperty":[{"value":27516607,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0027516607_50.jpg"},{"name":"naya","#type":"Person","url":"https://bandcamp.com/nayaya","additionalProperty":[{"value":21384901,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0021384901_50.jpg"},{"name":"Hirotaka I'shigaki","#type":"Person","url":"https://bandcamp.com/hirotakaishigaki","additionalProperty":[{"value":5873807,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0005873807_50.jpg"},{"name":"Osunlade","#type":"Person","url":"https://bandcamp.com/osunlade","additionalProperty":[{"value":25094079,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0025094079_50.jpg"},{"name":"cone_the_weird","#type":"Person","url":"https://bandcamp.com/cone_the_weird","additionalProperty":[{"value":14084902,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0014084902_50.jpg"},{"name":"fawces","#type":"Person","url":"https://bandcamp.com/fawces","additionalProperty":[{"value":27693682,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0027693682_50.jpg"},{"name":"Emma Warren","#type":"Person","url":"https://bandcamp.com/emmalwarren","additionalProperty":[{"value":8808049,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0008808049_50.jpg"},{"name":"Kirill Linne","#type":"Person","url":"https://bandcamp.com/linnekirill","additionalProperty":[{"value":21967238,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0021967238_50.jpg"},{"name":"Matthew Slaymaker","#type":"Person","url":"https://bandcamp.com/mattslaymaker","additionalProperty":[{"value":29067867,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0029067867_50.jpg"},{"name":"Carlos Niño Music","#type":"Person","url":"https://bandcamp.com/carlosnino","additionalProperty":[{"value":16650805,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0016650805_50.jpg"},{"name":"Graham Naylor","#type":"Person","url":"https://bandcamp.com/grahamnaylor","additionalProperty":[{"value":4674976,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0004674976_50.jpg"},{"name":"rob ","#type":"Person","url":"https://bandcamp.com/robertgebhard","additionalProperty":[{"value":14401976,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0014401976_50.jpg"},{"name":"thecontinental63","#type":"Person","url":"https://bandcamp.com/thecontinental63","additionalProperty":[{"value":24330960,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0024330960_50.jpg"},{"name":"Aly Gillani","#type":"Person","url":"https://bandcamp.com/alygillani","additionalProperty":[{"value":14569548,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0014569548_50.jpg"},{"name":"craigthomas1","#type":"Person","url":"https://bandcamp.com/craigthomas1","additionalProperty":[{"value":9013630,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0009013630_50.jpg"},{"name":"jjayb","#type":"Person","url":"https://bandcamp.com/jjayb","additionalProperty":[{"value":24156945,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0024156945_50.jpg"},{"name":"New Analog","#type":"Person","url":"https://bandcamp.com/newanalog","additionalProperty":[{"value":28320188,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0028320188_50.jpg"},{"name":"Sadeedo","#type":"Person","url":"https://bandcamp.com/sadeedo","additionalProperty":[{"value":14858237,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0014858237_50.jpg"},{"name":"SoulandJazz","#type":"Person","url":"https://bandcamp.com/marcelvaillant","additionalProperty":[{"value":25086431,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0025086431_50.jpg"},{"name":"ssss","#type":"Person","url":"https://bandcamp.com/samuelmcpherson","additionalProperty":[{"value":29361314,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0029361314_50.jpg"},{"name":"DeLaRoos","#type":"Person","url":"https://bandcamp.com/delaroos","additionalProperty":[{"value":16474284,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0016474284_50.jpg"},{"name":"Tom Turnbull","#type":"Person","url":"https://bandcamp.com/tomturnbull101","additionalProperty":[{"value":10871014,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0010871014_50.jpg"},{"name":"davidgreene1","#type":"Person","url":"https://bandcamp.com/davidgreene1","additionalProperty":[{"value":27367718,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0027367718_50.jpg"},{"name":"gry nicolas","#type":"Person","url":"https://bandcamp.com/grynicolas","additionalProperty":[{"value":8723957,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0008723957_50.jpg"},{"name":"franciscoldn","#type":"Person","url":"https://bandcamp.com/franciscoldn","additionalProperty":[{"value":13492971,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0013492971_50.jpg"},{"name":"david brooks","#type":"Person","url":"https://bandcamp.com/dbrooks46","additionalProperty":[{"value":15934939,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0015934939_50.jpg"},{"name":"Stefan","#type":"Person","url":"https://bandcamp.com/sportivo","additionalProperty":[{"value":17334916,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0017334916_50.jpg"},{"name":"nore01","#type":"Person","url":"https://bandcamp.com/nore01","additionalProperty":[{"value":26186692,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0026186692_50.jpg"},{"name":"Adrian Fox-Pearson","#type":"Person","url":"https://bandcamp.com/adrianfox-pearson","additionalProperty":[{"value":8419619,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0008419619_50.jpg"},{"name":"andychiminea","#type":"Person","url":"https://bandcamp.com/andychiminea","additionalProperty":[{"value":25593828,"name":"image_id","#type":"PropertyValue"}],"image":"https://f4.bcbits.com/img/0025593828_50.jpg"}]}
</script>
What you need specifically is the following keys:
#id, i.e. https://muvaofearth.bandcamp.com
albumRelease -> additionalProperty -> value of the object where name = "item_id", i.e. 3879992644

User Agis' answer above put me on the right track. The information you need can be found in multiple places in the document.
One such place is here:
<meta name="bc-page-properties" content="{"item_type":"a","item_id":861176108,"tralbum_page_version":0}">
This contains one other piece of information you need--whether the release is an album or a track. It will appear as a or t but you will need to transform that to album or track in the embedded player code.
Make sure to sanitize the properties payload. It took me a while to realize that the properties here started with " and not ".
Here is some PHP code that you could port to javascript.
$url = "https://walteryoung.bandcamp.com/album/tracing-an-illicit-waveform";
$tags = get_meta_tags($url);
$prop_arr = explode(",", $tags['bc-page-properties']);
for ($t = 0; $t < count($prop_arr); $t++) {
$cur = str_replace(['{', '}', '"', '\"', ' ', '/', '\'', '(', ')'], '', $prop_arr[$t]);
$key = explode(":", $cur)[0];
$val = explode(":", $cur)[1];
// echo "[`" . $key . "`,`" . $val . "`],";
if (str_starts_with($key, "item_id")) {
$item_id = $val;
}
if (str_starts_with($key, "item_type")) {
if ($val == 'a') {
$type = "album";
} else {
$type = "track";
}
}
}
echo "<iframe style='border: 0; width: 100%; height: 42px;' src='https://bandcamp.com/EmbeddedPlayer/" . $type . "=" . $item_id . "/size=small/bgcol=333333/linkcol=ffffff/transparent=true/' seamless><a href='" . $url . "'>Tracing an Illicit Waveform</a></iframe>";

Related

How to convert a twiiter link into an embedded tweet?

I am building a news website which gets data from an external server. The external server often sends me the links to particular tweets but I can't seem to find a way to convert them into an embedded tweet
(Please note stack overflow wont let me send shortened urls, therefore it is in quotations.)
The json that it sends me is like -
"Story": "ROME: Harry Kane scored twice as a buoyant England cruised through to the semi-finals of Euro 2020 with a one-sided 4-0 win over Ukraine in Rome on Saturday. Kane ended a worrying international scoring drought by netting in the 2-0 last-16 defeat of Germany in midweek and he put England ahead inside four minutes on a sweaty evening in the Italian capital. <strong>As it happened: Ukraine vs England</strong> Gareth Southgate's side then put this quarter-final tie out of sight with two more goals early in the second half, one from Harry Maguire before Kane netted again. Substitute Jordan Henderson got the fourth, and as Denmark lie in wait in the Wembley semi-final on Tuesday England will be confident of going on to reach a first ever European Championship final and even now claiming a first major international title since 1966. <p>�������������� England = semi-finalists ������#EURO2020 | #ENG https://twitter.com/EURO2020/status/1411427976047120387"</p>— UEFA EURO 2020 (#EURO2020) 1625346114000 The draw here was kind for them, with Ukraine surely as weak an opponent as they could hope to face in a quarter-final, a stage at which they have lost to the likes of Italy and Portugal in recent European Championships. However the statistics are impressive, with England having come through five games at this tournament all without conceding a goal. Some of their play in wide areas was outstanding, with Raheem Sterling and Jadon Sancho -- making his first start at the Euro -- too hot for Ukraine to handle. <p>⏰ RESULT ⏰What. A. Performance. �������������� Kane (2), Maguire & Henderson net in Rome as England reach EURO 2020 se… https://twitter.com/EURO2020/status/1411427976047120387"</p>— UEFA EURO 2020 (#EURO2020) 1625345627000 Kane, their captain, had gone close to eight hours without finding the net for his country but his opener here was his second in just eight minutes following the late strike that secured victory over Germany. Regardless of the opposition, their display at the Stadio Olimpico was a step-up in class in the final third to previous games at the Euro and they will be favourites at home against a Danish side who played their own quarter-final against the Czech Republic on Saturday in distant Baku. This will be the only match England play away from home in the competition and it marked quite a difference to their defeat of the Germans, which was watched by more than 40,000 supporters at Wembley, where coronavirus restrictions were eased. <p>�������������� Two-goal England hero Harry Kane takes the plaudits after inspiring the Three Lions in Rome ��#Heineken |… https://twitter.com/EURO2020/status/1411427976047120387"</p>— UEFA EURO 2020 (#EURO2020) 1625346478000 With Italy currently imposing a five-day quarantine on all arrivals from the United Kingdom, the number of England fans in Rome was limited to those already based in the European Union although they still made themselves heard in the crowd of under 12,000. They had plenty to celebrate, unlike their Ukrainian counterparts, as Andriy Shevchenko's team came up short in their bid to take the country to a first ever major tournament semi-final. They scraped out of their group and then edged 10-man Sweden in extra time in the last 16, and their chances of shocking England looked dead and buried when they fell behind early on. Sterling, who terrorised the Ukraine defence down the left, played in Kane who poked the ball past Georgiy Bushchan. Ukraine's giant striker Roman Yaremchuk forced a save from Jordan Pickford and a Declan Rice piledriver was kept out by Bushchan, with England looking comfortable. However Ukraine were a different proposition after injured defender Serhiy Kryvtsov was replaced by Dynamo Kiev winger Viktor Tsygankov in the 36th minute. They finished the first half strongly and more pessimistic England fans may have spent the interval reliving their exit from Euro 2016, when they lost to Iceland in the last 16 despite also having opened the scoring in the fourth minute. They need not have worried. England scored again less than a minute after the restart when a foul on Kane allowed Luke Shaw to deliver a free-kick from the left for Maguire to head in. Four minutes after that Sterling supplied the overlapping Shaw and he crossed for a rejuvenated Kane to head home. The Tottenham star nearly had his hat-trick, a stinging volley producing a fine save from Bushchan. From Mason Mount's resulting corner came the fourth goal, another header, this time from Henderson, the first of five substitutes sent on by Southgate who would have been thinking about the semi-final long before this quarter-final was officially over. ",
Edit: Based on the reply below this. Let me clarify My server sends me data in the form of json objects with strings in it. I pass this data using ejs tags to their appropriate location to get rendered. I am asking how can i convert every twitter url that winds up in my json object to an embedded tweet.
Edit: This is the json that i received from the server I can render that just fine on my webpage but i cant seem to find a way to convert the hyperlinks to embeded tweet
just add "https://publish.twitter.com/oembed?" before your url as mentioned here.
you can also customize the embedded tweet as described in the link.
the response would be something like
{
"url": "https://twitter.com/Interior/status/507185938620219395",
"author_name": "US Dept of Interior",
"author_url": "https://twitter.com/Interior",
"html": "<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Happy 50th anniversary to the Wilderness Act! Here's a great wilderness photo from #YosemiteNPS. #Wilderness50 pic.twitter.com/HMhbyTg18X</p>— US Dept of Interior (#Interior) September 3, 2014</blockquote>n<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>",
"width": 550,
"height": null,
"type": "rich",
"cache_age": "3153600000",
"provider_name": "Twitter",
"provider_url": "https://twitter.com",
"version": "1.0"
}
and you can use the html property as embed tweet.
I think this should work for you. Twitter provides an api for creating embed html from a tweet url.
const axios = require('axios');
const main = async () => {
const tweetURL = 'https://twitter.com/thejackbeyer/status/1411522480775204866?s=20';
try {
const response = await axios.get(`https://publish.twitter.com/oembed?url=${tweetURL}`);
console.log(response.data.html);
} catch (error) {
console.error(error);
}
}
main();

AngularJS + Json: How to render html

(I know this question was asked many times, but I believe my setup is different and so a new question needed to be asked with a different scenario)
There are plenty of examples out there that shows how to Render HTML, but I can't seem to get this to work with any of the examples. I'd like to render html the {{aboutlongs[0].description}} (this has <br /> tags that I would like to render as html)
Here's the js:
App.controller('aboutLongCtrl', function ($scope, $http) {
$http.get('test_data/ar_org.json')
.then(function (res) {
$scope.aboutlongs = res.data.aboutlong;
});
});
the HTML:
<div class="background-white p20 reasons" ng-controller="aboutLongCtrl" >
<h6><b>About {{aboutlongs[0].name}}</b></h6>
<div class="reason-content" >
{{aboutlongs[0].description}}
</div>
</div>
Can anyone point me to the right direction?
The Json file:
"aboutlong": [{
"name": "Women's March",
"description": "The rhetoric of the past election cycle has insulted, demonized, and threatened many of us - immigrants of all statuses, Muslims and those of diverse religious faiths, people who identify as LGBTQIA, Native people, Black and Brown people, people with disabilities, survivors of sexual assault - and our communities are hurting and scared. We are confronted with the question of how to move forward in the face of national and international concern and fear.<br /><br />In the spirit of democracy and honoring the champions of human rights, dignity, and justice who have come before us, we join in diversity to show our presence in numbers too great to ignore. The Women's March on Washington will send a bold message to our new government on their first day in office, and to the world that women's rights are human rights. We stand together, recognizing that defending the most marginalized among us is defending all of us.<br /><br />We support the advocacy and resistance movements that reflect our multiple and intersecting identities. We call on all defenders of human rights to join us. This march is the first step towards unifying our communities, grounded in new relationships, to create change from the grassroots level up. We will not rest until women have parity and equity at all levels of leadership in society. We work peacefully while recognizing there is no true peace without justice and equity for all.<br /><br />Women's rights are human rights, regardless of a woman's race, ethnicity, religion, immigration status, sexual identity, gender expression, economic status, age or disability. We practice empathy with the intent to learn about the intersecting identities of each other. We will suspend our first judgement and do our best to lead without ego."
}]
Posts I've tried:
How to render a HTML tag from json value using angularJs
Angular.js How to render a HTML tag from json file
AngularJS : Insert HTML into view
if you want to render string to html i recommand to use $sce.trustAsHtml(html).
you can create a sample filter like this
.filter('trustHtml',function($sce){
return function(html){
return $sce.trustAsHtml(html)
}
})
call the filter like this inside ng-bind-html
<div class="reason-content" ng-bind-html="aboutlongs[0].description | trustHtml" ></div>
Demo
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.aboutlongs = [{
"name": "Women's March",
"description": "The rhetoric of the past election cycle has insulted, demonized, and threatened many of us - immigrants of all statuses, Muslims and those of diverse religious faiths, people who identify as LGBTQIA, Native people, Black and Brown people, people with disabilities, survivors of sexual assault - and our communities are hurting and scared. We are confronted with the question of how to move forward in the face of national and international concern and fear.<br /><br />In the spirit of democracy and honoring the champions of human rights, dignity, and justice who have come before us, we join in diversity to show our presence in numbers too great to ignore. The Women's March on Washington will send a bold message to our new government on their first day in office, and to the world that women's rights are human rights. We stand together, recognizing that defending the most marginalized among us is defending all of us.<br /><br />We support the advocacy and resistance movements that reflect our multiple and intersecting identities. We call on all defenders of human rights to join us. This march is the first step towards unifying our communities, grounded in new relationships, to create change from the grassroots level up. We will not rest until women have parity and equity at all levels of leadership in society. We work peacefully while recognizing there is no true peace without justice and equity for all.<br /><br />Women's rights are human rights, regardless of a woman's race, ethnicity, religion, immigration status, sexual identity, gender expression, economic status, age or disability. We practice empathy with the intent to learn about the intersecting identities of each other. We will suspend our first judgement and do our best to lead without ego."
}]
})
.filter('trustHtml',function($sce){
return function(html){
return $sce.trustAsHtml(html)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div class="background-white p20 reasons" >
<h6><b>About {{aboutlongs[0].name}}</b></h6>
<div class="reason-content" ng-bind-html="aboutlongs[0].description | trustHtml" >
</div>
</div>
</div>
Have a look at this awesome article Angular Trust Filter
angular.module('myApp', [])
.controller('aboutLongCtrl', ['$scope', '$sce', function($scope, $sce) {
$scope.aboutlongs = [{
"name": "Women's March",
"description": $sce.trustAsHtml("The rhetoric of the past election cycle has insulted, demonized, and threatened many of us - immigrants of all statuses, Muslims and those of diverse religious faiths, people who identify as LGBTQIA, Native people, Black and Brown people, people with disabilities, survivors of sexual assault - and our communities are hurting and scared. We are confronted with the question of how to move forward in the face of national and international concern and fear.<br /><br />In the spirit of democracy and honoring the champions of human rights, dignity, and justice who have come before us, we join in diversity to show our presence in numbers too great to ignore. The Women's March on Washington will send a bold message to our new government on their first day in office, and to the world that women's rights are human rights. We stand together, recognizing that defending the most marginalized among us is defending all of us.<br /><br />We support the advocacy and resistance movements that reflect our multiple and intersecting identities. We call on all defenders of human rights to join us. This march is the first step towards unifying our communities, grounded in new relationships, to create change from the grassroots level up. We will not rest until women have parity and equity at all levels of leadership in society. We work peacefully while recognizing there is no true peace without justice and equity for all.<br /><br />Women's rights are human rights, regardless of a woman's race, ethnicity, religion, immigration status, sexual identity, gender expression, economic status, age or disability. We practice empathy with the intent to learn about the intersecting identities of each other. We will suspend our first judgement and do our best to lead without ego.")
}];
}])
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" class="background-white p20 reasons" ng-controller="aboutLongCtrl" >
<h6><b>About {{aboutlongs[0].name}}</b></h6>
<div class="reason-content" ng-bind-html="aboutlongs[0].description">
</div>
</div>

Retrieving Extract from Wikipedia API [duplicate]

This question already has answers here:
Accessing an object property with a dynamically-computed name
(19 answers)
Closed 6 years ago.
So I get a JSON response which looks like this:
{
"batchcomplete": "",
"query": {
"pages": {
"97646": {
"pageid": 97646,
"ns": 0,
"title": "Die Hard",
"extract": "Die Hard is a 1988 American action film directed by John McTiernan and written by Steven E. de Souza and Jeb Stuart. It follows off-duty New York City Police Department officer John McClane (Bruce Willis) as he takes on a group of highly organized criminals led by Hans Gruber (Alan Rickman), who perform a heist in a Los Angeles skyscraper under the guise of a terrorist attack using hostages, including McClane's wife Holly (Bonnie Bedelia), to keep the police at bay.\nIt is based on Roderick Thorp's 1979 novel Nothing Lasts Forever, the sequel to 1966's The Detective, which was adapted into a 1968 film of the same name that starred Frank Sinatra. Fox was therefore contractually obligated to offer Sinatra the lead role in Die Hard, but he turned it down. The studio then pitched the film to Arnold Schwarzenegger as a sequel to his 1985 action film Commando; he turned it down, as well, and the studio finally and reluctantly gave it to Willis, then known primarily as a comedic television actor.\nMade for $28 million, Die Hard grossed over $140 million theatrically worldwide, and was given a positive reception from critics. The film turned Willis into an action star, became a metonym for an action film in which a lone hero fights overwhelming odds, and has been named one of the best action movies ever made. The film also ranks #29 on Empire magazine's 2008 list of the 500 greatest movies of all time. The film's success spawned the Die Hard franchise, which includes four sequels (Die Hard 2, Die Hard with a Vengeance, Live Free or Die Hard and A Good Day to Die Hard), video games, and a comic book."
}
}
}
}
Here is the link: https://en.wikipedia.org/w/api.php?format=jsonfm&action=query&prop=extracts&exintro=&explaintext=&titles=Die%20Hard
And I want to just get the extract of the page. The trouble is I don't know the pageid until I get the response, and so cannot call the extract.
To get the extract for this example I would have to do:
var data = JSON.parse(this.response);
console.log(suggestionData.query.pages.97646.extract);
So I have tried to get the value of the page id by making it a variable to add into the query like this:
var data = JSON.parse(this.response);
var pageid = [suggestionData.query.pages[0];
console.log(suggestionData.query.pages. + pageid +.extract);
But this hasn't been successeful as the variable pageid comes up as:
"97646": {
"pageid": 97646,
"ns": 0,
"title": "Die Hard",
"extract": "Die Hard is a 1988 American action film directed by John McTiernan and written by Steven E. de Souza and Jeb Stuart. It follows off-duty New York City Police Department officer John McClane (Bruce Willis) as he takes on a group of highly organized criminals led by Hans Gruber (Alan Rickman), who perform a heist in a Los Angeles skyscraper under the guise of a terrorist attack using hostages, including McClane's wife Holly (Bonnie Bedelia), to keep the police at bay.\nIt is based on Roderick Thorp's 1979 novel Nothing Lasts Forever, the sequel to 1966's The Detective, which was adapted into a 1968 film of the same name that starred Frank Sinatra. Fox was therefore contractually obligated to offer Sinatra the lead role in Die Hard, but he turned it down. The studio then pitched the film to Arnold Schwarzenegger as a sequel to his 1985 action film Commando; he turned it down, as well, and the studio finally and reluctantly gave it to Willis, then known primarily as a comedic television actor.\nMade for $28 million, Die Hard grossed over $140 million theatrically worldwide, and was given a positive reception from critics. The film turned Willis into an action star, became a metonym for an action film in which a lone hero fights overwhelming odds, and has been named one of the best action movies ever made. The film also ranks #29 on Empire magazine's 2008 list of the 500 greatest movies of all time. The film's success spawned the Die Hard franchise, which includes four sequels (Die Hard 2, Die Hard with a Vengeance, Live Free or Die Hard and A Good Day to Die Hard), video games, and a comic book."
}
I also want to use javascript and not jQuery etc.
Try this fiddle : https://jsfiddle.net/u9dnm70b/
var response = '{"batchcomplete": "","query": {"pages": {"97646": {"extract": "abcd" }}}}';
var suggestionData = JSON.parse(response);
var pageid = Object.keys(suggestionData.query.pages)[0];
console.log(suggestionData.query.pages[pageid].extract);
You can use Object.keys(jsonObj); to find out keys.
In your case var pageid is a json object. To access value, take a look at this thread (get keys of json-object in JavaScript)
In short answer is
for key in pageid
content= pageid[key]
extract = content.extract
You can extract pageid like this:
var pageid = Object.keys(suggestionData.query.pages)[0];
Then this should work:
console.log(suggestionData.query.pages[pageid].extract");

how to not select somedata using xpath in webharvest

I am using webharvest with xquery to get a data from a website.
I have the 2 xquery variables with the following data
$text:
<p> <strong>Psoria-Shield Inc.</strong> (www.psoria-shield.com) is a Tampa FL based company specializing in design, manufacturing, and distribution of medical devices to domestic and international
markets. PSI employs full-time engineering, production, sales staff, and manufactures within an ISO 13485 certified quality
system. PSI's flagship product, Psoria-Light®, is FDA-cleared and CE marked and delivers targeted UV phototherapy for
the treatment of certain skin disorders. Psoria-Shield Inc., was acquired by Wellness Center USA Inc. ("WCUI") in August 2012,
and is now a wholly-owned subsidiary.
</p>
<p> <strong>AminoFactory</strong> (www.aminofactory.com), a division of Wellness Center USA, Inc., is an online supplement store that markets and sells a wide range of high-quality
nutritional vitamins and supplements. By utilizing AminoFactory's online catalog, bodybuilders, athletes, and health conscious
consumers can choose and purchase the highest quality nutritional products from a wide array of offerings in just a few clicks.
</p>
<pre>At Wellness Center Usa, Inc.
Tel: (847) 925-1885 www.wellnescenterusa.com Investor Relations Contact:
Arthur Douglas & Associates, Inc.
Arthur Batson
Phone: 407-478-1120 www.arthurdouglasinc.com</pre> </span><span class="dt-green">
and $contact:
At Wellness Center Usa, Inc.
Tel: (847) 925-1885 www.wellnescenterusa.com Investor Relations Contact:
Arthur Douglas & Associates, Inc.
Arthur Batson
Phone: 407-478-1120 www.arthurdouglasinc.com
(This above text is just a example.)
What I want to so is remove the content of $contact from $text so far I have come up with the following code:
{
for $x in $text
return if(matches($contact, '')) then $x
else if(matches($contact, $x)) then '' else $x
}
It is not working. I dont know where I am going wrong. Please let me know the right way of doing this.
Do not use matches(...) for exact string comparison, it is made for regular expressions and you'd need to escape a bunch of special characters.
If the HTML subtree is the exact same, use this:
$text[not(deep-equal(., <pre>{ $contact }</pre>))]
If you only want to compare its contents, use data(...):
$text[not(data(.) = string-join(data($contact)))]
But given the data you posted, you'd be fine just removing all <pre/> nodes:
$text[local-name() != 'pre']

Javascript find a string in a multidimensional array and return that array?

I have an array like
var schedule = [
{date:'9/21/2011',mId:1,title:'Faith, Fraud and Minimum Wage',director:'George Mihalka',startTime:'9:20 PM',length:'91',genre:'Drama',movieType:'Faith, Fraud and Minimum Wage',trailer:'iVs5VL2kH8s',synopsis:'Halifax actor, dramatist and screenwriter Josh MacDonald’s hit play <i>Halo</i> has finally hit the big screen, courtesy of <i>My Bloody Valentine</i> director George Mihalka and legendary producer Colin Neale.\nA tragicomic tale of faith in a skeptical age, <i>Faith, Fraud and Minimum Wage</i> is based on real-life incidents in Nova Scotia that generated international headlines. In the economically depressed town of Nately, a young atheist maverick named Casey discovers the image of Jesus on the outside wall of her coffee-shop workplace. As outside interest builds and Nately finally makes it on the map, Casey’s own strained domestic situation boils to a climax.\nClever, moving and surprisingly respectful, <i>Faith, Fraud and Minimum Wage</i> features sparkling performances from the likes of Picnicface’s Andrew Bush (as the town priest), Callum Keith Rennie (as the dad) and Martha MacIsaac in the central role of Casey.',location:'Parklane',movieTime:'Fri, Sep 3, 7PM',moviePic:'../movies/faithfraudminimumwage/1.png'},
{date:'9/21/2011',mId:2,title:'Mind The Gap',director:'Aaron Au',startTime:'7:00 PM',length:'7',genre:'Drama',movieType:'CBC Atlantic Shorts Gala',trailer:'hbLgszfXTAY',synopsis:'Halifax actor, dramatist and screenwriter Josh MacDonald’s hit play <i>Halo</i> has finally hit the big screen, courtesy of <i>My Bloody Valentine</i> director George Mihalka and legendary producer Colin Neale.\nA tragicomic tale of faith in a skeptical age, <i>Faith, Fraud and Minimum Wage</i> is based on real-life incidents in Nova Scotia that generated international headlines. In the economically depressed town of Nately, a young atheist maverick named Casey discovers the image of Jesus on the outside wall of her coffee-shop workplace. As outside interest builds and Nately finally makes it on the map, Casey’s own strained domestic situation boils to a climax.\nClever, moving and surprisingly respectful, <i>Faith, Fraud and Minimum Wage</i> features sparkling performances from the likes of Picnicface’s Andrew Bush (as the town priest), Callum Keith Rennie (as the dad) and Martha MacIsaac in the central role of Casey.',location:'Oxford Theatre',movieTime:'Fri, Sep 8, 7PM',moviePic:'../movies/faithfraudminimumwage/1.png'},
{date:'9/24/2011',mId:2,title:'Mind The Gap',director:'Aaron Au',startTime:'7:00 PM',length:'7',genre:'Drama',movieType:'CBC Atlantic Shorts Gala',trailer:'hbLgszfXTAY',synopsis:'Halifax actor, dramatist and screenwriter Josh MacDonald’s hit play <i>Halo</i> has finally hit the big screen, courtesy of <i>My Bloody Valentine</i> director George Mihalka and legendary producer Colin Neale.\nA tragicomic tale of faith in a skeptical age, <i>Faith, Fraud and Minimum Wage</i> is based on real-life incidents in Nova Scotia that generated international headlines. In the economically depressed town of Nately, a young atheist maverick named Casey discovers the image of Jesus on the outside wall of her coffee-shop workplace. As outside interest builds and Nately finally makes it on the map, Casey’s own strained domestic situation boils to a climax.\nClever, moving and surprisingly respectful, <i>Faith, Fraud and Minimum Wage</i> features sparkling performances from the likes of Picnicface’s Andrew Bush (as the town priest), Callum Keith Rennie (as the dad) and Martha MacIsaac in the central role of Casey.',location:'Parklane',movieTime:'Fri, Sep 12, 7PM',moviePic:'../movies/faithfraudminimumwage/1.png'},
];
and I have a movie listing, and I want to see if the current movie listings mId is equal to any other mId's in the array schedule, if so return them in an array so I can loop through them and display the other results.
I am a bit confused with how to do this? I assumed you use array.filter but I can't seem to figure it out.
Any help?
array.filter should work. Try the following code:
var filtered = schedule.filter(function(val) {
return val['mId'] != searchMid;
});
where searchMid is the mid you are searching for.

Categories