I have a problem, when I add an element in my bdd and my view client (with $set), a function is called. But I have error for accessing data, with the console.log, I see the new data is added but the data inside the object is not.
This is my error:
vue.esm.js?efeb:610 [Vue warn]: Error in render: "TypeError: Cannot read property 'id' of undefined"
for (var i = 0; i < this.assignments.length; i++) {
var date1 = new Date(date);
var date2 = new Date(this.assignments[i].start);
if (user === this.assignments[i].User.id) {
The error is saying that you are accessing an undefined value in this case the User of this.assignments[i].User is undefined.
Edit : To be sure check every thing
if (this.assignments && this.assignments[i] && this.assignments[i].User && user === this.assignments[i].User.id)
Well..
If I see problem like this, I am always trying to put debugger right after console.log in order to stop executing script. Don't always trust console.logs someone somewhen said.
Probably with that debugger, console.log will show something different, and that's because it's holding reference, so it's filled later. (you will be able to see that in the console)
Anyway...
What You can try to do for sure is
await this.$nextTick() - waiting for next render, then continue
Put it right before your not working code.
If not you can try forbidden technique - to wrap your code in
setTimeout(()=>{
...your code which needs to wait for render
},0)
Related
I'm working on a project and I have created an interesting challenge for myself.
render() {
const sysObjs = this.state.systemObjects;
const jsonPackage = sysObjs[0];
if(typeof jsonPackage === 'undefined'){
console.log("undefined!!!")
} else {
//let jsonData = JSON.parse(jsonPackage.replaceAll("\\\\", "\\"));
console.log(jsonPackage.replaceAll("\\\\", "\\"));
}
console.log(jsonPackage.replaceAll("\\\\", "\\"));
If I run that it will fail and it will fail on the last line of the snippet and it will fail because from the perspective of that line of code jsonPackage is undefined and we get a "cannot read property 'replaceAll' of undefined. That makes sense to me as doing any sort of operation on something that is undefined would fairly difficult. The part that is confusing me though is that if I remove that last line then the code will execute. That's confusing to me because that console.log is also there within the if-else block so I would imagine that both should throw errors but they don't. In fact if I run that after removing the last line I will actually get both sections of the if-else block to log to the console and that tells me that this is executing in a way that I don't understand. Can anyone explain what's happening for me? At the root here something is doing something such that the const jsonPackage is not populated immediately when it is set so I'm curious how react actually handles something like that.
Lastly, I commented out that line because that line throws "Unhandled Rejection(Error) A cross-origin error was thrown." I'm also not too sure what that actually means either as it wasn't covered in the course I took.
render() is called each time your component's state updates. It can also get called in a number of other circumstances, but I think that's the relevant one for this situation.
You're not showing all of your code, but there is probably something running on mount or something similar that updates this.state.systemObjects.
On the first render of the component, this.state.systemObjects is undefined. So, if you have your console.log(jsonPackage.replaceAll("\\\\", "\\")); line in at the end of your render, it will fail because it can't do an operation on undefined. However, with it commented out, it runs fine, because it goes through the if(typeof jsonPackage === 'undefined'){ section of your if clause and not the else clause, where an operation is done on jsonPackage.
Then, once systemObjects is updated, render runs again. On that pass, systemObjects now is not undefined, so the else clause gets run -- since you don't have an undefined value any more, that else clause runs fine.
Your cross-origin error is not caused by any code you've shown -- it's probably caused by an API request somewhere. There are plenty of answers on SO about what can cause those.
I think you answered your own question. This is happening because the first time your code is executing, jsonPackage is not defined. This is why both blocks of your if statement are logging, because during the first pass though it is undefined and during the second it is, which will cause the else block to fire.
And this is why your code is breaking, during the first pass through of render, jsonPackage is not defined which will throw an error.
Its not really possible to explain why it's not defined the first time around without seeing the rest of your code. As a rule of thumb however, you should generally never assume that a React state value will always be defined and add checks accordingly.
I am running into an issue in my Angular 2 app where I'm getting an undefined error that's not making sense to me. What's more perplexing is that, after getting the undefined error, I can effectively check the exact same value in the console and get it with no issues.
First off, here's a version of the function that DOES work:
public getApplicableResult()
{
if (!this.customer || !this.customer.services || !this.customer.services.getAt(0))
{
console.log('Services not available...');
return;
}
else if (this.customer && this.customer.services && this.customer.services.getAt(0))
{
console.log(this.customer.services.getAt(0));
}
When I run this function I get this in the console for my "console.dir" of my object literal:
CustomerServiceDetails
assignments:(...)
authorizations:(...)
If I then click on "assignments" in the console, I get this expanded result:
assignments:
CustomerAssignmentCollection
count:1
items:Array(1)
So all the data is seemingly there and available.
However, if, in my function, if I were to try and access these nested values more directly - such as the value for "count" above, I get an undefined error. That's what I'm not understanding. Perhaps it's something I misunderstand about how the console works. But if seems to me that if I can access the value for this property in the console, then I should be able to access it directly via my function.
Here's an example of the same function, slightly altered to get the result for "count" within assignments, that returns undefined:
public getApplicableResult()
{
if (!this.customer || !this.customer.services || !this.customer.services.getAt(0).assignments)
{
console.log('Services not available...');
return;
}
else if (this.customer && this.customer.services && this.customer.services.getAt(0).assignments)
{
console.dir(this.customer.services.getAt(0).assignments.count);
}
The specific error I get is:
Cannot read property 'assignments' of undefined;
To add some additional info, assignments is not an array, it's a collection.
Two questions here:
1.) Why isn't my first "if" clause handling the 'undefined' error? How could I adjust it to handle the situation better?
2.) Why can I call the first function, get a result, and then drill down from there in the console to get what I need, but if I try and access a more nested part of the object in the function itself, I get undefined as a result?
One additional detail, I was calling this via Angular's ngAfterViewChecked(). So what that should do, even if it's a timing issue, is return the first "if" else clause result until the value is available, and then it should show the result - i.e., it should execute the "else if" block - because AfterViewChecked() keeps checking. But this isn't happening. I'm just getting the undefined result I mentioned above.
I have the following React class. At first, the console will print an empty array {}, which will return the empty div. However, half a second later the console will print the correct values - but the empty div remains. How should I change the class to properly load the JSON?
var TableData = React.createClass({
render: function() {
console.info(JSON.stringify(this.props.summary));
if (!this.props.data || !this.props.summary) {
return <div>Loading name table..</div>
}
var summary = this.props.table;
var nameTable = summary.nameTable;
var nameTableArr = Object.values(nameTable);
return ( // A table is returned here, works with the same data structure as is present in the JSON
If I go to the console, the console.info prints an empty JSON string {} initially, which correctly returns the "loading names table..." div. However, data is printed in the console half a second later, but it never proceeds to go out of the if statement and populate the table.
It works if I change the nameTable var to include "manual" data, so it must be something with rendering the server-side data that's delayed half a second.
How could I change the above class to delay rendering for, say, 1 second and then populate the table? It would work in that case I suspect.
Removing the if statement results in Uncaught TypeError: Cannot convert undefined or null to object in the console, which makes sense since the string is indeed empty for half a second.
Im not a React experienced, but this looks like you have problem with asynchronous behavior.
In order to help you more, Ill need the part of the code where ajax is called.
The whole issue in my opinion is that your code is triggered first when there are no results yet, and after data are loaded it will not trigger again.
So take a closer look at your handling of AJAX async stuff, cause your issue is there.
function Notify(header,content,image){
var note = webkitNotifications.createNotification(image||"",header,content);
note.show();
return note;}
var extensions = ["pbjhaapnigfhipfahcfkeakpcgkmnklc"];
function CheckReload(){
for(var CN=0;CN<extensions.length;CN++){
var id = extensions[CN];
var ex = chrome.management.get(id);
console.log("Checking",ex,"-",id);
if(!ex.enabled){
Notify("Extension reloaded!",ex.name+" was found crashed, and reloaded!");
chrome.management.setEnabled(id,true);
}
}
}
setInterval(CheckReload,1000);
Ok, so what I was expecting was for this to check the extensions in the "extensions" array, and if they weren't enabled it would create a notification saying that it wasn't, and then enable it.
However, chrome.management.get(id) seems to be returning undefined.
I expected an output like:
Checking Object - [id]
Instead, what I got was:
Checking undefined - pbjhaapnigfhipfahcfkeakpcgkmnklc
Uncaught TypeError: Cannot read property 'enabled' of undefined
How can I fix this?
Most of the methods provided by chrome don't return a value, instead they take a callback function as a parameter, and call that function with the wanted result.
You should replace your code by
chrome.management.get(id, function(ex) {
console.log("Checking",ex,"-",id);
if(!ex.enabled){
Notify("Extension reloaded!",ex.name+" was found crashed, and reloaded!");
chrome.management.setEnabled(id,true);
}
});
See http://developer.chrome.com/extensions/management.html#method-get for details.
If you are running your code from an extensions, make sure that your extension have permissions to management.
I have been trying to figure out this particular problem in my developer tools, but I've had no luck thus far. I have an error on one of my js files that says
Uncaught TypeError: Cannot read property 'value' of null
The following error refers to the 1st variable of dt_version below. The particular thing is if I comment out the first line of code. I get the same error on the following variables of offload1 and offload2. The variable is a number that I am trying to get passed over. I run this function on my body when the page loads...onload=updatetotal();
function updatetotal() {
var dt_version = document.getElementById("dt_version").value-0;
var offload1 = document.getElementById("capacity_offload1").value-0;
var offload2 = document.getElementById("capacity_offload2").value-0;
var offload3 = document.getElementById("capacity_offload3").value-0;
}
If a run an if statement looking for document.getElementByID("dt_version");...it defaults to false..so its not being carried over though on the previous page, I can see its input fine with the value in it. What am I missing here guys?
This error means that the id dt_version does not exist. Check your html to make sure it is there:
var dt = document.getElementById("dt_version");
if (dt){
// do your stuff
}else {
console.log("dt does not exist")
}
Another cause for this error may be- as you are calling the javascript function on page load there is a possible chance that your control is not yet completely rendered to the page. A simple solution is just move that control to the beginning of the page. If it doesn't work then an reliable solution is, call the function inside jquery $(document).ready().