Angular: cannot find a different supporting object '[object Object]'

Question

Following this tutorial . On the way to getting the list of users from api.github Im we get the error:

Cannot find a different supporting object "object object"

I think this is due to

 <ul>
 <li *ngFor = "#user of users">
 {{user | json}}
 </li>
 </ul>

In my code, because there was no error in front of it, and I'm not sure that the data comes from a request for receipt, just by clicking, did not give any error, here is my code so far

@Component({
selector: 'router',
pipes : [],

template: `
<div>
<form [ngFormModel] = "searchform">
      <input type = 'text' [ngFormControl]= 'input1'/>
</form>
     <button (click) = "getusers()">Submit</button>
</div>
<div>
<ul>
    <li *ngFor = "#user of users">
    {{user | json}}
    </li>
</ul>
</div>
<router-outlet></router-outlet>
`,
directives: [FORM_DIRECTIVES]
})
export class router {
searchform: ControlGroup;
users: Array<Object>[];
input1: AbstractControl;

constructor(public http: Http, fb: FormBuilder) {
    this.searchform = fb.group({
        'input1': ['']
    })
    this.input1 = this.searchform.controls['input1']
}
getusers() {
    this.http.get(`https://api.github.com/
search/users?q=${this.input1.value}`)
        .map(response => response.json())
        .subscribe(
        data => this.users = data,
        error => console.log(error)
        )
}
}
bootstrap(router, [HTTP_PROVIDERS])

Answer 1

, , , . , , , . ...

- :

getusers() {
  this.http.get(`https://api.github.com/search/users?q=${this.input1.value}`)
    .map(response => response.json().items) // <------
    .subscribe(
      data => this.users = data,
      error => console.log(error)
    );
}

Edit

Github (developer.github.com/v3/search/#search-users), :

{
  "total_count": 12,
  "incomplete_results": false,
  "items": [
    {
      "login": "mojombo",
      "id": 1,
      (...)
      "type": "User",
      "score": 105.47857
    }
  ]
}

, items, :

getusers() {
  this.http.get(`https://api.github.com/search/users?q=${this.input1.value}`)
    .map(response => response.json().items) // <------
    .subscribe(
      data => this.users = data,
      error => console.log(error)
    );
}

Answer 2

, JSON.parse(result).

, .

. :

"[{},{}]" 

:

[{},{}]

---

import { Storage } from '@ionic/storage';
...
private static readonly SERVER = 'server';
...
getStorage(): Promise {
  return this.storage.get(LoginService.SERVER);
}
...
this.getStorage()
  .then((value) => {
     let servers: Server[] = JSON.parse(value) as Server[];
                   }
  );

Answer 3

input . :

Component Foo {
    @Input()
    bars: BarType[];
}

:

<app-foo [bars]="smth"></app-foo>

( ):

<app-foo bars="smth"></app-foo>

Answer 4

Something that caught me several times was the presence on the page of another variable with the same name.

For example, in the example below, the data for NgForis in requestsvariables. But there is also a variable #requestsused for if-else

<ng-template #requests>
  <div class="pending-requests">
    <div class="request-list" *ngFor="let request of requests">
      <span>{{ request.clientName }}</span>
    </div>
  </div>
</ng-template>