I want to send a variable from Express to Pug.
Therefore I found already that I have to use res.render(), but if I try this, I only get an undefined variable.
In my index.js:
app.post("/example", upload.single("photo"), (req, res) => {
{... some code}
var html = "some text";
res.render("results", {
html: html
});
and in my results.pug I try to show the text as a string:
p "#{html}"
At the moment I only get two "" on my page.
But I need to show the result
Thank you for your help!!!! :)
Your issue is with how you are calling the variable in your pug template. This is the easiest way to do it:
p= html
or
p
div= html
If you really wanted to use interpolation the syntax would be:
p #{html}
I'd bet that if you View Source on your current page you will have something that looks like this:
<p>#{html}</p>
I have a Json file containing many objects and I want to display them using the template literals syntax in ES6. I need to display a set of images but cant passes any URL because it seems to delete the // of the address. Else everything works perfectly.
The problem seems to come from the innerHTML function because when I console log the variable containing the HTML code to be inserted the URL is written perfectly.
I would like to figure out how to fix this and display my images correctly
( the HTML inside the template literal is way longer, I just simplified it for here )
const resultat = document.querySelector('.master-wrapper'); //where the result appear
const html = pokedex.map(pokedex => {
return `
<img src" ${ pokedex.img } "></img> //where the url is inserted
`;
}).join('')
resultat.innerHTML += html;
You are missing the = sign here and because of that the browser renders it as separate attributes removing the slashes.
<img src=" ${ pokedex.img } "></img> //where the url is inserted
My api returns a string of html in which I convert to html with php with the function:
[API ENCODE HTML, IF NOT IS RENDERIZE AS STRING ]
$description = html_entity_decode($description)
After this Json_encode
And return this value to the Ionic 2 app.
In which I take this item and show with:
[APP HTML RECEIVE WITH NO TRAITAMENT IN INNERHTML TO SHOW DESCRIPTION]
<div class="item item-text-wrap" [innerHTML]="item.description"></div>
But some items use as a tooltip in the tag:
<span title="Auxiliary content open per click">click</span>
However, some content breaks due to double quotation marks.
title=" table rowspan="2"></table "
How could I add slashs or a rendition of that html inside the title without breaking it by the quotation marks.
I've already tried modifying your content in the API, but I have not yet been able to render this html.
Is there a way to do this by ionic 2? as ?
Is there a way to do it with regex in php to modify the title only?
Thanks for the help, and sorry for my bad english.
Not result any erros;
Test for the response 1:
let description = this.item.descricao;
this.descricao = description.replace(/'/g, '"');
You can replace your "" with ' as shown below using Javascript/TS.
var result = yourString.replace(/'/g, '"');
I changed my API PHP to create a json file, every time updated content with CKeditor, I override file make.json.
When app request my API, he read this file like this:
public function make(){
if(file_exists("web/uploads/make/make.json")){
$make = file_get_contents('web/uploads/make/make.json');
echo ($make);
}else{
return false;
}
die;
}
So, Thank for help me.
Am trying to output actual json data inside javascript tag dynamically using ajax and php but this is not working anymore meanwhile json data is getting as desired. Actully when I test returned result json data from php script using console.log(response), It prints correct data in firebug console. I also have used JSON.parse(response) and also tried JSON.stringify(response) but nothing is working and not outputting (printing) in javascript script tag if we assign the data usingstackevents: response and when I see the page source code it displays only stackevents: response but not actual output like this below one
stackevents:[{"date":"2013-08-24","type":"arrowDown","graph":"g1","backgroundColor":"#85CDE6","value":"417","description":"This is description of an event"},{"date":"2013-08-25","type":"pin","graph":"g1","backgroundColor":"#85CDE6","value":"417","description":"This is description of an event"},{"date":"2013-08-26","type":"sign","graph":"g1","backgroundColor":"#85CDE6","value":"531","description":"This is description of an event"},{"date":"2013-08-27","type":"arrowUp","graph":"g1","backgroundColor":"#00CC00","value":"333","description":"This is description of an event"},{"date":"2013-08-28","type":"pin","graph":"g1","backgroundColor":"#FFFFFF","value":"552","description":"This is description of an event"},{"date":"2013-08-29","type":"arrowUp","graph":"g1","backgroundColor":"#85CDE6","value":"492","description":"This is description of an event"},{"date":"2013-08-30","type":"pin","graph":"g1","backgroundColor":"#FFFFFF","value":"379","description":"This is description of an event"},{"date":"2013-08-31","type":"pin","graph":"g1","backgroundColor":"#85CDE6","value":"767","description":"This is description of an event"},{"date":"2013-09-01","type":"flag","graph":"g1","backgroundColor":"#85CDE6","value":"169","description":"This is description of an event"},{"date":"2013-09-02","type":"arrowUp","graph":"g1","backgroundColor":"#85CDE6","value":"314","description":"This is description of an event"},{"date":"2013-09-03","type":"arrowDown","graph":"g1","backgroundColor":"#85CDE6","value":"437","description":"This is description of an event"}]
For more clarification, I want like this
stackevents:[{"date":"2013-08-24","type":"arrowDown","graph":"g1","backgroundColor":"#85CDE6","value":"417","description":"This is description of an event"},{"date":"2013-08-25","type":"pin","graph":"g1","backgroundColor":"#85CDE6","value":"417","description":"This is description of an event"},{"date":"2013-08-26","type":"sign","graph":"g1","backgroundColor":"#85CDE6","value":"531","description":"This is description of an event"},{"date":"2013-08-27","type":"arrowUp","graph":"g1","backgroundColor":"#00CC00","value":"333","description":"This is description of an event"},{"date":"2013-08-28","type":"pin","graph":"g1","backgroundColor":"#FFFFFF","value":"552","description":"This is description of an event"},{"date":"2013-08-29","type":"arrowUp","graph":"g1","backgroundColor":"#85CDE6","value":"492","description":"This is description of an event"},{"date":"2013-08-30","type":"pin","graph":"g1","backgroundColor":"#FFFFFF","value":"379","description":"This is description of an event"},{"date":"2013-08-31","type":"pin","graph":"g1","backgroundColor":"#85CDE6","value":"767","description":"This is description of an event"},{"date":"2013-09-01","type":"flag","graph":"g1","backgroundColor":"#85CDE6","value":"169","description":"This is description of an event"},{"date":"2013-09-02","type":"arrowUp","graph":"g1","backgroundColor":"#85CDE6","value":"314","description":"This is description of an event"},{"date":"2013-09-03","type":"arrowDown","graph":"g1","backgroundColor":"#85CDE6","value":"437","description":"This is description of an event"}]
in place of stackevents: response using javascript, jquery, ajax and php.
Thank You.
If you have to call the .php to GET the json data and you want to write that to the script tag of the page, here is an example: https://codepen.io/mix3d/pen/qQNZWQ
I do not cover using PHP to insert the json data into the html as the page is being rendered.
Simply include <script type="application/json" id="myscript"></script> in your html somewhere, and then with the following code, you can accept JSON data from your .php file and insert it into the script tag using innerHTML. Because a script tag is just another DOM element, you can access them with JS just like a div or button.
fetch('https://path-to.your/file.php')
.then(response => response.json())
.then(json => {
console.log(json)
document.getElementById('myscript').innerHTML = JSON.stringify(json,null,2);
})
JSON.stringify()'s 2nd and 3rd parameters are to prettyprint the JSON object into your script tag. If you do not stringify the object first, you will get [object Object] as the content of your script tag, as JS will use type-coercion to get the string of the object.
If the above code using modern JS's fetch is too much, here is an example using jQuery as well:
$.getJSON( "https://path-to.your/file.php", function( json ) {
document.getElementById('myscript').innerHTML = JSON.stringify(json,null,2);
})
Furthermore, if you wanted to go so far as to CREATE the script tag to put the JSON into:
let jsonScript = document.createElement('script');
// if you don't set the type, the browser will try to execute the text as JS instead of JSON.
jsonScript.setAttribute('type', 'application/json');
jsonScript.textContent = JSON.stringify(json);
document.head.appendChild(jsonScript); // or document.body, your choice
You will have to JSON.parse the script content to get any useful data from it though!
I'm dynamically creating the json urls based on what is currently saved inside a browser cookie.
var cookie = $.cookie('faved_posts');
The contents of that cookie are 123456, 111111, 000001, and so on.
Now I'll need to request the json file for each ID that was saved in that cookie.
I have the following:
$.each(cookie, function(i, val){
$.getJSON('/ajax/posts/'+val+'.json', function(data){
var html = "<div>" + data.post.headline + "</div>";
$("#container").html(html);
});
});
I'm able to retrieve all the files
/ajax/posts/123456.json
/ajax/posts/111111.json
/ajax/posts/000001.json
The problem I'm having is I can only render the data.post.headline value from only one of the ajax files.
This is what I need outputted in html:
<div>headline for 123456</div>
<div>headline for 111111</div>
<div>headline for 000001</div>
What is the best way to do something like this? Thanks
$("#container").html(html);
.html() will replace everything that is currently in #container which would mean you would only see the html from the last execution of the loop. I believe you are looking for append() instead.