(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>
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>";
JSFiddle
I am using Facebook's API to pull in daily crime reports from my county's police department page. They follow a mostly standardized format, with the following patterns being what I'm going off of, and a few annoying inconsistencies:
The header is between 3-4 lines followed by two new line characters \n\n (The code cuts this out and is not part of the output below)
Different categories of crimes committed are grouped together with the first line being a capitalized string describing the types of crimes. Each category is separated by two new line characters \n\n above it.
Actual crimes committed follow the category title described above, each (most of the time) separated by one new line character \n
As an "artifact" of whatever they are copying and pasting from, a few times there are various unicode characters substituting the hyphen, including \u2013, \u2014 and \u2015
All crimes reported start with the string "BEAT", or on rare occasion "Beat"
The problem that I am running into is that sometimes the code below catches a category title detailed in #2 above, yet in other posts, the (seemingly) exact same string and circumstances doesn't catch. The angular code I'm using in a service can be seen below
me.parsePosts = function() {
var posts = facebookService.getRandomPosts(); // Just a method to return 5 random reports for now
angular.forEach(posts, function(post) {
// Some reports are incorrectly double spaced and inconsistent
// with spacing and capitalization
var fixedPost = post.message
.replace(/^Beat/, 'BEAT') // They were a little inconsistent back in the day
.replace('\n\n###', '') // All posts end with a useless ###
.replace('\u2013', '-') // Pesky unicode characters!
.replace('\u2014', '-')
.replace('\u2015', '-')
.replace('\n\nARRESTED', '\nARRESTED') // would help if this was consistent
.replace(/(?:\\[rn ]|[\r\n ]+)BEAT/gi, '\nBEAT'), // same with the reports...
postSplit = fixedPost.split('\n\n'), // split up the post into potential categories
header = postSplit.splice(0,1); // I don't want the standard header of the post
// Pass in postSplit .join()'d back together for debugging
me.getCategoriesFromPost(postSplit, postSplit.join('\n\n'));
});
};
me.getCategoriesFromPost = function(postArray, post) {
var categoryRegexp = /[A-Z\-&\/: ]+$/,
categories = [], uniqCategories = [];
angular.forEach(postArray, function(a) {
var split = a.split('\n'), // Extract the category from the list of crimes
potentialCategory = split[0].trim(); // There's often an unwanted trailing space
if (potentialCategory.match(categoryRegexp)) {
categories.push(potentialCategory);
}
});
// Every blue moon they repost a category twice, I just want one
// and I'll merge the two together afterwards
uniqCategories = categories.filter(function(a,b) {
return categories.indexOf(a) == b;
});
console.log(uniqCategories); // log off all the categories in the post
console.log(post); // Display the actual post so i can visibly verify it all worked
};
So as an example, in one post:
console.log(uniqCategories); (original raw text as received from facebookService.getRandomPosts()):
BURGLARY COMMERCIAL
BEAT E1 SPRINT WIRELESS, 7300 ASSATEAGUE DR, 3/19 0426: Unknown suspect(s) gained entry to the business by breaking the glass door. The suspect(s) stole electronics. 14-25638
BEAT D6 MONTPELIER LIQUORS, 7500 MONTPELIER RD, 3/19 0513: Unknown suspect(s) gained entry to the business by breaking the glass door. The suspect(s) stole liquor, lottery tickets, and an ATM machine. 14-25641
BEAT D4 MACY’S, 10300 LITTLE PATUXENT PKWY, 3/19 0501: Two unknown male suspects, wearing masks, gained entry to the business by breaking the glass door. The suspects were interrupted by a store employee and fled without taking anything. 14-25642
SUSPECT VEHICLE: black Dodge pickup
BURGLARY NON COMMERCIAL
BEAT B3 6600 ASPERN DR, 3/17 2354: Four suspects gained entry to the residence via unknown means. No sign of forced entry. 14-25220
ARRESTED:
Karlin Lamont Harris, 23, of Pirch Way in Elkridge, charged with fourth-degree burglary
Steven Lee Hubbard, 29, of Edgewater, charged with fourth-degree burglary
Jessie Tyler Holt, 22, of Pine Tree Rd in Jessup, charged with fourth-degree burglary
Brittney Victoria McEnaney, 26, of Pasadena, charged with fourth-degree burglary
BEAT C1 6900 BENDBOUGH CT, 3/18 1400: Unknown suspect(s) gained entry to the residence via the front door. No sign of forced entry. The suspect(s) stole jewelry. 14-25392
BEAT B4 7100 DEEP FALLS WAY, 3/18 1100-1440: Unknown suspect(s) gained entry to the residence by forcing a rear basement window. The suspect(s) stole jewelry and electronics. 14-25404
VEHICLE THEFT & ATTEMPTS
BEAT E2 7-11, 9600 WASHINGTON BLVD, 3/18 0409:
05 Acura Tag 1AV8629 14-25277 (Keys left in vehicle.)
And console.log(post); returns
["BURGLARY COMMERCIAL", "BURGLARY NON COMMERCIAL", "VEHICLE THEFT & ATTEMPTS"]
Yet on another post, console.log(uniqCategories); (original raw text as received from facebookService.getRandomPosts()):
ROBBERY COMMERCIAL
BEAT B3 ZIPS DRY CLEANING, 6500 OLD WATERLOO RD, 3/22 1900: An unknown suspect entered the business through an unlocked rear door. The suspect threatened an employee and demanded cash. The employee complied. The suspect fled the business. 14-26959
SUSPECT: B/M, 5’8-5’9, black hoodie and pants, backpack
ROBBERY NON COMMERCIAL
BEAT E7 7-11 PARKING LOT, 9100 MAIER RD, 03/23 1632: Suspect stole cash from an acquaintance and caused an abrasion with an unknown sharp object. Police are investigation the possibility it may be drug related. 14-27243
SUSPECT: B/M, 5’8, 200 lbs, dreadlocks
BURGLARY COMMERCIAL
BEAT E1 MEGATELECOM, 8600 WASHINGTON BLVD #106, 3/22 0933: Unknown suspect(s) gained entry to the business by breaking a window. The suspect(s) stole electronics. 14-26793
BEAT F3 CATTAIL CREEK COUNTRY CLUB, 3600 CATTAIL CREEK DR, 03/22 1600- 03/23 0630: Unknown suspect(s) gained entry to a garage through an unlocked door. The suspect(s) stole golf carts. 14-27127
BURGLARY NON COMMERCIAL
BEAT E2 9300 BREAMORE CT, 03/21 1210 ATTEMPT: Two suspects attempted to gain entry via a rear slider. The resident yelled and the suspects fled, but were later caught by police. 14-26458
ARRESTED:
Travis Donte Mackell, 23, of Baltimore, charged with fourth-degree burglary
Maurice Debuiel Aye, 26, of Baltimore, charged with fourth-degree burglary
BEAT D3 5500 COLUMBIA RD, 3/21: An unknown suspect gained entry to the residence through an unlocked rear slider. The suspect woke the resident, who ultimately got the suspect to leave. It appears he may have entered the wrong residence. 14-26712
SUSPECT: B/M, 5’8, 200 lbs
BEAT B4 7500 HEARTHSIDE WAY, 3/22 1700- 1800: Three unknown black male suspects stole a bicycle, which was unsecured on a bike rack. 14-27185
BEAT E3 9100 BRYANT AVE, 3/23 2213: Unknown suspects gained entry to the residence by prying open the kitchen window. Nothing appeared to be taken. 14-27308
BEAT B3 8000 KEETON RD, 3/23 1930- 2230: Unknown suspect(s) gained entry to the residence through an unlocked window. The suspect(s) stole a computer and jewelry. 14-27314
BEAT A3 9000 FREDERICK RD, 3/23 0205: The suspect kicked in an acquaintance’s door after a verbal altercation and assaulted him. 14-27361
ARRESTED: Michael Wilson Sittig, 34, of Frederick Road in Ellicott City, charged with second-degree assault, third- and fourth-degree burglary, malicious destruction of property, and disorderly conduct
VEHICLE THEFT & ATTEMPTS
BEAT D2 5100 ELIOTS OAK DR, 03/22 2130- 3/23 0700:
12 Hyundai Sonata Red MD 5AN2945 14-27135
and console.log(post) only returns:
["ROBBERY COMMERCIAL", "VEHICLE THEFT & ATTEMPTS"]
I expect it to return ["ROBBERY COMMERCIAL", "ROBBERY NON COMMERCIAL", "BURGLARY COMMERCIAL", "BURGLARY NON COMMERCIAL", "VEHICLE THEFT & ATTEMPTS"]
In that instance, it's clear that my code matches the former instances of BURGLARY COMMERCIAL and BURGLARY NON COMMERCIAL, but not the latter. What gives? Also, feel free to correct me and tell me I'm doing it all wrong with the wall of .replace(), and that there's a better way to do it, if there is. Thanks a bunch for the help!
String.replace replaces the FIRST occurrence. You need to change all your String.replace with a regex to replace all occurrences. Something like this (although I'm not sure how the unicode chars work in regex):
post.message
.replace(/^Beat/ig, 'BEAT') // They were a little inconsistent back in the day
.replace('/\n\n###/g', '') // All posts end with a useless ###
.replace('/\u2013/g', '-') // Pesky unicode characters!
.replace('/\u2014/g', '-')
.replace('/\u2015/g', '-')
.replace('/\n\nARRESTED/g', '\nARRESTED') // would help if this was consistent
.replace(/(?:\\[rn ]|[\r\n ]+)BEAT/gi, '\nBEAT'), // same with the reports...
You were missing a few more delimiter replacements before your split. Namely, I added:
post.message
...
.replace( /\s*\n\s\n/g, '\n\n')
.replace(/\s BEAT/g, 'BEAT') ...
See updated fiddle
TL;DR; (updated based on comments)
If you look at the messages after the original replace(...) function calls, and before the .split('\n\n'), some of them have a blank space at the very end followed by a newline, then another blank, and newline.
None of your original replace() took care of that. Also, some only had a newline, blank, newline pattern (& why the first space in the regex has a *). Then, some of the BEAT keywords in the message were preceded by one or more blanks so we are removing those to ensure that BEAT is always preceded by a newline.
If you un-comment out the logging lines in the fiddle and comment out the fix, you will see the array of elements at each step.
In one of those, you will see that one array element contains not only what we expect (one report) but the next category is embedded there as well (which is why you would see fewer).
Then I just tried to see what was different about those line endings and checking if the replace() functions took care of them before the split(...) call...
Let me know if you want me to explain it better.