I want to display related artists on my Backbone View by using Spotifys API. So far so good, I managed to get the API/JSON data loaded, but I cant get it displayed in my Handlebars template yet, I get an empty HTML template and I dont know what I'm doing wrong?!?
Here is my Backbone Collection:
ArtistRelated.Collection = Backbone.Collection.extend({
url: function() {
return 'https://api.spotify.com/v1/artists/1HY2Jd0NmPuamShAr6KMms/related-artists';
},
parse: function(artists){
return artists;
}
});
And my Handlebars HTML:
{{#each this}}
<img src="{{images.url}}" alt="{{name}}">
<div>
<h3>{{name}}</h3>
</div>
{{/each}}
The API I took as an example:
https://api.spotify.com/v1/artists/1HY2Jd0NmPuamShAr6KMms/related-artists
What am I doing wrong?
Ok I solved it myself:
After adding/changing the parse method of the collection into:
parse: function(response){
return response.artists;
}
and the Handlebars template:
{{#each this}}
<img src="{{this.images.[0].url}}" alt="{{this.name}}">
<div>
<h3>{{this.name}}</h3>
</div>
{{/each}}
it now works! :-)
Related
I'm using express to render a page in my node app and have sent an array to the client-side. I'm wondering how I can display each element as a paragraph in the HTML.
What I tried is below, but it does not work. When my results array is five elements long, I can see in Safari's Inspect Element that five p tags are created but they are empty.
Note that the results array was initiated and populated.
Node:
const app = express();
app.post('/home', (req, res) => {
...
// results array gets populated here
...
res.render('home', {results: results});
});
HTML:
<div class="results">
{{#each results}}
<p>{{r}}</p>
{{/each}}
</div>
That looks like you're using handlebars as your view template engine? If so, you've not define r at all.
Assuming results is an array of objects such as [{val: "hello"}] you can do {{val}} inside your p tag. If it's just a single value, not an object, then try using {{this}}.
For a complete example:
<div class="results">
{{#each results}}
<p>{{this}}</p>
{{/each}}
</div>
Or
<div class="results">
{{#each results}}
<p>{{val}}</p>
{{/each}}
</div>
I'm working on a website using a MEAN stack, and now I am trying to show some MongoDB data in my HTML pages by using Angular. But I don't seem to get it done.
This is the data in MongoDB I want to show in my HTML
{
"badkamer" : {
"block1" : {
"title" : "Badkamer",
"content" : "string"
}
}
}
This is the Angular function retrieving the data:
app.controller('cityCtrl', function($scope,$http){
$scope.specials = function(){
$scope.special = [];
$http.get('/specialdata').then(function(d){
$scope.special = d.data;
console.log(d.data);
},function(err){
console.log(err);
});
};
});
This is where I want it to show in my HTML:
<div ng-controller="cityCtrl" ng-init="specials()" ng-bind="special">
<div class="title">{{special.badkamer.block1.title}}</div>
<p>{{special.badkamer.block1.content}}</p>
</div>
</div>
When i console.log(d.data), I get this:
[Object]
0: Object
badkamer: Object
block1: Object
content: "Text",
title: "Badkamer"
But when I try it like this, the bind option shows all the data at once in my HTML. How can I get it working by using the Angular {{}} tags?
From the console.log, you can see that its an array, so you will need to use index, like this,
<div ng-controller="cityCtrl" ng-init="specials()" ng-bind="special">
<div class="title">{{special[0].badkamer.block1.title}}</div>
<p>{{special[0].badkamer.block1.content}}</p>
</div>
</div>
or change the code in controller.,
$scope.special = d.data[0];
I am trying to decode html entities in Angular, and seen some solutions for some strings with Sanitize, but I have a lot of JSON documents in my db with that I need sanitized. How can I do this? Right now my html shows the full
<h2>Badkamer</h2>
inclusive the tags.
This is a part of my json document
{
"badkamer" : {
"content" : "<h2>Badkamer</h2>"
<p>text</p>
}
}
This is my angular controller
app.controller('DataCtrl', ['$sce', function($scope,$http,$sce){
$scope.specials = function(){
$scope.special = [];
$http.get('/specialdata').then(function(d){
$scope.special = d.data[0];
console.log(d.data);
},function(err){
console.log(err);
});
};
}]);
This is the page where I show my data from MongoDB
<div class="align-content-inner">
<div>
{{special.badkamer.content}}
</div>
</div>
You need to include angular-sanitize.js script in HTML, and ngSanitize module on your app.,
Like :
var app = angular.module('myApp', ['ngSanitize']);
and use ng-bind-html directive.., like:
<div ng-bind-html="special.badkamer.content"></div>
See this demo plunker.
I used get json in ionic.
$http.get($scope.webServiceUrl+"example.php")
.then(function(response){
$rootScope.lists = response.data;
});
I wrote the webservice with php
echo json_encode($data,JSON_HEX_TAG);
return json data and print page
text: "<h1>enes</h1>"
Json [{"id":"0","text":"<h1>enes</h1>"}]
jsonviewer Image
Result when I print to the page
enter image description here
Does not accept is html element. How can i solve?
I think you have to use ng-bind-html directive if you are sure it's safe and can be rendered as unencoded HTML.
<div ng-controller="ExampleController">
<p ng-bind-html="myHTML"></p>
</div>
I have got my data from my controller like below.
controller:
$http.get('json/projects.json').success(function(data) {
$scope.projects = data;
});
my data in json file is something like this:
json:
{
...
projects = ['hello world', 'www.google.com', 'hello world.']
}
html:
<div ng-repeat='p in projects'> {{p}} </div>
My question is how to display 'www.google.com' as a link rather than a simple text?
You can use the liky filter from the ngSanitize module: https://docs.angularjs.org/api/ngSanitize/filter/linky
I am afraid you will have to change your 'www.google.com' to 'http://www.google.com'