NgFor only supports binding to Iterables such as Arrays

Question

NgFor only supports binding to Iterables such as Arrays

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

Good morning, I am new at Angular2 and I have some problems with the use of Observables and components

ERROR to be fixed

ERROR Error: Can not find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

I have a REST service that returns a JSON with certain information. From the component I created, I call this service:

Component.ts

    ngOnInit() {
    this.getSystems();
  }

  getSystems(): void {
    this.systemService.getSystems()
    .subscribe(systems => this.systems = systems);
  }

The problem is that I do not deal with an information array, but with an object, so I can not use the command * ngfor

Component.html

 <li *ngFor="let system of systems">
    <a routerLink="/systemDetail/{{system.systemId}}">
        <span class="badge">{{system.systemId}}</span> 
        {{system.host}}
        {{system.password}}
        {{system.port}}
        {{system.rfcDest}}
        {{system.userId}}
        {{system.version}}
    </a>
  </li>

As I've read, the solution would be to create an @Pipe but I'm not sure how it works. Can someone explain it to me?

JSON

{
    "test":
    [
        {
            "host": "h265",
            "messagingSystemID": "1",
            "password": "xxx,
            "port": "50000",
            "rfcDest": "testDes",
            "systemID": "PPO",
            "userId": "TestUser",
            "version": "7.5"
        },
        {
            "host": "h455",
            "messagingSystemID": "2",
            "password": "xxx",
            "port": "50000",
            "rfcDest": "testDes2",
            "systemID": "PPO",
            "userId": "TestUser",
            "version": "7.5"
        }
    ]
}

Expected response My intention is to print these systems in text, table, or any other way possible. But all of them.

Service - Option 1 This is the first solution I tried to make

   /** GET systems from the server */
  getSystems (): Observable<System[]> {
    var data = this.http.get<System[]>(this.systemsUrl);
    console.log('getSystems service');
    console.log(data);
    return data;
  }

Error displayed

Service - Solution 2 I have also tried to call the service in the following way:

   getSystems(): Observable<System[]> {
       let url = 'http://10.8.0.2:50000/integration.experts~web~mappingtesttool/rest/systems';
        console.log(url);
        return this.http.get(url)
          .map(this.extractData);
  }

    private extractData(res: Response) {
      let body = res.json();
      console.log("extraData");
      return body || { }; // here
    }

Error displayed

Could anyone tell me what I'm failing? I am indifferent to use option 1 or option 2 of the service. Greetings

javascript angularjs-2.0 rest iteraciones pipe

asked by Mario López Batres 13.11.2017 в 16:12

source

2 answers

1

If you return an object, it usually gives you an error because they are Asynchronous processes when you show the sample value that does not exist, what you should do is the following:

<a routerLink="/systemDetail/{{system?.systemId}}">
    <span class="badge">{{system?.systemId}}</span> 
    {{system?.host}}
    {{system?.password}}
    {{system?.port}}
    {{system?.rfcDest}}
    {{system?.userId}}
    {{system?.version}}
</a>

You can check more in the answer in English

A variation of the response from @Pablo Lozano

answered by 13.11.2017 в 16:48

Error: Execution failed for task ': app: transformDexArchiveWithExternalLibsDexMergerForDebug' Detect enter key with jquery

score 2 · Accepted Answer

Try to make this change:

getSystems(): Observable<System[]> {
   let url = 'http://localhost:50000/...';
    console.log(url);
    return this.http.get(url)
      .map(this.extractData);
}

private extractData(res: Response) {
  let body = res.json();
  console.log("extraData: ");
  if (body && body.test) {
    body=body.test;
  }
  return body || []; // devolvemos un array vacio si la respuesta no tiene un array
}

Explanation: The answer is an object of the form

{
  "test": [ ... ]
}

But you want the array of systems that comes in and that is iterable, not the object that contains it.

Beware of the differences in Angular 2 and Angular 4 with HTTP