Home / Questions / 117014
Accepted
Mario López Batres
Asked: 2020-11-14 07:12:55 +0800 CST 2020-11-14 07:12:55 +0800 CST

NgFor only supports binding to Iterables such as Arrays

  • 772

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

ERROR to solve

ERROR Error: Cannot 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 that I have created, I call said service:

Component.ts

    ngOnInit() {
    this.getSystems();
  }

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

The problem is that I am not dealing with an Array of information, but with an object, so I cannot use the *ngfor command.

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>

From what I've read, the solution would be to create a @Pipe but I'm not sure how it works. Could someone clarify for 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 answer 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 do

   /** 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 Mistake 1

Service - Solution 2 I have also tried to make the service call 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 Mistake 2

Could someone tell me what I'm doing wrong? I don't care if I use option 1 or option 2 of the service. Cheers

javascript

2 Answers

  1. Best Answer

    Try making 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 response is an object of the form

    {
  "test": [ ... ]
}

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

    Be careful with the differences of Angular 2 and Angular 4 with HTTP

    • 2

  2. if it returns an object, it usually gives you an error because they are Asynchronous processes when you show the value it shows that it 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 verify more in the answer in english

    A variation of @Pablo Lozano 's answer

    • 1