Expected null to deeply equal [Array (1)] - javascript

just a brief question. I've been struggling to figure out what this error in javascript actually means: "Timed out retrying: expected null to deeply equal [Array (1)]
I'm basically working on a LocalStorage Shopping Cart and my code is actually based on this video: https://www.youtube.com/watch?v=uR3r3GJvQDY&t=417s
It's pretty much very identical. The code perfectly works on my system without any errors but as soon as I upload it to my university's server on which the code undergoes certain tests I receive the above-named error. It also doesn't really indicate in which line of the code the error is happening. My instructor only told me this usually happens when the cart should exist in the localStorage, however, it doesn't which means the localStorage returns NULL to the system.
For reference to the code please check: https://gist.github.com/prof3ssorSt3v3/3e15d06a8128d6ca7deaa831a7a1e52b
So, we basically create a cart called contents and we never remove empty the LocalStorage at any point in the code. How can the LocalStorage return null at some point then and cause the error?
For the init function I have this:
init(){
//check localStorage and initialize the contents of CART.contents
let _contents = localStorage.getItem(cart.KEY);
if(_contents){
cart.contents = JSON.parse(_contents);
}
else{
cart.contents = [];
cart.sync();
}
},
Thank you for your help in advance!

Related

How thoroughly should I check for possible errors in JavaScript?

I've difficulties to understand how far should I normally go with checking and validating data I operate in my code. I'm not even saying about user-input data here, I'm just saying about my own data, the data I know the structure of. For example, I might have some basic function like this:
let someData = [object];
someFunction(newData) {
let newSet = newData.frequency[0];
someData.dataset.chart.data[0].frequency = newSet;
}
Let's say I have someData variable that is used by a chart, and then I also have a function that simply updates the chart data with a new one. newData comes from my database (when user adjust filters and apply them) and someData is the default, initial data everyone sees. Now, my problem is... I foresee the following events:
Someone might change someData using Developers Console, so this variable will no longer hold an object, or won't have properties I address in my code, so it will lead to errors and break my logic entirely.
Someone might call someFunction directly (using console again) with very random data as argument, and this, again, will lead to errors.
Maybe newData received from DB will be somewhat wrong due to some errors on my side or anything, or maybe initial someData will fail initialising (cause it's initialised through a function as well and relies on third party .JS file that also might fail to load one day).
And I'm not even sure I've foreseen all possible events. So my code turns from what you saw above to something "tedious" (in my opinion) like this:
let someData = [object];
someFunction(newData) {
let newSet = typeof newData === "object" &&
newData.frequency ?
newData.frequency[0] : undefined;
let oldSet = typeof someData === "object" &&
someData.dataset &&
someData.dataset.chart &&
someData.dataset.chart.data &&
someData.dataset.chart.data[0] ?
someData.dataset.chart.data[0].frequency : undefined;
// Since using length on undefined will lead to an error, I've to check the type too
if (Array.isArray(newSet) && newSet.length === 5 && oldSet) {
oldSet = newSet;
} else {
throw Error("Dataset update has failed.");
}
}
And even this doesn't guarantee that the newSet of data is the data I expect to see, because maybe I was looking for [1,2,3,4,5] and user managed to insert ["a","b","c","d","e"] via his console and so on. It feels like I can refine this endlessly and it will never be bulletproof plus eventually it's starting to get complicated to understand my own code, that the only thing I wanted to do is to changed old data with the new data. At this point I'm feeling like I'm doing it all wrong. Coding takes way more time and I'm not even sure I'm doing it for good, but at the same time I can't feel the limit when to stop over-validating my code. Please advise.
I would just stick with user input validation. Out of that, it's their problem if they want to screw you things with developper tools. Anyway, those would only stay on their side.
What's important is the validation on your server. The client side input validation is just to make sure everything put by regular user is error free before processing. It also save useless send to server. The server must redo the validation and more because of those screwed people.

Unable to get property 'style' of undefined or null reference but works in another server

I have a classic asp project. In one of my pages i have to call a javascript function. That call does not have any problem and works fine on my test server (not localhost, just a server to test he project). But when i deploy it to the actual server, that function does not work. I call this function in onload event.
That function has this type of lines (i cannot write the whole code, because of the company that i work for, does not allow it)
document.getElementById("R6C2_1").style.display = 'block'
document.getElementById("R6C2_2").style.display = 'none'
....
When I try to debug it on IE10, i got "Unable to get property 'style' of undefined or null reference" error. After that, the elements in javascript function are not load. They are not seen on the page.
My main problem is, as i mentioned before differences between servers. I do not understand why it works on one server, but not on another server.
While it's not possible to determine the issue from this information alone, you should look into:
Whether the elements you're looking for actually exist when the code is invoked (use browser debug / breakpoints to look at the page the moment the code is invoked).
If they exist, check if they have the ID you expect (e.g R6C2_1) - if not, why? who creates these IDs? could be a server configuration issue.
Do a debug using the app from each server, and look at the page / DOM, see if there are differences or check if the code is invoked at different times.
These could lead you to pinpoint the issue. Good luck!
In case the elements just take time to be created, you can just wait until they are present:
function ExecuteWhenExists() {
var R6C2_1 = document.getElementById("R6C2_1");
var R6C2_2 = document.getElementById("R6C2_2");
if (R6C2_1 && R6C2_2) {
R6C2_1.style.display = 'block';
R6C2_2.style.display = 'none';
} else {
window.setTimeout(ExecuteWhenExists, 100);
}
}
ExecuteWhenExists();
This will not crash when the elements do not exist, and will just keep trying to execute in a non-blocking way (polling every 0.1 seconds) until they exist.

AfterSave on PFUser checking if on creation or update

I am having difficulty in distinguishing between if a PFUser is being updated or if it is being saved for the first time. I implemented the solution found on parse.com here. However, it is not working as explained in the answer found at the link. I always get a false regardless of if it is on the creation or an update. Here is the code that I have implemented.
Parse.Cloud.afterSave(Parse.User, function(request) {
Parse.Cloud.useMasterKey();
//this error log prints false regardless of if the user is signing up.
// or having a key updated.
console.error(request.object.existed());
if (!request.object.existed()) {
//This is on sign up, the user has not existed prior.
//This doesn't work. This block of code is always run.
}
else {
//This is supposedly when the user is having a key updated.
//Unfortunately, this code is never run regardless.
}
)}
This code does not behave as I expect it to because the request.object.existed() always returns false. I think this may have to do that this is saving a PFUser and not some generic PFObject. Is there something I am missing using request.object.existed() on a PFUser afterSave? Thanks.
This seems to be an unresolved Parse cloud bug
Possible workaround is to check the difference between create and update times to see if your object is being updated or is being created.

CPRangeException thrown when objects added to an CPArray

In my cappuccino app, I am reading from an RoR backend via JSON and putting the results onto a list. When the app first loads everything is fine, but when I edit an item (and write the edit to the database) there is an error generated when the items list is refreshed.
The error is CPRangeException: -[_CPJavaScriptArray objectAtIndex:]: index (-1) beyond bounds (3).
I get this error even if I edit an item without making any actual changes. The JSON string received by the app remains exactly the same in this case, there are no items added or removed and therefore the array should not be written to out of bounds.
Here is my code:
- (void)connection:(CPRURLConnection)connection didReceiveData:(CPString)data
{
if(connection === listConnection)
{
var results = JSON.parse(data) ;
var posts = [Post initFromJSONObjects:results];
[postListView setContent:posts] ;
// My error occurs at the above line
[postListView setSelectionIndexes:[[CPIndexSet alloc] initWithIndex:0]] ;
}
}
I am not sure if it's an error with my code or if it's some kind of inconsistency with the cappuccino framework. Does anybody know what I can do to fix this?
The rest of the code can be found here
You should probably simply log what's in posts before setting it. CPLog.info('posts: ' + posts); should work, or console.log(posts). Next you can set a 'break on uncaught exception' debug point in Chrome or Safari to stop at the actual error you are seeing. Make sure you run your app using index-debug.html so that you get full method names. Then it should be an easy matter to look at the calling stack to see where things are going wrong. There's a lot of information on debugging a Cappuccino app here.

Where should I start, models are there but... they aren't?

working with backbone, I was seeing a problem where some data was being left blank, so I wrote this to try to see what was going on.
console.log('actions.models', this.model.actions.models)
console.log('actions.models.length', this.model.actions.models.length)
console.log('first actions.models', this.model.actions.models[0])
the output
actions.models [ Action ]
actions.models.length 0
first actions.models undefined
if I add a setTimeout of say 2 seconds to this code I get
actions.models [ Action ]
actions.models.length 1
first actions.models Action
I don't get how this could happen. I don't know where to start looking or even what would be helpful to post for you guys to look at.
If anyone can help point me in the right direction I would appreciate it. Thanks very much.
Are you loading the models via an Ajax function, like fetch? If so, you can't count on data being loaded until the Ajax function's callback is invoked, e.g.
actions.fetch {success: -> console.log actions.models.length}
Not sure what you are trying to do, but anyway.. When you dump objects to the console log, be aware of the fact that since objects are passed by reference, whatever you get from inspecting it in the log will be whatever the object ended up being. Assuming you want to log the state of an object you should probably try to serialize it when logging. For instance console.log "mymodel: ", JSON.stringify(mymodel.attributes).
Also be aware that to access backbone models, you would typically use name = mymodel.get('name'), or for a collection item = mycollection.get('someid').
If you post some testable code and what you are trying to accomplish, I'm sure somebody with a clue will be able to help you out.

Categories