I have very simple code which using Github API. I have no error in my console but data ing to my console but not able to display in View. Somebody, please help me. I am not able to figure it out.

Service Class:

import {
    Injectable
} from '@angular/core';
import {
    Http
} from '@angular/http';
import 'rxjs/Rx';

@Injectable()
export class GithubService {
    constructor(private http: Http) {}
    getUser(searchKey) {

        const url = '=' + searchKey;
        return this.http.get(url).map(res => res.json())
    }
}

Method I am calling inside Component.

getUser(value) {
    return this.gitHubService.getUser(value)
        .subscribe(results => {
            this.results = this.results;
            console.log(value);
            console.log(results);

        });
}

and This Is my view html.

<div>
    <br /><br />
    <br /><br /><br /> Enter Value: <input type="text" [(ngModel)]="searchKey">
    <button (click)="getUser(searchKey)">Search</button>
    <ol>
        Data:
        <ul *ngFor="let result of results">
            {{result.login}} {{result.html_url}}
        </ul>
    </ol>
</div>

I have very simple code which using Github API. I have no error in my console but data ing to my console but not able to display in View. Somebody, please help me. I am not able to figure it out.

Service Class:

import {
    Injectable
} from '@angular/core';
import {
    Http
} from '@angular/http';
import 'rxjs/Rx';

@Injectable()
export class GithubService {
    constructor(private http: Http) {}
    getUser(searchKey) {

        const url = 'https://api.github./search/users?q=' + searchKey;
        return this.http.get(url).map(res => res.json())
    }
}

Method I am calling inside Component.

getUser(value) {
    return this.gitHubService.getUser(value)
        .subscribe(results => {
            this.results = this.results;
            console.log(value);
            console.log(results);

        });
}

and This Is my view html.

<div>
    <br /><br />
    <br /><br /><br /> Enter Value: <input type="text" [(ngModel)]="searchKey">
    <button (click)="getUser(searchKey)">Search</button>
    <ol>
        Data:
        <ul *ngFor="let result of results">
            {{result.login}} {{result.html_url}}
        </ul>
    </ol>
</div>

• javascript
• angular
• angular-services

• 2 this.results=this.results should be this.results = results – Vinod Bhavnani Commented Dec 11, 2017 at 13:08
• Also in your template you are creating multiple ul instead of li – Vinod Bhavnani Commented Dec 11, 2017 at 13:11
• 1 Thank You Vinod. I have solved the issue. Actually I was missing my reponse object. I am getting response as items. So I have added your part this.results=results and this <li *ngFor="let result of results.items"> {{result.login}}</li> and rest I kept same. – SUBHASIS MONDAL Commented Dec 12, 2017 at 5:23

3 Answers 3

There is a problem in your subscribe:

It should be this.results = results instead of this.results = this.results.

You are assigning this.results to itself.

Also, in your template instead of <ul ngFor= "let result of results"></ul> it should be:

<ul>
    <li ngFor="let result of results">{{result.login}} {{result.html_url}}</li>
</ul>

1) Remove .subscribe and let the getUser method return an Observable and assign it to a variable, in your case just call it results$ ($ means this var is an Observable)

getUser(value){
    this.results$ = this.gitHubService.getUser(value);
}

2) In the view side, change your ngFor with:

<ul *ngFor="let result of results$ | async">

Here are some links that should help you to understand: Observable documentation and Angular2 observables example

I have solved the issue as vinod-bhavnani suggested I have added

this.results = results, now it looks-

getUser(value){
 return this.gitHubService.getUser(value)
  .subscribe(results=>{
    this.results=results;
    console.log(value);
    console.log(results);

  });

and

<ul>
    <li *ngFor="let result of results.items">{{result.login}} {{result.html_url}}</li>
</ul>

as I saw My response is ing as Items. So instead of results I have added results.items.