I attempted to retrieve my last commit from GitHub using the GitHub API, but encountered an error:
Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays."
I was able to fetch data from a simple JSON file and used a service with code similar to the following. However, now it's not working for me. Link to JSON: JSON When I fetch data from this JSON, I don't encounter any errors and can display what I need.
This is my GitHub service:
import { Injectable } from '@angular/core';
import { Http, Response, HttpModule } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { IpostsGithub } from './ipostsGithub'
@Injectable()
export class GithubService {
private _postsURL = "https://api.github.com/repos/objectprogr/Dashboard/git/refs/heads/v1";
constructor(private http: Http) {
}
getPosts(): Observable<IpostsGithub[]> {
return this.http
.get(this._postsURL)
.map((response: Response) => {
return <IpostsGithub[]>response.json();
})
}
private handleError(error: Response) {
return Observable.throw(error.statusText);
}
}
GitHub component:
import { Component, OnInit } from '@angular/core';
import { GithubService } from './github.service';
import { IpostsGithub } from './ipostsGithub';
@Component({
selector: 'app-github',
templateUrl: './github.component.html',
styleUrls: ['./github.component.css'],
providers: [ GithubService]
})
export class GithubComponent implements OnInit {
_postsArray: IpostsGithub[];
user: string;
constructor(private githubService: GithubService, ) {
}
getPost(): void {
this.githubService.getPosts()
.subscribe(
resultArray => this._postsArray= resultArray,
error => console.log("Error :: " + error)
)
}
ngOnInit(): void {
this.getPost();
}
}
And HTML:
<table class="table">
<thead>
<th>1</th>
</thead>
<tbody>
<tr *ngFor="let post of _postsArray">
<td>{{post.message}}</td>
</tr>
</tbody>
</table>
This is the error code that appears in the browser console:
_postsArray: […]
0: {…}
object: {…}
sha: "f0814bea75841ef7488552d29c6e1b8ad849f558"
type: "commit"
url: "https://api.github.com/repos/objectprogr/Dashboard/git/commits/f0814bea75841ef7488552d29c6e1b8ad849f558"
__proto__: Object { … }
ref: "refs/heads/v1"
url: "https://api.github.com/repos/objectprogr/Dashboard/git/refs/heads/v1"
Any ideas on how to fix this issue?