Render Basic HTML View

Render basic HTML view?

You can have jade include a plain HTML page:

in views/index.jade

include plain.html

in views/plain.html

<!DOCTYPE html>
...

and app.js can still just render jade:

res.render(index)

How to render basic HTML code with html elements in a view

Use filter:

// Filter to enable HTML tags
app.filter('unsafe', function ($sce) {
return function (val) {
return $sce.trustAsHtml(val);
};
});

Then include this within your HTML tag along with filter ('unsafe' in this case), for example:

<!-- i.detail will be your valuable -->
<div ng-bind-html="i.detail | unsafe"></div>

rendering returned html code to be shown as a view

Please try using

<p>{{{cookie_data}}}</p>

Please refer this doc: http://handlebarsjs.com/#html-escaping

Please use

res.render('page', 'params')

Why does GitHub's view raw not render html in the browser?

GitHub's web server response returns a Content-Type header of text/plain.

The web browser doesn't render based on the .html file extension. It's based on the Content-Type.

To see the headers, try this:

curl -D- -o/dev/null -s YOUR_URL_HERE

Render HTML Page with Json data

It looks like you are not passing the array (ChatList) to your view.
You can do that by changing your code to this:

...
getChatData(Chats,mittente).then(ChatList=>{
console.log("Lista2: " +ChatList);
res.render('chatlist', {objects: ChatList}) ;
})
...

By doing this an array "objects" will be available in your view and you can iterator over it.

Your page now should become:

<section id="gigs" class="container">
<h1>Chats Available</h1>

{{#each objects}}
<h1>{{./Nome}}</h1>
<div class="form-group">
<form method="POST" action="/users/chat">
<p>Utente numero : {{@index}}</p>
<label for="name" value={{./Nome}}>{{./Nome}}</label>

</form>

</div>
{{/each}}
</section>

Loading basic HTML in Node.js

I just found one way using the fs library. I'm not certain if it's the cleanest though.

var http = require('http'),
fs = require('fs');


fs.readFile('./index.html', function (err, html) {
if (err) {
throw err;
}
http.createServer(function(request, response) {
response.writeHeader(200, {"Content-Type": "text/html"});
response.write(html);
response.end();
}).listen(8000);
});

The basic concept is just raw file reading and dumping the contents. Still open to cleaner options, though!

Render HTML in React Native

Edit Jan 2021: The React Native docs currently recommend React Native WebView:

<WebView
originWhitelist={['*']}
source={{ html: '<p>Here I am</p>' }}
/>

https://github.com/react-native-webview/react-native-webview

If you don't want to embed a WebView, there are also third party libraries to render HTML into native views:

  1. react-native-render-html
  2. react-native-htmlview

Edit March 2017: the html prop has been deprecated. Use source instead:

<WebView source={{html: '<p>Here I am</p>'}} />

https://facebook.github.io/react-native/docs/webview.html#html

Thanks to Justin for pointing this out.


Edit Feb 2017: the PR was accepted a while back, so to render HTML in React Native, simply:

<WebView html={'<p>Here I am</p>'} />

Original Answer:

I don't think this is currently possible. The behavior you're seeing is expected, since the Text component only outputs... well, text. You need another component that outputs HTML - and that's the WebView.

Unfortunately right now there's no way of just directly setting the HTML on this component:

https://github.com/facebook/react-native/issues/506

However I've just created this PR which implements a basic version of this feature so hopefully it'll land in some form soonish.



Related Topics



Leave a reply



Submit