Some stuff are not found, like filter()


#1

Hi everyone,
I’ve decided to make the big jump and use Ionic2 for my future work.

I’ve learn the basics but I’m stuck with some simple stuff like:

TypeError: this.items.filter is not a function.

and this is one of lots of similar “problems” I found during my learning road.
This example:


doesn’t work to me for that error.

What I’ve missed? I have to import something? Why there’s no full documentation about that? (Maybe I didn’t found it but I really don’t know what to search for)

Thanks :slight_smile:


All arrays are objects, but not all objects are arrays
#2

The filter() method should be supported in all modern browsers so you shouldn’t have to import anything. I guess that maybe you’re not initializing the items property corectly and that causes the error. Could you provide more information, e.g. the output of ionic info, are you using JavaScript or TypeScript, sample code, etc?

The documentation you’re referring to is more sort-of API reference and there are mostly short examples and information about the framework component properties/methods - if you want to see the full code of the examples then look for the Demo Source links located above most examples.

I would also suggest you to go through some end-to-end app articles for Ionic 2 - there are some good blogs like gajotres.net, joshmorony.com and thepolyglotdeveloper.com among the others.


#3

Thanks :slight_smile:
I’ve searched lot of sites and blogs, even the once you’ve suggest.
I’m using Javascript.

Ionic Info

Ionic Framework Version: 2.0.0-beta.7
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: Not installed
ios-sim version: 5.0.6 
OS: Mac OS X El Capitan
Node Version: v0.12.7
Xcode version: Xcode 7.2.1 Build version 7C1002 

I’m using Safari, the last build, so the filter() should be there, right?

I retrieve the data from firebase:

this.risultati = [];
firebase.database().ref('/desideri').on('value', (snapshot) => {
	const objUser = snapshot.val();
	// this is now bound to the component using the fat arrow =>
	console.log(objUser);//this.events.publish('user:update', objUser);
	this.risultati = objUser;
	this.risultatiKey = Object.keys(objUser);
});

and in the onInput:

onInput(ricerca){

    // Reset items back to all of the items

	    // set q to the value of the searchbar
	    var q = ricerca.value;
	
	    // if the value is an empty string don't filter the items
	    if (q.trim() == '') {
	      return;
	    }
	
	    this.risultati = this.risultati.filter((v) => {
	      if (v.toLowerCase().indexOf(q.toLowerCase()) > -1) {
	        return true;
	      }
	      return false;
	    })
	}

#4

Yes, it should be available, but it’s an Array method and it seems that you’re trying to call it on a variable of type Object, i.e. the method won’t be available in this case…


#5

It would be cool if there was a good FAQ to refer people to on this topic. It comes up very frequently in the context of ngFor loops as well.


#6

Yes, I completely agree - and also in connection with Firebase which doesn’t support arrays natively and usually returns the results as an object which has to be converted to an array.


#7

First attempt here, please feel free to make suggestions/corrections.


#8

Oh that explain why the function doesn’t exists :sweat_smile:
Any way to make this work?

@rapropos good idea to create tutorial topics. How about adding some examples? Explaining the problem and the possible solutions is the point, adding examples will show what you mean pratically. :slight_smile:


#9

Oh and BTW (another frustrating thing): I have errors declaring class variables, WHY!

export class Homepage {
    public risultatiObj;
    static get parameters() {
      return [[Traduci],[Database]];
    }
    constructor(traduci,db) {...}
}

Unexpected token (2:8) while parsing file:

I think something has changed between angular 2 versions BUT there’s no documentation that I found about that. I found several, or like every, code example that doesn’t work with my files, I’m sure I’m missing something but I really don’t know exactly what…


#10

If you insist on using JavaScript, don’t feed it TypeScript.


#11

@rapropos
I’m looking into typescript just now, I just saw that name a couple of times :expressionless: (my project is in javascript anyway) and the error is still there even without the “: Object”.
How about the other question? :slight_smile:


#12

Not only the type annotations but also the class properties are invalid syntax in JavaScript, so you have to move the property declarations to the constructor (you could check the linked post for more details):

Alternatively you could try to convert your project to TypeScript following the instructions in this post.

I’m not sure what data are you getting back from Firebase but assuming that it’s a collection/dictionary then you can convert it to array this way:

firebase.database().ref('/desideri').on('value', (snapshot) => {
	const objUser = snapshot.val();
	// this is now bound to the component using the fat arrow =>
	console.log(objUser);//this.events.publish('user:update', objUser);

        // NOTE: Assuming that objUser is a Firebase collection/dictionary, i.e.:
        //   {
        //     'firebase_unique_id_1': { ... },
        //     'firebase_unique_id_2': { ... },
        //     // ...
        //   }
        // Convert the Firebase collection/dictionary to array:
        if (objUser) {
            this.risultati = [];
	    this.risultatiKey = Object.keys(objUser);

            for (let id of this.risultatiKey) {
                  this.risultati.push(objUser[id]);
            }
        }
});

#13

So you’re suggesting me to move to Typescript? There are really some advantage moving in that way?

Ok for the variable declaration, always in the constructor, got it.

About the code I’m doing this:

this.risultatiObj = {};
this.risultati = [];
firebase.database().ref('/desideri').on('value', (snapshot) => {
    const objUser = snapshot.val();
    this.risultatiObj = objUser;
    this.risultati = objUser;
    this.risultatiKey = Object.keys(objUser);
});

It works as expected (I have just a little problem, the page doesn’t update itself when data are loaded, I have to click something to get the list rendered) so I think the type is treated as it should.
I just have the problem with the filter() function is undefined… I need a search stuff, in ionic1 there was the great filter based on ng-model, now It’s so confusing:

	onSearchInput(ricerca){
	    // set q to the value of the searchbar
	    var q = ricerca.value;
	    // if the value is an empty string don't filter the items
	    if (q.trim() == '') {
	      return;
	    }
	    this.risultati = this.risultati.filter((v) => {
	      if (v.toLowerCase().indexOf(q.toLowerCase()) > -1) {
	        return true;
	      }
	      return false;
	    })
	    this.risultati = risultatiObj;
	}

If I could use the old way to filter stuff well it’s so better…


#14

Tried to move to TypeScript but I get lots of errors that I can’t manage because of my no-knowledge of typescript (lots of ‘can’t find module or properties’) :unamused:


#15

Well, I would suggest you to use what you’re more comfortable with. I just had the impression that you might want to try TypeScript, therefore the additional information about it. About the advantages - it’s very subjective - some of its advantages are disadvantages in the eyes of others, but you could find some thoughts in the following topic or to search for more comprehensive comparison in Google.

I think that you should know what type of data to expect - it’s either a single object (in which case it’s the correct type) or a collection of objects (in such case your code is not handling it properly - check how to convert it to array in my answer above).

Have you started a new project or updated an old project. This sounds like a zone-related issue. On a side note, I would suggest you to upgrade your Node.js to the latest of the v4 or v5 releases (but not to v6).

Well, it’s up to you - you can either learn how to do the things in Ionic 2 or to keep using Ionic 1.

If you have just started a new Ionic 2 project it might be easier to restart it as a TypeScript one and move the app files and then to rename them appropriately. You might also need to install some additional typing definitions (typings) and make some updates to the JS code. But as I wrote above, it’s not necessary to use TypeScript if you’re more comfortable with JavaScript.


#16

Wow dude, you answer all of my questions :smiley:
Ok so: TypeScript is not necessary.
Firebase gives me a collection of objects, I have users, each user has his own data, so object into an object, I’ll find out how to make it work properly, but now I know that Ionic2 (angular2 I think is the main responsable) can’t handle annidiate objects, sadly.
I’ve started a brand new project, that’s why it’s an odd reaction to not show the data until I tap on something like the search bar or the menu buttons.
I’ve asked about the old Ionic1 search filter because was super-handy and ready-to-go. If Ionic2 doesn’t have that one well we all need to update our brain too :slight_smile:

About TypeScript I use Coda 2 that doesn’t handle the color of the TS code, but I think TypeScript is the most used at the moment by you guys, the most of the code I see is made in TypeScript, and I still don’t know how to convert it to Javascript so… I give Javascript a try, I think I just need to get how to do a couple of things (one of them is managing the constructor parameters) so I’ll get how to make it works.

Today I’m more motivate to make it work, now that I “know” what to try to do.

Really thanks @iignatov, I’ll let you updated about this, so this can help future people with the same “problem”.


#17

Thanks for helping out here @iignatov!

@portapipe feel free to reach out if you have anymore questions.


#18

I will. I’m still stuck with some stuff but I’m working on a Unity game atm so I’ll update this thread soon but not now :wink:


#19

Ok I’m on the code a bit.

One problem I get when I try to implement a Pipe is “Cannot find module 'angular2/core'” and I’ve take this code: Ionic2 searchbar very slow for 1000+ items

This is the equivalent (longer version but similar as I can see) of the ionic1 filter for ngFor, but it throws me error. Tried:

  • Angular2/common (same error)

  • ionic-angular (load in terminal but in the web page:

TypeError: (0, _ionicAngular.Pipe) is not a function. (In '(0, _ionicAngular.Pipe)({
  name: 'searchPipe'
})', '(0, _ionicAngular.Pipe)' is undefined)

I’m so tired, I’m rewriting this app for the third time and is a quite complex social network. With this kind of “stops” I’ll never finish it :cry:


#20

In rc0, everything in “angular2” moved to “@angular”.