Content not being displayed : Angular 2

Question

I'm working on a feature for my website to provide news feed. To get news feed, I have generated an API key from here : News API. The problem I'm facing is that, I'm not able to display the content in my browser. Let me share my code :

results.component.html

<ul type="none" id="search-options">
   <li [class.active_view]="Display('all')" (click)="docClick()">All</li>
   <li [class.active_view]="Display('news')" (click)="newsContent()">News</li>
   <li [class.active_view]="Display('images')" (click)="imageClick()">Images</li>
   <li [class.active_view]="Display('videos')" (click)="videoClick()">Videos</li>
</ul>

In results.component.html, it has 4 tabs. In tabs with name : All, Image, Video - I'm getting data from the server from which the desired results are fetched based on query. But in News tab, I'm trying to integrate it with the API which I have mentioned above. Clicking on that tab, should show news feed (just keeping it simple). But, it does not displays anything when news tab is clicked. (No console errors) However, if I use html repeater, how I'm going to use it here ?

news.component.ts

newsFeed: {};
resultDisplay: string;

constructor(private _newsService: NewsService) {}

Display(S) {
  return (this.resultDisplay === S);
}

newsContent() {
  this.resultDisplay = 'news';
  this._newsService.getNews().subscribe(data => {
    this.newsFeed = Object.assign({}, data);
  });
}

news.service.ts

import { Injectable } from '@angular/core';
import { Http, Jsonp } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class NewsService {

  public generalNews: string = 'https://newsapi.org/v1/articles?source=bbc-news&sortBy=top&apiKey=abc123';

  constructor(
    private http: Http,
    private jsonp: Jsonp
  ) { }

  getNews() {
    return this.http.get(this.generalNews).map(response => {
      response.json()
    });
  }
}

It would be great if anybody can point out what mistake I'm doing and provide me the solution to improve it. Thanks in advance. :)

Answer 1

Based on what I got from your question. You should do the following.

Have a repeater on your html first. Something like:

<div *ngFor = "let news of newsList">
    <p> {{news}} </p>
</div>

This way you can iterate the news array on your html one news at a time.

Next thing, is getting the response and passing it to the view. I am assuming you get the news on click of <li>, as that is all your view presently contains. So in your component you should have

private newsList: any[] = [] //initializing a blank list of type any.

newsContent() {
  this.resultDisplay = 'news'; //not sure why you need this, but let it be for now
  this._newsService.getNews().subscribe(data => {
    this.newsList = data; //assuming data is the actual news array, if the data is entire response you might have to go for data.data
  });
}

This way your newsList variable is populated and will be iterated on the html. May be you might have to make few adjustment but it should help you start.

Let me know if it helps or any further issue faced.

Few more changes would be required based on your response:

First : return data from your service method like:

getNews() {
    return this.http.get(this.generalNews).map(response:any => {
      return response.json()
    });
  }

Second, your data contains news in article array. So use that instead:

newsContent() {
      this.resultDisplay = 'news'; //not sure why you need this, but let it be for now
      this._newsService.getNews().subscribe(data => {
        this.newsList = data.article; //assuming data is the actual news array, if the data is entire response you might have to go for data.data
      });
    }

Next edit your html to bind a particular field of your news. I am binding title you can bind one or more that you like:

 <div *ngFor = "let news of newsList">
        <p> {{news.title}} </p>
    </div>

Try this. should work now.

Answer 2

You have missed return statement return response.json().

news.service.ts

import { Injectable } from '@angular/core';
import { Http, Jsonp } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class NewsService {

  public generalNews: string = 'https://newsapi.org/v1/articles?source=bbc-news&sortBy=top&apiKey=abc123';

  constructor(
    private http: Http,
    private jsonp: Jsonp
  ) { }

  getNews() {
    return this.http.get(this.generalNews).map(response => {
      return response.json();
    });
  }
}