mongo input name saved as a String - html

when I use console.log(req.body). It says
{
'hero[title]': 'Lorem ipsum <br> Dolor sit amet.',
'hero[description]': 'Dolor sit amet',
uploadon: 'blahblah'
}
but it should look like:
{
hero[title]: 'Lorem ipsum <br> Dolor sit amet.',
hero[description]: 'Dolor sit amet',
uploadon: 'blahblah'
}
do you know the problem?
My HTML looks like:
<div class="field">
<label for="hero[title]">Titel</label>
<input name="hero[title]" type="text">
</div>
<div class="field">
<label for="hero[description]">Beschreibung</label>
<textarea name="hero[description]" id="" cols="20" rows="5"></textarea>
</div>
UPDATE:
my Mongoose Model is:
var mongoose = require('mongoose');
var heroSchema = new mongoose.Schema({
title: String,
description: String,
image: String
});
module.exports = mongoose.model("Hero", heroSchema);
And this is my Route:
app.post("/dashboard/hero", function(req, res) {
Hero.create(req.body, function(err, newlyAdded){
if(err){
console.log(err);
} else {
console.log(newlyAdded);
res.redirect("/dashboard/hero");
}
});
});
I want to embed it into an ejs file.

hero[title] will try to access a variable stored in title and look up a property with it's value in a hero object - which is going to break. That is why it is correctly represented as a string like 'hero[title]' when your request body was parsed to JS object.

Related

Fetch content from MYSQL database not showing line breaks (MYSQL, SEQUALIZE, NODE, HANDLEBARS)

Using a database management tool (HeidiSQL) I can see that the content of an entry is storing returns (good):
MYSQL storing line breaks
However when I read the data on my front-end:
router.get('/story/:id', async (req, res) => {
try {
const getStory = await Story.findByPk(req.params.id, {
include: [
{
model: User,
attributes: ['username'],
},
],
});
const story = getStory.get({ plain: true });
res.render('story', {
story,
logged_in: req.session.logged_in,
});
} catch (err) {
res.status(500).json(err);
}
});
Rendered in Handlebars:
<div class="card">
<div class="card-content">
<p class="title">
{{story.title}}
</p>
<p class="content">
{{story.content}}
</p>
</div>
</div>
It eliminates the line-breaks:
no line-breaks
I'm wondering what I need to do to maintain the linebreaks.
I haven't tried modifying anything yet. I will try encapsulating the handlebars {{story.content}} in a string-literal to see if that does it.
So I found the answer - I needed to add a custom handlebars helper in the server.js
hbs.handlebars.registerHelper('breaklines', function(text) {
text = hbs.handlebars.Utils.escapeExpression(text);
text = text.replace(/(\r\n|\n|\r)/gm, '<br>');
return new hbs.handlebars.SafeString(text);
});
Then pass the content through the helper
<div class="card">
<div class="card-content">
<p class="title">
{{story.title}}
</p>
<p class="content">
{{breaklines story.content}}
</p>
</div>
</div>

Add (click) method to link in text block in Angular component

I have a small problem. I'm getting a text from the server with innerHtml which is inserted in Angular component. Inside of this text, there are possibly some links. Example text block looks like this:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a href="some.link.com">Link<a/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Is there a way to insert a bind there a click action like this?
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a href="some.link.com" (click)="methodName('http://domain.tld/page.html')">Link<a/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Thanks.
If I get you right, you render html loaded from server with innerHtml, in this case you can't use Angular directives inside of this template. But you can add listeners with common JS (document.addEventListener) after content rendering.
#Component({
template: `<div #wrapper [innerHTML]="sanitizedHtml"></div>`
}) class MyComp {
#ViewChild('wrapper') wrapper: ElementRef<HtmlElement>;
ngAfterViewInit() {
const links = this.wrapper.naviveElement.querySelectorAll('a[href]');
links.forEach(link =>
link.addEventListener('click', this.linkClickHandler.bind(this));
);
}
linkClickHandler(event: MouseEvent) {
...
}
}
For dynamic links you can bind your desired url link in you a tag like the following
<a [href]="some.url">Link</a>
If some is an object.
For click event you can have something like
method(url: string) {
window.location.href = url;
}
then you'll pass your url string like (click)="method('http://domain.tld/page.html')"

How to fix json html tag to text converter in angular 7

json data is coming from rest API with html tag like
(content: {rendered: "<p><strong>Destination Covered:</strong> Lorem Ipsum; Dolor</p>↵", protected: false})
how we convert HTML tag to text in angular7
{{x.content.rendered}} in angular 7
<p><strong>Destination Covered:</strong> Lorem Ipsum; Dolor</p>
display code in HTML format
The result should without HTML tag in angular6-7
Destination Covered: Lorem Ipsum; Dolor
Could you use this ? Worked for me
var f = '<p><strong>Destination Covered:</strong> Lorem Ipsum; Dolor</p> ';
var e = document.createElement("div");
e.innerHTML = f;
document.getElementById("foo").innerText = e.innerText;
Please do leme know
simply you can use databinding for innerHTML like this
componenet
hello = "<h1>Hello from 🌍 </h1>"
template
<div [innerHTML]="hello"></div>
demo 🧙‍♂️
here's my solution:
in the file ts
bypassSecurityTrustHtml(text: string) {
return this.sanitized.bypassSecurityTrustHtml(text)
}
and in the html you should implement this html code :
<p> <span [innerHTML]="bypassSecurityTrustHtml(myForm.value.pageContent)"></span></p>
enter code here

Angular 4: outputing data with *ngFor not working

I'm working on this app with HttpClient, which gets data from a local json file containing images and description (the images are also local) I can log the data (in local array), but I'm having trouble outputing it in the view. This is the request:
export class AppComponent {
spaceScreens:Array<any>;
constructor(private http:HttpClient) {
this.http.get('assets/data/data.json')
.subscribe(data => {
this.spaceScreens = data['results'];
console.log(data);
}, (err: HttpErrorResponse) => {
if (err.error instanceof Error) {
console.log('An error occurred:', err.error.message);
} else {
console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
}
});
}
}
The JSON:
{
"screenshots": [
{
"img": "assets/images/space1.jpg",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"liked": "0"
}, //etc
The HTML:
<mat-card *ngFor="let spaceScreen of spaceScreens; let i = index" >
<img mat-card-image src="{{ spaceScreen.img }}">
<mat-card-content>
<p>{{ spaceScreen.description }}</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>
<i class="material-icons md-18" >favorite</i> LIKE
</button>
<button mat-button>
<i class="material-icons md-18">delete</i> DELETE
</button>
</mat-card-actions>
</mat-card>
This is the log:
I guess the issue has to do with the map? But if I try to map the response I get the word underlined. Can someone give me a help? Thank you
this.spaceScreens = data['results'];
should become
this.spaceScreens = data['screenshots'];
to match your json format.
change
<img mat-card-image src="{{ spaceScreen.img }}">
to
<img mat-card-image [src]="spaceScreen.img">
In angular 2+ you should prefer binding to attributes rather then setting them with string interpolation.
Try to use safe-operator ?
<img mat-card-image [src]="spaceScreen?.img">

Dojo/Dijit writing own widget, mixin issues

Just a minor problem, but it drives me nuts. I want to write my own widget using TabContainers. Now it seems, that the mixin-Classes can't call the TabContainer modules and start them. I tried a lots of stuff with different widgets, and it seems that there is just an issue with the TabContainer. Looking at the Doc I wasn't able to figure out whether it is a bug within Dojo or within my code. Nonetheless, this works
<script type="text/template" id="editMultilanguageDialog-form-template">
<form data-dojo-type="dijit.form.Form" data-dojo-attach-point="form">
<button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCut', showLabel: false" type="button">cut</button>
</form>
</script>
...but this doesn't!
<script type="text/template" id="editMultilanguageDialog-form-template">
<form data-dojo-type="dijit.form.Form" data-dojo-attach-point="form">
<div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%;">
<div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data-dojo-props="selected:true">
Lorem ipsum and all around...
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="My second tab">
Lorem ipsum and all around - second...
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="My last tab" data-dojo-props="closable:true">
Lorem ipsum and all around - last...
</div>
</div>
</form>
</script>
The code called within the dialog.js looks like this:
define([ "modules/waitingDialog/dialog", "util/debugger", "stores/userStore",
"util/storeCache", "dojo/Evented", "dijit/Dialog", "dojo/_base/lang",
"dojo/_base/declare", "dijit/_Widget", "dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin", "dojo/dom", "dojo/_base/Deferred",
"modules/editMultilanguageDialog/controller", "stores/facultyStore",
"stores/degreeStore", "stores/beginOfStudyStore" ], function(wait,
debug, userStore, storeCache, Evented, Dialog, lang, declare, widget,
templatedMixin, widgetsInTemplateMixin, dom, Deferred,
editMultilanguageController, facultyStore, degreeStore,
beginOfStudyStore) {
return declare("editMultilanguageDialog", [ Dialog, Evented ], {
attributeMap : lang.delegate(widget.prototype.attributeMap, {
message : {
node : "messageNode",
type : "innerHTML"
}
}),
constructor : function(/* Object */kwArgs) {
debug.log("constructor called",
"editMultilanguageDialog.constructor()", 1);
lang.mixin(this, kwArgs);
var controller = new editMultilanguageController(kwArgs);
this.controller = controller;
var dialogTemplate = dom.byId("dialog-template").textContent;
var formTemplate = dom
.byId("editMultilanguageDialog-form-template").textContent;
var template = lang.replace(dialogTemplate, {
form : formTemplate
});
var contentWidget = new (declare([ widget, templatedMixin,
widgetsInTemplateMixin ], {
templateString : template,
widgetsInTemplate : true
}));
var content = this.content = contentWidget;
this.form = content.form;
contentWidget.startup();
}, [...]
This problem is driving me nuts. Thought anyone may have experienced same issues by writing custom widgets. Thx in advance!