String jsx to jsx with curly braces - javascript

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?

Related

why vue props decoding JSON strigifyed object

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.

JSON Parse error: Unexpected identifier "undefined" when trying to parse an object from an array (React-Native)

I have created a way to store data the way I want in AsyncStorage. This includes:
Reading a variety of input (various arrays)
Storing the input in a local this.state.object that houses multiple arrays
Stringifying this.state.object
Storing the stringified object in a temp array
Assigning the array with all objects to another state, this.state.allObjects
Stringifying 'this.state.allObjects'
Storing stringified array in AsyncStorage
The end goal of all of this is to have an array of objects that each represent a very different instance of the same type (with different parameters etc.). It may not be the most elegant approach, but it seems to store and load fine.
The issue arises when I try to parse anything from this.state.allObjects[x]. Or rather, it only occurs when I need to access it in a case that is NOT right after I load it.
During my loadFromAsync function, I am perfectly able to execute this.state.allObjects = JSON.parse(fromAsync); to get the array of stringified objects and then var display = JSON.parse(this.state.allObjects[0]).name to retrieve the name of the first parsed object of the array.
Any time outside of this function when I try to call var display = JSON.parse(this.state.allObjects[0]).name or even simpler <Text>{JSON.parse(this.state.allObjects[0]).name}</Text> I receive the following errors:
when running
const parse = JSON.parse(this.state.allObjects[0]);
//JSON Parse error: Unexpected identifier "undefined"
console.log(parse.name);
and when running
const parse = JSON.parse(this.state.allObjects[0]).name;
//JSON Parse error: Unexpected identifier "undefined" + null is not an object (evaluating 'JSON.parse(this.state.allObjects[0]).name
console.log(parse);
and lastly while running
const parse = JSON.parse(this.state.allObjects);
//JSON Parse error: Unexpected EOF + JSON Parse error: Unexpected token ','
I assume that this.state.allObjects changes somewhere within my code, or appends an extra } somewhere, though it really shouldn't. When I display this.state.object and this.state.allObjects[0], their format is exactly the same visually. Adding more objects to this.state.allObjects and displaying each stringified component also works; it is just a matter of actually parsing these components that is not working outside the original load function.
I am extremely stuck. Any advice is appreciated. If I need to change my datatype, that's fine. It's just a bit annoying to have come this far with a stringified array of stringified objects holding arrays and not be able to parse it.
Because this.state.allObjects Already JSON object.
Try JSON.stringify()

Is there a way to pass a Handlebars partial (with variables) into another helper?

So there is a template file that is generating a few different layouts for a component in my webpage with different variables dictating sizes and whatnot. So in order to reduce the number of files in the project, I'm trying to reuse the template files for code snippets instead of having dedicated files for them. Through sub expressions, I've had the idea of doing something like this:
{{ escape (template var1=var1 var2=var2 var3=var3) }}
where escape is a helper that takes a string and escapes it (funnily enough), and:
(template var1=var1 var2=var2 var3=var3)
is supposed to have the same effect as {{> template var1=var1 var2=var2 var3=var3 }}, returning complete markup presumably as a string.
The helper doesn't seem to be receiving any string since running typeof on the parameter is returning undefined. I had assumed since {{> template var1=var1 var2=var2 var3=var3 }} is being used higher up in the file, that was registering it for use within the rest of the file, but now I'm thinking that's not how Handlebars does its thing.
Is it possible to retrieve the partial like this or does it need to use the {{> syntax (which doesn't work)?
At the time I asked this question, I was a bit confused with how a context was applied to a partial programmatically. Now that I've done a bit more research (I did try before asking but got nowhere), I now know that Handlebars.compile(partial) will return an object for the given partial and allow a context to be given through partial(context) which should be returned.
Sample Code
function escape(partial) {
let compiledPartial = Handlebars.compile(partial);
let context = { greeting: "Hello World!" };
return compiledPartial(context);
}

Iterating PHP namespaced objects in ng-repeat

I'm trying to iterate trough array of objects using ng-repeat in Angular. Everything works fine except for an API, which returns json encoded PHP object, which resides in different namespace on server. That leads to situation, where returned object properties contains \ in name and I can't find the way how to access them while using {{Namespace\Property}} syntax in Angular. \ causes syntax error on client side, even when trying to escape this character doubling it.
Logging JSON-decoded object in browser returns correct contruction, but can't figure the way to read specified property.
Example output returned from API:
0: Object
Auth\Username: admin
Auth\Domain: acme.org
Auth\Enabled: true
1: Object
Auth\Username: guest
Auth\Domain: acme.org
Auth\Enabled: false

String Interpolation in React component with strings returned from server

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');
}

Categories