Shorting list by name - Angular 5 + Firebase












0















I have created a service where I get all the elements of my database:



Service



 getElements() {
return (this.eleList= this.firebase.list("elements"));
}


Component



eleList: Element;
getBets() {
return this.databaseService
.getElements()
.snapshotChanges()
.subscribe(item => {
this.eleList= ;
item.forEach(element => {
let x = element.payload.toJSON();
x["$key"] = element.key;
this.eleList.push(x as Element);
});
});
}


With these two methods what I do is to store all my elements in this.eleList.



I would like to create a new method, named filterByName(name), where I would update this.eleList to an array which contains only the ones that contain namein the object, for example, this.eleList[1].name



I do not know if Firebase provides a way to short it, or I need to use Javascript/Typescript for it.










share|improve this question

























  • Firebase will not return it in the sorted order. you need to use some map filters to achieve the desired output.

    – Rohit.007
    Nov 14 '18 at 12:52
















0















I have created a service where I get all the elements of my database:



Service



 getElements() {
return (this.eleList= this.firebase.list("elements"));
}


Component



eleList: Element;
getBets() {
return this.databaseService
.getElements()
.snapshotChanges()
.subscribe(item => {
this.eleList= ;
item.forEach(element => {
let x = element.payload.toJSON();
x["$key"] = element.key;
this.eleList.push(x as Element);
});
});
}


With these two methods what I do is to store all my elements in this.eleList.



I would like to create a new method, named filterByName(name), where I would update this.eleList to an array which contains only the ones that contain namein the object, for example, this.eleList[1].name



I do not know if Firebase provides a way to short it, or I need to use Javascript/Typescript for it.










share|improve this question

























  • Firebase will not return it in the sorted order. you need to use some map filters to achieve the desired output.

    – Rohit.007
    Nov 14 '18 at 12:52














0












0








0








I have created a service where I get all the elements of my database:



Service



 getElements() {
return (this.eleList= this.firebase.list("elements"));
}


Component



eleList: Element;
getBets() {
return this.databaseService
.getElements()
.snapshotChanges()
.subscribe(item => {
this.eleList= ;
item.forEach(element => {
let x = element.payload.toJSON();
x["$key"] = element.key;
this.eleList.push(x as Element);
});
});
}


With these two methods what I do is to store all my elements in this.eleList.



I would like to create a new method, named filterByName(name), where I would update this.eleList to an array which contains only the ones that contain namein the object, for example, this.eleList[1].name



I do not know if Firebase provides a way to short it, or I need to use Javascript/Typescript for it.










share|improve this question
















I have created a service where I get all the elements of my database:



Service



 getElements() {
return (this.eleList= this.firebase.list("elements"));
}


Component



eleList: Element;
getBets() {
return this.databaseService
.getElements()
.snapshotChanges()
.subscribe(item => {
this.eleList= ;
item.forEach(element => {
let x = element.payload.toJSON();
x["$key"] = element.key;
this.eleList.push(x as Element);
});
});
}


With these two methods what I do is to store all my elements in this.eleList.



I would like to create a new method, named filterByName(name), where I would update this.eleList to an array which contains only the ones that contain namein the object, for example, this.eleList[1].name



I do not know if Firebase provides a way to short it, or I need to use Javascript/Typescript for it.







list typescript firebase firebase-realtime-database angularfire2






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 14 '18 at 14:19









Frank van Puffelen

234k29380407




234k29380407










asked Nov 14 '18 at 12:43









MarioMario

3891423




3891423













  • Firebase will not return it in the sorted order. you need to use some map filters to achieve the desired output.

    – Rohit.007
    Nov 14 '18 at 12:52



















  • Firebase will not return it in the sorted order. you need to use some map filters to achieve the desired output.

    – Rohit.007
    Nov 14 '18 at 12:52

















Firebase will not return it in the sorted order. you need to use some map filters to achieve the desired output.

– Rohit.007
Nov 14 '18 at 12:52





Firebase will not return it in the sorted order. you need to use some map filters to achieve the desired output.

– Rohit.007
Nov 14 '18 at 12:52












1 Answer
1






active

oldest

votes


















1














Firebase takes full advantage of the observables and async pipes.



You should take advantage of that :



eleList$ = new Subject();

getElements() {
this.this.firebase.list("elements")
.pipe(take(1))
.subscribe(list => this.eleList$.next(list));
}

getBets() {
this.databaseService
.getElements()
.snapshotChanges()
.pipe(
map(item => items.map(element => ({
...element.payload.toJSON(),
'$key': element.key
})))
)
.subscribe(elements => this.eleList$.next(list));
}


Now for a sorted list :



sortedList$ = this.eleList$.pipe(
map(elements => elements.filter(element => !!element.name))
);





share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53300518%2fshorting-list-by-name-angular-5-firebase%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    Firebase takes full advantage of the observables and async pipes.



    You should take advantage of that :



    eleList$ = new Subject();

    getElements() {
    this.this.firebase.list("elements")
    .pipe(take(1))
    .subscribe(list => this.eleList$.next(list));
    }

    getBets() {
    this.databaseService
    .getElements()
    .snapshotChanges()
    .pipe(
    map(item => items.map(element => ({
    ...element.payload.toJSON(),
    '$key': element.key
    })))
    )
    .subscribe(elements => this.eleList$.next(list));
    }


    Now for a sorted list :



    sortedList$ = this.eleList$.pipe(
    map(elements => elements.filter(element => !!element.name))
    );





    share|improve this answer




























      1














      Firebase takes full advantage of the observables and async pipes.



      You should take advantage of that :



      eleList$ = new Subject();

      getElements() {
      this.this.firebase.list("elements")
      .pipe(take(1))
      .subscribe(list => this.eleList$.next(list));
      }

      getBets() {
      this.databaseService
      .getElements()
      .snapshotChanges()
      .pipe(
      map(item => items.map(element => ({
      ...element.payload.toJSON(),
      '$key': element.key
      })))
      )
      .subscribe(elements => this.eleList$.next(list));
      }


      Now for a sorted list :



      sortedList$ = this.eleList$.pipe(
      map(elements => elements.filter(element => !!element.name))
      );





      share|improve this answer


























        1












        1








        1







        Firebase takes full advantage of the observables and async pipes.



        You should take advantage of that :



        eleList$ = new Subject();

        getElements() {
        this.this.firebase.list("elements")
        .pipe(take(1))
        .subscribe(list => this.eleList$.next(list));
        }

        getBets() {
        this.databaseService
        .getElements()
        .snapshotChanges()
        .pipe(
        map(item => items.map(element => ({
        ...element.payload.toJSON(),
        '$key': element.key
        })))
        )
        .subscribe(elements => this.eleList$.next(list));
        }


        Now for a sorted list :



        sortedList$ = this.eleList$.pipe(
        map(elements => elements.filter(element => !!element.name))
        );





        share|improve this answer













        Firebase takes full advantage of the observables and async pipes.



        You should take advantage of that :



        eleList$ = new Subject();

        getElements() {
        this.this.firebase.list("elements")
        .pipe(take(1))
        .subscribe(list => this.eleList$.next(list));
        }

        getBets() {
        this.databaseService
        .getElements()
        .snapshotChanges()
        .pipe(
        map(item => items.map(element => ({
        ...element.payload.toJSON(),
        '$key': element.key
        })))
        )
        .subscribe(elements => this.eleList$.next(list));
        }


        Now for a sorted list :



        sortedList$ = this.eleList$.pipe(
        map(elements => elements.filter(element => !!element.name))
        );






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 14 '18 at 12:52









        trichetrichetrichetriche

        26.7k42255




        26.7k42255
































            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53300518%2fshorting-list-by-name-angular-5-firebase%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Bressuire

            Vorschmack

            Quarantine