Push is not a function

Question

I get the error

this.items.push is not a function

From googling I've found out that this means that items is not an array. I've tried to account for this by checking if it's undefined and using this.items = this.items || []; I also tried to change data and make it an array but when I enclose data in square brackets, nothing gets pushed to items.

It's very hard to troubleshoot because the error only shows up in the developer console after I've deployed it. No errors show up in the developer console when I am in development mode.

items = [];
storageKey = 'MyDataStorageKey';

public onSubmit(thumbnail, quantity, product_name, product_price){

var data = {
   thumbnail,
   quantity,
   product_name,
   product_price
};

this.items = this.items || [];
if (typeof this.items !== 'undefined')
this.items.push(data);
localStorage.setItem(this.storageKey, JSON.stringify(this.items));
this.isSubmitted = true;
}
ngOnInit(): void {
   this.items = this.getStorageItems();
 }

I also get the error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. I get the error for the following:

<tr *ngFor="let item of items">
<td>
<td><img src="../assets/images/gallery/{{item.thumbnail}}" /></td>
<td>{{item.quantity}} </td>
<td>{{item.product_name }}</td>
<td>{{item.product_price }} </td>
</tr>

The error messages are quite clear. The function `this.getStorageItems()` isn't returning an array but rather an object. You need to check what that function returns. — ruth, Aug 01 '20 at 00:33
Declare `items = [ ]` variable like this: **`items: any = [ ];`** .. and try again. — Rohit Tagadiya, Aug 01 '20 at 05:10

score 0 · Answer 1 · answered Aug 01 '20 at 00:24

0

I wouldn't know what causes the problem in the first place or how to solve it properly I am afraid (you're right though, by the look of the error, it seems like you are not getting an array with this.items in production)

One thing I noticed, however, is that you are checking against the string "undefined" instead of undefined. I believe, however, instead of checking if what you get is not undefined, it's better to check if what you get is actually an array? To check if something is an array or not, you could use Array.isArray() method. So maybe rewriting your condition like this might help until you figure out what's the root cause of the problem:

if (Array.isArray(this.items))
  this.items.push(data);
  localStorage.setItem(this.storageKey, JSON.stringify(this.items));
  this.isSubmitted = true;
}

answered Aug 01 '20 at 00:24

selmanbey

318
1
8

When I run console.log(this.items); in development mode, it shows that it's an array but when I run it in production mode, it's an object. – Maureen Moore Aug 01 '20 at 12:55
See, I have never used Angular before, so I doubt I can be of much help here :( But there is this SO answer about your error (https://stackoverflow.com/a/35660606/7228779) and it indicates that your issue is the same. `this.items` is not an array and thus you cannot use it in `ngFor`. So maybe the right approach here is to explore the places in which you assign new values to `this.items` (like` this.getStorageItems()` method) and se if there is any opportunity for them to assign an object instead of an array. – selmanbey Aug 01 '20 at 16:15
But if you cannot figure the root cause and if you are also okay with adding more conditionals just to prevent the crush, maybe you can add a similar array-checking conditional before rendering the ``? (I guess you could do that with wrapping your element and then using `ngIf={Array.isArray(this.items)}` on the wrapper, but again, I don't know any Angular so take my suggestions with a grain of salt). – selmanbey Aug 01 '20 at 16:33
I googled "convert object to an array" and tried everything but nothing worked. – Maureen Moore Aug 01 '20 at 17:29

score 0 · Answer 2 · answered Aug 01 '20 at 04:02

0

You are getting this error because items is not an array and the ngFor expecting an iterable object. Better to check the type of items using isArray() function before you push items to items object.

if (Array.isArray(this.items))

answered Aug 01 '20 at 04:02

Jobelle

2,717
1
15
26

Push is not a function

2 Answers2