I am passing a stringifyed object via props to a component like below.
<my-component :filter="stringobject" ></my-component>
stringobject = "{"search_text":"(ciClass like '%5684%') AND status NOT IN ('Terminated','Closed','Implemented')"}"
Inside "my-component" when I receive the filter prop, the query is being changed to
ciClass like 'v84%'
Somehow vue is converting the '%56' to 'v'. In my-component the type of the prop is String.
I tried to escape it with backslash, storing the string in variable first, tried using encoded chars instead of quotes but it didn't work. Any idea what might be going wrong here?
In my stringifyed object, I repalced % with %25 and it started working! I am not very sure how and why this decoding was taking place.
Related
I've read many articles and issues about this but it couldn't find anything to solve my problem
i have a jsx created from the backend and it's sent to the front end as a string, i want to parse it into regular jsx holding all the variables and functions
for example, i have a variable called data, which is an array of objects. and response is the string jsx generated from the backend
let data = [{}, {}, {}, ...]
let response = '<div>
{data.map(obj=>(<div><span>{obj.prop1}</span> <span>{obj.prop2}</span></div>))}
</div>'
i tried dangerouslySetInnerHTML but it didn't work, it renders everything as a string. i also tried some npm packages but nothing worked for me very well.
is there anything i can do to make this work?
In the following, myVar contains the string "Today, it's the ${date}".
Furthermore, there is an variable with the name date that contains "1st of October". I expect the following pug syntax to replace the literal ${date} with the date variable content.
span!= myVar
Unfortunately, the example results in
<span>Today, it's the ${date}</span>
Expected result:
<span>Today, it's the 1st of October.</span>
Best regards,
Benedikt
Yes, exactly as #omgninjas pointed out, it is called interpolation and preceded by # in Pug.
However you can't always use it (eg. inside a string). Here are some examples:
sensor is a variable passed by the controller to the view.
Normal interpolation. Works as expected:
<div id=#{sensor} style="width:90%;height:250px;"></div>
Inside a string with Template Literals (don't use these with user supplied values!):
img(src=`/images/${sensor}.png`, style="width:20%")
Inside a string used to denote a function call. Note that you cannot use the ` symbol (back tick aka grave accent used in template literals) with function calls because you would have to ecompass the entire function call . This results in a string which is not going to be executed. You need to use string concatenation.
body(onload="initTemp('"+ sensor +"')")
Here is the official documentation for Pug interpolation:
https://pugjs.org/language/interpolation.html
Hope this helps. Corrections and suggestions always welcome!
To render variables directly in a string in a Pug template, you can use the typical ES6 interpolation. Example (assuming pageTitle is in scope, and passed as template context):
- var pageTitle = `Google | ${pageTitle}`;
Pug interpolates with a hash. #{interpolation}
When I'm passing a string to an #Input() of the Component, it is always undefined.
This is where I loop trough my array and pass the string to the component
https://github.com/davidhoeck/ng2-realtime-chat/blob/master/src/client/app/%2Bmessaging-page/messaging-page.component.html
And thats my component where I'm trying to get the value from the string passed trough.
https://github.com/davidhoeck/ng2-realtime-chat/blob/master/src/client/app/chat-window-component/chat-window-component.component.ts
Would be great if somebody could solve my problem.
The issue is with the way you are sending the string. "default" gets evaluated as a variable, and since it's not present in the controller it will evaluate to undefined.
Instead add use single quotes to denote a string in a template.
<chat-window [groupid]="'default'"></chat-window>
You can see the issue in this small plunker example.
I currently have strings being returned from a server which have variables that need to be interpolated on the front end. I'm using React and Redux and set the strings to the component's props so that they are accessed as follows:
this.props.translations['hello-message']
An example string looks like:
Hello, ${name}!
In addition, I have the user's name being returned from the server and set to props as well. How can I interpolate the string so that the user's name appears in the string and thus in the rendered React component.
I've tried use the String.prototype.replace() method in the render of the React component as follows:
let helloMessage = this.props.translations['hello-message'].replace('${name}', 'Joe');
But this returns an error of: "Uncaught TypeError: Cannot read property 'replace' of undefined". I've tried various other strategies such as functions inside componentWillReceiveProps() or creating a helper function as mentioned here: How can I construct a Template String from a regular string? all to no avail.
That error message means that this.props.translations['hello-message'] does not contain the value you think it does. This is likely a react issue, where your code is calling this section multiple times while it pulls data from the Redux store, and on the first call that var is not yet initialized.
As a very simple solution, try wrapping that statement with a check to see if the variable exists yet;
let helloMessage = '';
if(this.props.translations['hello-message']){
helloMessage = this.props.translations['hello-message'].replace('${name}', 'Joe');
}
By JSON text, I mean the return value of JSON.stringify. I know how to do this with JSON object, but I couldn't figure out how to do this with JSON text (add new attribute/element, say "sn":"1" to JSON text, but its structure is kept and I don't need to stringify it again), can anyone help me?
Thanks!
I don't know why you'd want to do this - why not just add the property before you stringify it?
But if you must, given a string that contains JSON:
var myJSON = '{"prop1":"val1","prop2":"val2"}';
You can easily add a property to the beginning by doing this:
myJSON = '{' + '"sn":"1",' + myJSON.substr(1);
Or add it to the end:
myJSON = myJSON.replace(/}$/, ',"sn":"1"' + '}');
Or use whatever other combination of String manipulation functions takes your fancy...
If you want to add the new property in a specific place within the string, say inside a nested object or array or something, well, again some kind of regex or combination of .indexOf() and .substr() or something could do it, but really I think it's nuts to approach it this way.
Obviously the above code can be wrapped up in a function, and '"sn":"1"' can be replaced with a parameter or variable name or whatever - but why?
Note also that I've assumed above that there will be at least one existing property and inserted a comma accordingly- up to you to make that smarter if you want to allow for empty objects.
P.S. There aren't "JSON strings" and "JSON objects": all JSON is a string. In JavaScript one way of creating objects is with the object literal syntax that inspired JSON, but there's no such thing as a JSON object.
It makes no sense to do it the way you're suggesting... just turn it back into an Object, add your field and stringify it again! Or am I missing something?
You're going to have to parse it somehow. The most straightforward way is probably un-stringifying it to object/array/literal data. But if you don't want to do that, you could either use regular expressions, or methods of the String object like substr to manipulate the string directly.