We Keep Coding

How to solve Type error in an ionic framework

How can I solve this error:
core.js:1449 ERROR Error: Uncaught (in promise): TypeError: Cannot
read property 'slug' of undefined TypeError: Cannot read property
'slug' of undefined
My code:
this.WooCommerce.getAsync("products?filter[category]=" + this.category.slug).then((data) =>{
console.log(JSON.parse(data.body));

well to me this confirms what I first said. you are indeed pointing to a child of an object within an observable (whether you know what observables are or not) (observables sometimes move all the way up the priority list and happen before hydration of any other var).
so here's the precautions I like to take to make sure things don't go badly: splitting things up.
Also, here's a "hack" I like to use on a general basis in order to ensure I can continue my dev cycle unhindered and have a better notion of where things are failing other than just "undefined":
this.category['slug'];
I never go this far but this is also allowed :
this['category']['slug'];
see this is different because it will actually return the undefined instead of failing there at a JS level.
now to me it seems pretty obvious that you need to ascertain this.category.slug in the instant it's being evaluated isn't in a state in it's lifeline prior to it's initialization :
var myFunctionToLogSlug = () => { //here you could pass this.category.slug as an arg but
//that's the same as simply calling in within the body of this method because your
//context (this) is the same, ergo the pointer and timeframe are also the same.
console.log("is this.category.slug empty ? : ", this.category.slug);
return this.category.slug;
};
this.WooCommerce.getAsync(
"products?filter[category]=" + myFunctionToLogSlug()).then(data =>{
console.log(JSON.parse(data.body));
});
once you've ascertained this.category.slug is indeed undefined at the point it is called, you can either move this.WooCommerce.getAsync to a time-place you know this.category.slug to be defined, or move this.category.slug's hydration to the inside of the getAsync.
hope this helps ! :)

Cannot read property 'value' of null. when i'm in other pages

in my website i use one javascript file called " backend.js "
contain javascript/jquery codes for all the website pages
so, for example in a function with a line like this :
var latit = document.getElementById('lat').value;
it works fine on a page that contains id='lat'
but in other pages i got this error in console :
Uncaught TypeError: Cannot read property 'value' of null
and also with style :
Uncaught TypeError: Cannot read property 'style' of null
and it causes stop of executing my other functions below the line.
the same with any line with document.getElementById code in all my file.
i found a solution but i don't know if it's the best or there is better
my solution it to make a test for any document.getElementById in my file like this :
if (document.getElementById('lat') != null) {
var latit = document.getElementById('lat').value;
}
is it the best solution ?

No need to call getElementById twice. You can store the result of the first call in a variable.
var lat = document.getElementById('lat');
if(lat) {
var latit = lat.value;
}
If you don't want additional variables, you can also use
var latit = (document.getElementById('lat') || {}).value;
or || Object.create(null) if you are afraid Object.prototype.value might exist.

The reason you are getting those errors is that the web app you are writing has various states and not all of them have the elements you are specifying.
If this is a problem with a SPA web app (single page app), you need to effect some degree of routing so that you are only loading the appropriate javascript for each page in the app.
If this is a libary used on many pages, you need to check the page it is on and assume only the elements that should be there are there.
If this is a library only used on one page, it is a dynamically changing but non-SPA web app, and you need to check the application state and assume only the elements that should be there are there.

Chrome - Cannot read property 'status' of undefined even with check first

I see a lot similar questions for this particular javascript error, but my issue is I've already implemented the "fixes" and it still occurs, but only randomly.
The error:
Uncaught TypeError: Cannot read property 'status' of undefined
Before referencing the status property like so json.status, in all instances I precede it with:
if ( typeof json.status != 'undefined' )
So in theory, there should be no reason for it to ever throw that error if I'm checking first in all situations.
When I click the line number it's referencing in the console, it goes to a blank screen, so it's been hard to troubleshoot. If I expand open the error stack thing, it references my jquery dataTables a bunch, but I don't know if that's because something is failing prior to it or not.
How can I troubleshoot this deeper, or catch that error properly so it doesn't halt all my AJAX calls that come after it? (requires a refresh when it happens...)

Cuz you're not providing the full code, I cannot understand so clearly your situation.
Anyway, the error simply showing that json is undefined (due to something wrong in the coding logic, ...).
To quick fix the error, you can change your code to do null-check for json as well:
if (json && (typeof json.status != 'undefined')) {...}
Or a better way:
if (json && json.status) {...}

IE9 unable to get property 'remove' of undefined or null reference

I am working on a site, where I sometimes need to load a big banner into my header. The header has some default styles, which I need to remove if the specific page has a banner. These extra styles are in a class, which is then removed server side if there is a banner present. It works across all browsers, except in IE9.
document.onreadystatechange = function () {
// Initialize app when document is "ready"
if (document.readyState == "complete") {
var dom = {};
dom.$header = document.querySelector('.js-header');
dom.$banner = document.querySelector('.js-banner-image');
resizeBanner();
}
}
function resizeBanner(){
if(dom.$banner && dom.$banner !== null && dom.$banner !== undefined) {
dom.$header.classList.remove('has-no-banner');
}
}
The browser halts when it tries to remove the class, because it is "unable to get property 'remove' of undefined or null reference". However, the variable is defined and the element exists in the DOM.
If I go to a page that doesn't have a banner, the function doesn't fire (this is expected behaviour), so logically it's not the conditional that's messed up, it finds dom.$banner just fine, but just to test I've tried giving the element an ID, and declare that right before my method. That did not solve the problem.
The script file is referenced in the bottom of my document with defer async.
What am I doing wrong here?

The .classList property is not supported in IE9. Use a more traditional way of adding/removing classes as shown here: Adding and Deleting from objects in javascript

javascript error: Microsoft JScript runtime error: 'document.getElementById(...)' is null or not an object

I am getting this error when I call a javascript function to display a modal window:
Microsoft JScript runtime error: 'document.getElementById(...)' is null or not an object
The code block is:
else if (action=="officeview") {
document.getElementById("OfficeContent").src="ChangeView.aspx";
ShowFeatureModal('AppView','OfficeContent')
The object is this situation, does exist.
Error is caused at: document.getElementById line.
What else could be causing the error?
Update:
Index.aspx is calling the javascript function which is located in sysUtilities.js file. The source file is yet a seperate page (ChangeView.aspx)

If document.getElementById doesn't find the element, it will return null. If you then try to get the src property from null, you'll get this error.
You'll either need to ensure the there's an element with its ID equal to OfficeContent or do something like the following:
else if (action=="officeview") {
var officeContent = document.getElementById("OfficeContent")
if (officeContent) {
officeContent.src="ChangeView.aspx";
ShowFeatureModal('AppView','OfficeContent')
}
}
EDIT: If you're using ASP.NET, which it appears that you are, remember that your IDs might be getting name-mangled if they are inside a container control. In that case, you have to make sure to use the ClientID, not the plain old ID. Something like this:
document.getElementById("<%= OfficeContent.ClientID %>")

Don't know if it will help in this case, but this is a trick to prevent the error:
(document.getElementById("OfficeContent")||{}).src="ChangeView.aspx";
If the element doesn't exist, an empty object gets the src-property, no error is thrown, no harm is done.
It may be wise though to look for the cause of document.getElementById("OfficeContent") returning null.

you need test whether an element exists first before setting element's src attribute
var el = document.getElementById("OfficeContent");
el && (el.src="ChangeView.aspx");

All this stuff is peripheral to the main issue, which is:
You must use the actual clientID of "OfficeContent", which may be quite different in the HTML DOM of the page as it is rendered. One easy way to avoid this would look something like this:
var officeContent = document.getElementById("<%=OfficeContent.ClientID %>")