I am using WordPress as backend API to fetch data, I have an object is v.post.post_content, the console-log is like this: the console logs the v.post.post_content
however, when I tried to use
dangerouslySetInnerHTML={{
__html: v.post.post_content,
}}
the front end does not look good, as it does not have the CSS format.
I tried to use the react-json-pretty package, however, that is for pure JSON, and it is hard to format a json string contains with texts and HTML tags. Is there a better way to do it?
Related
I'm working on an app using Express.js and Handlebars. I want to have a page where you can enter text into a search bar, and the view will update to display the results of your search. The backend part of this is already working - the data is being retrieved just fine - but I'm not sure how to best go about updating the view.
I'm using express-handlebars for this app, so the views are formatted as .handlebars files, and being sent to the client via the res.render method. I have seen examples of, for instance, using a button to fill out a Handlebars template, but these examples use a static HTML file with a template in a script tag; I don't know how to translate that to what I'm working with.
I have a React app embedded in Wordpress page. It pulls content from a JSON api and displays it in various areas.
My problem is that all of the text content that comes from the api displays as escaped charachters i.e & displays where an ampersand should be.
My wordpress page has <meta charSet="utf-8" /> which I would normally expect to convert this, but is having no effecton the React content. Is it because the rendering is done within React? In which case do I need to set React somehow to be using UTF-8?
HTML (including entities) will be rendered as a string when being rendered as an expression:
{htmlString}
In order to parse HTML, there is dangerouslySetInnerHTML prop:
<span dangerouslySetInnerHTML={{__html: htmlString }} />
As the name says, it's unsafe and should be generally avoided. If a string comes from untrusted source or a source that could be exploited, malicious code can be rendered to a client.
The preferable way is to decode entities specifically, e.g. with html-entities:
import { Html5Entities } from 'html-entities';
const htmlEntities = new Html5Entities();
...
{htmlEntities.decode(htmlString)}
The problem could be avoided by not storing HTML entities in the first place if possible.
I am creating a WordPress template, using React. I have a WP Post that looks perfect in DB. To retrieve data from the server I use Axios, using the new API feature included in WordPress.
This is how the title looks in the DB:
Hello world! I'm leaving
This is the code I use to retrieve the title from DB:
axios.get('/paintings-project/wp-json/wp/v2/posts').then(
function(response){
self.setState({posts: response.data})
}
);
This is how the post title looks when rendered:
Hello world! I’m leaving
The char ' is escaped, and the backslash used for escaping is encoded.
On the other hand, when rendering HTML content from the post, the HTML appears as a string, instead of rendered as HTML. Like this:
<h1>Welcome’ to WordPress’.</h1> <p><strong>This is your first
post. Edit or delete it, then start writing!</strong></p> <p> </p>
I expected the WordPress APIs would work straight without need of special encoding / decoding in BE or FE. Am I doing something wrong?
Thanks
React doesn't allow you to render strings as HTML in that way. You're going to have to use the dangerouslySetInnerHTML attribute (docs) to render your HTML string in your component.
Something like:
renderStr() {
return {__html: this.state.dataToRender};
},
render() {
return <div dangerouslySetInnerHTML={renderStr()} />;
}
Bear in mind, as the attribute name suggests, you'll want to make sure that the HTML you're rendering is safe. If it's coming from user input, make sure to sanitize the input before storing/rendering it or you can expose yourself and others to security risks. You can use an NPM dependency like sanitizer or sanitize-html, or you can write a function to do it yourself.
I am trying to scrape this page, I am trying to fetch Color Name, LT. BLUE. From Chrome I see HTML:
<div id="desc-options"><div class="option"><span class="label">Color:</span> LT. BLUE</div><div class="option"><span class="label">Size:</span> 6.5</div></div>
I tried response.css("#desc-options") to access everything inside but returns []. Even BeautifulSoup is failing.
The element you're looking for is dynamically created via JavaScript. You cannot parse it from the plain HTML.
The good news is: the data you're looking for is probably still in the page. Check out the <script> tag defining the spConfig variable. Looks like there's some JSON there you can parse ...
I'd like to be able to pass the URL of an uploaded image in javascript in the tutorial example making a photoblog in meteor.
In that example (in home.js), the helper for templates that render images returns Images.find(), which is used in the image template (image.html) to output html to show the image via:
<img src="{{url}}" />
This works fine, as does the entire tutorial, including S3. However, I'd like to combine it with another project, and that one will require storing and passing around the url under program control.
It would seem that because the template is able to use {{url}}, that in js, one could, in the simplest case, use Images.findOne().url to get at least the first url. E.g., I have modified the given helper to contain this:
Template.home.helpers({
'images': function() {
console.log("url from home helper: = " + Images.findOne().url); //cannot read url property
return Images.find();
}
});
However, this gets the error "cannot read url property..." (and after that, for some reason, the console prints out a huge batch of source code!!) If the template is able to render the field "url" from the collection image object, why can't js see it?
How can I get at the url in javascript?
the url is the function not the property so you have to use Images.findOne().url() not the Images.findOne().url
or
if you are getting the same error that because your findone method return undefined.
There are the possible issues.
Your Images collection are empty.
You did not publish then images and not subscribe the images.
You may be using this call before uploading the images.
I hope this this may solve your issue.