Url insertion in ES6 Template literlals - javascript

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

Related

How can i insert html code in a html file in expressjs?

I am trying to insert the cihantoker tag if there are no orders but it doesn't work.
I want to insert the h1 tag into a html file so res.send() does not work because it inserts the h1 tag on a empty website.I tried to make it with data_8+cihantoker
(data_8 is a variable for the html file) but it didn't work.How can I do this ?
var order_count=order_count_result[0];
//TODO:If there is no orders
if(order_count==0){
data_8=data_7.replace("#no-ordered-food-div{display: none;}","no-ordered-food-div{display:inline-block;}");
res.write(data_8+"<h1 id='cihantoker-text'>cihantoker</h1>");
res.end();
}

if + is not working chances are data8 is an object not a string.
try:
let h1 = "<h1 id='cihantoker-text'>cihantoker</h1>";
let result = data8.concat(h1);
res.write(result);
res.end();
}
see if it throws an error like concat is not a method

How to render the quill js content using go buffalo framework

The options that i am aware of are,
Get the content of the quilljs from getContents api which gives the JSON structure. I can post this to server and store it in server.
Get the innerHTML of the div which is passed to Quill editor and store it.
Approach 1:
While displaying it back I need to write the content in my buffalo template in a variable like
<script> var contentJSON = "<%= content %>"</script>
Then once the page loaded I need to set the contents like quillInstance.setContents(contentJSON)
Approach 2:
Incase the request is compromised then the html may contain scripts unescaped. So if I try like this
c.Set("getContent", func(content string) template.HTML {
return template.HTML(html.EscapeString(content))
})
This escapes all the html entities. So all the div, styles introduced by quill js also gone with this. So the whole content looks just like a plain string.
Whats the right approach in storing the content? I am looking for a way to get this rendered in the server.

Finally i end with the following,
Helpers: render.Helpers{
"quil_for": func(content string) template.HTML {
content = strings.ReplaceAll(content, "<script>", "<script>")
content = strings.ReplaceAll(content, "<a>", "<a>")
content = strings.ReplaceAll(content, "</a>", "</a>")
content = strings.ReplaceAll(content, "</script>", "</script>")
return template.HTML(content)
},
},
instead of this
c.Set("getContent", func(content string) template.HTML {
return template.HTML(html.EscapeString(content))
})
This escapes only the script and the anchor tag and the res of html as it is.

Html Encode Ionic 2 + API PHP quotes errors

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.

javascript replace string continueable

I got a code that replaces a string. Here is my HTML created by my PHP code.
...
foreach ($notes as $note) {
echo '<li><input name="noteTypeID" type="radio" class="noteTypeID" value="'.$note['NOTETYPEID'].'"></li>';
}
...
foreach (...) {
...
echo '<li class="getshrtcode">[srms_more_info id="'.$cnt.'" instanceID="'.$val_id.'" type="'.$val_type.'" noteCodeID="" planID=""]</li>';
...
}
my script is like this:
jQuery(document).ready(function(){
var noteTypeID = null;
var planID = null;
jQuery('.noteTypeID').click(function() {
noteTypeID = jQuery(this).val();
planID = prompt("Enter a Template planID value from axcelerate");
jQuery('.getshrtcode').each(function(){
jQuery(this).text(jQuery(this).text().replace('noteCodeID=""', 'noteCodeID="'+ noteTypeID +'"'));
jQuery(this).text(jQuery(this).text().replace('planID=""', 'planID="'+ planID +'"'));
});
});
});
the 1st change is fine but the next is not. I see that it can't re assign the .getshrtcode text because the planID and noteCodeID string have value. Is it possible to turn it noteCodeID="" planID="" again?

You are trying to set a non-DOM entity with jquery which is not possible. When you have a template engine to generate HTML, the template code gets executed and gives results before any javascript loads, so you cannot set template properties unless the template engine itself provides you a mechanism to do this.
If you really want the customer to specify a certain template plan ID to present him with something specific, you need to load your page through an AJAX call where you send a request to the server passing noteCodeID & planID and respond with the desired HTML that comes as a result of the custom template engine execution.
If you have custom attributes in your HTML that you want to set using jquery, then you can simply use attr function :
$('#foobar').attr('foo','bar');

Unable to output actual json data inside javascript script tag

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!

Categories

Resources