Cannot read property of undefined in templates - javascript

In my component template, I'm getting output as [output:Output] but not what I wanted. I'm sending an object from a parent container using #Output
In my template when I try to bind {{selectedMovDetail|json}} the output is { "name": "The Walking Dead","rating":"8.6"}
But when I try to extract data using {{selectedMovDetail['name']}} I get the following error
When I tried to debug with Augury (chrome debug tool) I get
Now I'm confused how to extract the object values.
Any help regarding this is much appreciated

Use: selectedMovDetail?.name instead of selectedMovDetail['name'].
When you use the "elvis" operator, ?, in selecting your json keys, it will not throw an error if it can't find a specific key or the value has not been loaded yet (only in html).
For example in your case: selectedMovDetail.name exists after the template has been viewed so using ? before the . makes sure that name will be printed when it's loaded.

Related

Why is my console.log in LWC showing variable data in proxy handler

I'm trying to console.log a variable's value but on the browser console instead of printing the variable (an object in my case), I am getting a Proxy container with format like
Proxy {}[[Handler]]: En[[Target]]: Array(0)[[IsRevoked]]: false
On opening the [[Handler]], I get some inner properties which contains an originalTarget property.
On expanding the originalTarget , my data is shown.
How do I get this data to show properly in console and also access it in my LWC ?
this.variableName returns value in a Proxy
If you want to view proxy data so use this :
JSON.stringify(this.caseList)
And further if you want to use it in your lwc use this:
let cases = JSON.parse(JSON.stringify(this.caseList))
console.log(cases);
I hope you find the above solution helpful. If it does, please mark it as Best Answer to help others too.
Reason : whenever we mark any Javascript object as #track, Salesforce wraps the object inside creating proxy objects.
Solution: #Rajat Jaiswal answer.

Object property displayed in the console, but returns undefined when I read it

article is an object variable.
console.log("reesult id " + JSON.stringify(article));
When I do this, it outputs me: [{"Id":43}]
and when I do:
console.log(article[0]);
It outputs me {"Id":43}
but now... HOW to get just 43?
Because when I type:
console.log(article[0].Id);
, It returns me undefined instead of 43. Pf.
So, HOW to get 43?
It is very difficult because I made researches and it does not work as well.
I am unable to comment to so posting as an answer.
Your solution looks fine.
Could you print the output for
JSON.stringify(article[0].id)
Sequelize has it's own way how to return objects in json so you should try using their way to handle with objects since you are using that library.
This is from Sequelize documentation.
For any response object that resulted from a query, you can extract
only the data you want by appending .get({plain:true}) the the
response.
Here you have a link to that documentation so you can read more for that since you are not providing any code to us.

Access $key from object returned from firebase

I have an object downloaded from firebase which is of type Bug (Custom type). However, when I tried to console log the output with the following code
console.log('bug',this.bug);
I get the following result. It is what I expected where I can go on and do things like
console.log('company', this.bug.companyName)
However, I want to get that key value as well. Howe can I do that? I tried to do
console.log('company', this.bug.key)
console.log('company', this.bug.$key)
and both of them does not work
try to run
console.log('company', this.bug["$key"])
remember property lookup on objects is either
obj.someKey // or
obj["someKey"]

issue handling property containing brackets in handlebar

I am trying to find a way to solve a weird property issue serve by server . For some reason server have to send some property in format like propertyname[] so when I have to get the value of the property containing [] is giving me parsing errors
propertyname[] is an array
{{#if this.propertyname[].length}}
...some stuff in here
{{/if}}
there is no way I can read this weird property or maybe I am missing some basic thing in here . any suggestion will be appreciated.
Actually handlebars allows you reference a property that is not a valid identifier such as ! [ # # + * -, just use segment-literal notation to access a invalid property:
this.[propertyname{}] // it equals to this['propertyname{}']
Unfortunately, this method works on the premise that you don't use ']' in a path literal.
I think that change the property name (maybe use other character) or updated the data structure in the front end are possible way to solve this problem.

How to print an object on the developer tools console in Javascript

Please help me in printing the complete object using console.log method. If I am simply putting the name of the object it simply prints [object] [object]. But I want to print the object with complete hierarchy.
For an example, I am getting object in the following method,
getObject : function(responseObj) {
console.log('Object hierarchy is'+responseObj)
}
This simply returns [object] but I want to see the complete hierarchy in the developer tools. Please see, I am using sencha.
Use console.dir, and don't concatenate...
console.dir( responseObj );
Or if you want a label, use a comma to pass multiple arguments.
console.log('Object hierarchy is:', responseObj)
The problem here is that you are concatenating an object onto a string, so it's not doing what you are expecting. Instead of putting it all into one console.log call, do two, the first with the text you want, and the second with just the name of the object in it.
getObject : function(responseObj) {
console.log('Object hierarchy is:');
console.log(responseObj);
}
edit:
If you are logging into a text/non-interactive console, that doesnt let you explore the object, you'll need to implement a custom inspection function, something like this gist will get you started. What this is doing is echoing out the property name, and the value it finds step by step, but pay attention to what it says there about scoping.
edit edit:
didn't know about console.log taking multiple parameters, never needed it :o handy though!

Categories

Resources