(Angularfire) Retrieve specific data from firebase database with id

Question

I'm trying to create a "blog" with angular and firebase. I'm doing fine for my first project with both Angular and Firebase.

I made the frontpage where all the entries are loaded and then added a "read more..." hyperlink to the route of the specific article plus the id of the entry. Here's the HTML:

<div style="background-color:white" class=" contenedorBlog">

    <h1 style="padding-top:100px;" class="text-center mb-4">Pizarrón</h1>

    <div *ngFor="let item of items" style="padding:40px" class="rounded">
      <h2> {{item.title}} </h2>
      <p>Date: {{ item.systemDate }}</p>
      <div class="content" [innerHTML]="item.content"></div>
      <a [routerLink]="['/article', item.id]">Read more...</a>
    </div>

  </div>

And here's the HTML of the article component:

<div style="background-color:white" class=" contenedorBlog">

    <div style="padding:40px" class="rounded">
      <h2> {{items.title}} </h2>
      <p>Fecha: {{ items.systemDate }}</p>
      <div class="content" [innerHTML]="items.content"></div>
    </div>

  </div>

I'm trying to figure out how can i call the specific object having the id on the route (article/:id).

this is what i have so far (article.component.ts)

export class ArticlesComponent implements OnInit {

   items:any;

   constructor(private blogService: UploadService, private route: ActivatedRoute) {
      this.route.params.subscribe(params=> {
      this.items=this.blogService.getObjectById(params['id']);
   });
   }

   ngOnInit() {
   }

}

Problem is... i don't know what to do next. I'm calling a function insde a service that i want to retrieve me ONLY the object that contains the id that's on the route.

getObjectById(id) {
    ///Help
}

Thank you very much and sorry for my not that great english.

Null_teke · Accepted Answer · 2018-06-01 04:37:35Z

3

Change:

this.items=this.blogService.getObjectById(params['id']);

to:

this.blogService.getObjectById(params['id']).subscribe( i => {
        this.items = i;
    })

Them in getObjectById(id) :

getObjectById(id) { 
     return this.afs.collection('collectionName').doc(id).valueChanges()
}

If you want just one time the value use ".take(1)" before the ".subscribe"

Also you need to put *ngIf="items" in the element where you display "items" if you don't want see the "undefined" error.

edited Jun 1, 2018 at 4:37

answered Jun 1, 2018 at 4:26

Null_teke

964 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lazaro Henrique · Accepted Answer · 2018-06-01 14:14:41Z

2

Define a AngularFirestore variable on your constructor, then use it in your function like this:

constructor(private afs: AngularFirestore){
  this.route.params.subscribe(params=> {
    this.getObjectById(params['id']);
  });
}

getObjectById(id) {
    return this.afs.collection('collection_name')
      .doc(id)
      .ref;
}

And then you might use the function on your component like:

this.blogService.getObjectById(params['id']).get().then(res => {
    console.log(res)
})

edited Jun 1, 2018 at 14:14

answered Jun 1, 2018 at 1:30

Lazaro Henrique

6677 silver badges9 bronze badges

3 Comments

Tagz Over a year ago

Hey, thank you very much... But it looks like it's not doing anything in my code, not even an error.

Tagz Over a year ago

When i console log it, it prints an object like this: Object { _key: {…}, firestore: {…}, _firestoreClient: {…} } articles.component.ts:18:6

Lazaro Henrique Over a year ago

@Tagz The function there is returning just a reference to the object. I've edited my answer for how to access the document.

Collectives™ on Stack Overflow

(Angularfire) Retrieve specific data from firebase database with id

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related