CODEWITHSUNDEEP
jsonangularhttpcrudangular2-observables
E. Max
E. Max

Reputation: 29

Working with data from observable in a component in Angular 6

I am not sure if I have phrased this question correctly, so I apologize for the clunky wording. I am relatively new to angular but am pretty comfortable with making HTTP requests and working with the data in other frameworks (like VueJS). I am beginning to understand the Observables that angular uses. I am trying to make a blog application, and have an express backend that has the JSON for the blog posts.

In my post.service.ts I have: 

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';

import { Post } from '../post';

@Injectable({
  providedIn: 'root'
})

export class PostService {

  private apiUrl = 'http://localhost:8081/posts';

  getPosts(): Observable<Post[]> {
    return this.http.get<Post[]>(this.apiUrl);
  }

constructor( private http: HttpClient,
  private postService: PostService ) { }

}

And then I want to list all the posts in my post-list.component.ts: 

import { Component, OnInit } from '@angular/core';
import { PostService } from '../../services/post.service'
import { Post } from '../../post';


@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.css']
})

export class PostListComponent implements OnInit {

  public posts = [];

  constructor(private postService: PostService) {  }

  ngOnInit() {
    this.postService.getPosts()
      .subscribe(data => this.posts = data);
  }
}

But the posts array becomes an object and i'm not sure how to use it as an array. If I try to use the *ngFor method, I get an error. The page shows [object Object] if I put {{posts}} in the html. If i do {{posts | json}} it shows the actual JSON, but I still cannot iterate through it.

This is what the json looks like: 

{
    "posts": [
    {
        "_id": "5b04b269fde3ca29b35ffc3e",
        "name": "Mike",
        "title": "Stuff",
        "post": "This is a post about stuff"
    },
    {
        "_id": "5b04b24dfde3ca29b35ffc3d",
        "name": "OtherUser",
        "title": "New Post Test",
        "post": "This is a test post"
    },
    {
        "_id": "5b02ed783aa641758c08e601",
        "name": "Emerjawn",
        "title": "Post"
    }
    ]
}

Before I try to setup CRUD for this application, I want to simply figure out how to display the data which I still cannot do and it is driving me insane. Thank you in advance for the help.

Upvotes: 1

Views: 1980

Answers (1)

sugarme
sugarme

Reputation: 761

Your return JSON is an object which has field posts holding your needed array data so just take posts field from your server response and render such array of posts. Something like this: 

ngOnInit() {
    this.postService.getPosts()
      .subscribe(data => this.posts = data.posts);
  }

For better typing you can always specify your variable type i.e. public posts: Post[] then you will have type checking while coding.

Upvotes: 1

Related Questions