Develop Reference

React - dynamically set backgroundImage from JSON response

I am getting data from my Wordpress API to display in my react app. I am trying to display the post featured image as a background-image on an element and can't seem to get it to work.
Here's an example of the JSON response:
{
"id": 1,
"title": {
"rendered": "My First Post"
},
"featured_image": "http://example.com/wp-content/uploads/2019/08/featured.jpg"
}
And here's what I have tried based on this question to set the background image:
<div className="featured-image" style={{backgroundImage: 'url(${this.props.post.featured_image})'}}></div>
When I inspect the element, it appears that the JSON isn't being parsed because this is what it looks like:
<div class="featured-image" style="background-image: url("${this.props.post.featured_image}");"></div>

You are using as string, not template string.
Try this:
<div
className="featured-image"
style={{
backgroundImage: `url(${this.props.post.featured_image})`
}}>
</div>

Fetch url locally in angular

I am working with simple Angular project. I have JSON file of data
[{
"name": "Little Collins",
"area": "Bronx",
"city": "New York",
"coverImage": "https://images.unsplash.com/photo-1576808597967-93bd9aaa6bae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1241&q=80"}]
This is the interface i am using
export interface IRestaurant{
name: string,
area: string,
city: string,
coverImage: string}
But i am not able to load that cover image url. I am getting empty list.
<ul *ngFor="let restaurant of restaurants">
<li>{{restaurant.name}} - {{restaurant.area}} - {{restaurant.city}}</li>
<li>{{restaurant.coverImage}}</li>

Image file is not directly load in HTML, so you need <img> tag to load image as following..
<img src="{{restaurant.coverImage}}" />

Try like this:
<li>
<img [src]="restaurant.coverImage" />
</li>
Working Demo

Image file cannot load directly, so you need tag :
<ul *ngFor="let restaurant of restaurants">
<li>
<img [src]="restaurant.coverImage" height="300"/>
</li>
</ul>

render HTML from mySQL to display on a page Angular and JavaScript

I am using Angular for front end, and node for back end. I am getting the data from a mySql db, where I have manually stored it in text format but with HTML tags on it i.e:
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
The data is currently in JSON format i.e:
{
"data": [
{
"id": 1,
"sort_order": 0,
"content_type": "main_message",
"heading": "Welcome to our site ",
"content": "<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>",
"page_name": "home",
"author_id": "abhatti",
"date_created": "2017-03-13T15:12:00.000Z",
"date_modified": "2017-03-13T15:12:00.000Z",
"modified_by": "abhatti"
},
{
"id": 2,
"sort_order": 0,
"content_type": "main_body_content",
"heading": "Announcements",
"content": "",
"page_name": "home",
"author_id": "Robert",
"date_created": "2016-12-31T17:00:00.000Z",
"date_modified": "2017-03-11T07:08:00.000Z",
"modified_by": "Danny"
},
when I put the data in the table , I want the table to show the data in HTML format , but it shows in raw format with all the HTML tags visible on the page like this
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
but I want something like this
item1
item2
item3
How can I convert the data properly so it is read by the browser as HTML? Right now it is put in as a string.

By default AngularJS (1.2+) will interpolate HTML as text.
This function is built into AngularJS to avoid XSS concerns, however there are times (such as in your case here) where you may actually want to render HTML in your template instead of displaying it as text.
To do so, take a look at AngularJS' $sce library. In your controller you can specify that you want to trust the data you retrieved from MySQL as HTML:
$scope.explicitlyTrustedHtml = $sce.trustAsHtml('<div><span>Hello World!</span></div>');
In your template be sure to bind using ng-bind-html:
<div ng-controller="MyController as myCtrl">
<div ng-bind-html="myCtrl.explicitlyTrustedHtml"></div>
</div>
If you absolutely need to, you can disable $sce for the entire application, however this is highly discouraged for security purposes. To do so inject $sceProvider, add the following line to your main module's configuration block:
$sceProvider.enabled(false);
Although the $sce library is helpful, my advice would be to find a better way to restructure your data in MySQL so that you're not asking it for HTML. If you're only ever reading the data -- you might be okay from a security perspective. However, if you're allowing users to POST HTML snippets from your AngularJS application and are persisting these snippets in MySQL, you're asking for XSS attacks.

How do you populate a hidden div using handlebars data?

The handlebars data shows up fine on the static page, but the problem is I also have a modal, and the data is not being populated correctly on the modal.
I am using the avgrund modal (you can view the Codepen here)
main.js - handlebars code
var projectData = [
{
id: "0",
name: "Jack",
},
{
id: "1",
name: "Sally",
},
];
var theTemplateScript = $("#project-template").html();
var theTemplate = Handlebars.compile(theTemplateScript);
$("#content").append(theTemplate(projectData));
index.html
<div id="content">
<script id="project-template" type="x-handlebars-template">
<div class="pile">
{{#each this}}
<a onclick="avgrund.activate( 'stack' );">
<div class="box box{{id}}">
<span class="project_name project_name{{id}}">{{name}}</span>
</div>
</a>
<aside class="avgrund-popup">
<h2>{{name}}</h2>
<p>
You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.
</p>
</aside>
{{/each}}
</div>
</script>
</div>
Problem
The div boxes will show up fine, but whenever I click the boxes so that the modal appears, the modal only displays the last element in projectData.
I've been able to have the data appear fine when I use bootstrap modals, but for some reason not the avgrund modal.
Hint at a possible solution?
I think the answer to this StackOverflow q: how to populate hidden form field hints as something that might work, e.g. pulling out the data and re-inserting it in the avgrund modal code, as such
var data = {
"Value": [
{"Id": "6b7", "Notes": "testing", "CreatedBy": "User1"},
{"Id": "6b7", "Notes": "Testing 1", "CreatedBy": "User2"}
]};
data.Id = data.Value[0].Id;
var tmpl = Handlebars.compile($('#template').html());
var html = tmpl(data);
But I don't fully understand the answer and wasn't able to get it to work. Could someone point to some approaches or guiding principles that might be helpful?

Here's a fiddle that shows a working example: http://jsfiddle.net/9f9w1trs/
As pointed out by Roamer-1888 you had an extra closing </div> in there. You didn't include the code that actually compiles the template and populates it.
The basic idea is that you define a template - like you did
<script id="project-template" type="x-handlebars-template"> ....</script>
Then you "compile" the template (you can pre-compile them for performance reasons or if you'd like to only use the lightweight run-time library opposed to the full library).
var source = $("#project-template").html();
var template = Handlebars.compile(source);
and then you can populate your template with data ...
var populatedHtml = template(projectData);
and finally you add your populated HTML to the DOM
$('#myContent').append(populatedHtml);
Handlebars doesn't really care if you add it to a hidden div or not - it just replaces contents between {{}} ;)

Filter HTML out of JSON object with AngularJS

I'm currectly working on a Wordpress project. But for a nice change I'm working with a JSON API, which only gives me the information I need.
I'm only facing one problem at the moment. The content part in my JSON contains HTML tags, which get printed on the screen, without actually using the HTML tags.
The JSON output looks like this:
[{
"ID": 11,
"title": "test",
"status": "publish",
"type": "page",
"author": {
"ID": 1,
"name": "admin",
"slug": "admin",
"URL": "",
"avatar": "http:\/\/0.gravatar.com\/avatar\/401f2b3c91dee8969b193544c3d9a636&d=404&r=G",
"meta": {
"links": {
"self": "http:\/\/geertvandelangenberg.nl\/wp\/wp-json.php\/users\/1",
"archives": "http:\/\/geertvandelangenberg.nl\/wp\/wp-json.php\/users\/1\/posts"
}
}
},
"content": "<p>testtt<\/p>\n",
}]
My HTML looks like this:
<script src="http://geertvandelangenberg.nl/wp/wp-content/themes/twentythirteen/js/angular.min.js"></script>
<script>
function PostsCtrlAjax($scope, $http) {
$http({method: 'GET', url: 'http://geertvandelangenberg.nl/wp/wp-json.php/pages/'}).success(function(data) {
$scope.posts = data; // response data
});
}
</script>
<div id="ng-app" ng-ap- ng-controller="PostsCtrlAjax">
<div ng-repeat="post in posts">
<h2>
<a href='{{post.link}}'>{{post.title}}</a>
</h2>
<div class="time">
{{post.date}} - {{post.author.name}}
</div>
<p>{{post.content}}</p>
</div>
</div>
Could anyone tell me how I can filter out the HTML tags in the JSON object?
Thanks in advance!
Geert
EDIT
Thanks for you comments so far, could anyone please edit this jsbin, I can't seem to manage to get this to work, even with the AngularJS docs. I'm still quite noobish with Angular, but if someone would help me, it'd be much appreciated :)
jsbin.com/oRoqIJEC/1/edit
PS. output does not work on jsbin because of stupid Access-Control-Allow-Origin issues..

ng-bind-html will render your HTML. Don't forget to inject ngSanitize into your controller though.