Ytukyg

I want to put on a HTML component, the variables of objects which become from a service. And I can't.

My component is:

import { Component, OnInit } from '@angular/core';

import { FormGroup, FormControl } from '@angular/forms';

import { Profesional, ProfesionalService} from '../../profesional.service';





@Component({

  selector: 'app-gestion-profesionales',

  templateUrl: './gestion-profesionales.component.html',

  styleUrls: ['./gestion-profesionales.component.css']

})

export class GestionProfesionalesComponent implements OnInit {

  prof = new Array<Profesional>();

  tags;







  constructor(private profesionalService: ProfesionalService) { }



  ngOnInit() {

    this.allProf();

  }

    allProf(): void {

    this.profesionalService.getProfesionales()

      .subscribe(data => {

        this.prof= data;

        console.log(this.prof);



      });

  }

}

My service is :

import { Injectable } from '@angular/core';

import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';

import { of } from 'rxjs/observable/of';

import { catchError, map, tap } from 'rxjs/operators';



export interface Profesional {

  ID: number;

  Name: string;

  College: string;

  DNI: string;

  Surname: string;

  Email: string;

  Password: string;

  Phone: string;

  Photo: string;

}





const httpOptions = {

  headers: new HttpHeaders({ 'Content-Type': 'application/json' })

};



@Injectable()

export class ProfesionalService {



  private profesionalesUrl = 'https://h205.eps.ua.es:8080/profesionales';  // URL to web api



  constructor(

    private http: HttpClient

  ) { }



  /** GET obtenemos todos los profesionales */

  getProfesionales (): Observable<Profesional> {

    return this.http.get<Profesional>(this.profesionalesUrl)

      .pipe(

        tap(profesionales => this.log(`fetched profesionales`)),

        catchError(this.handleError('getProfesionales', ))

      );

  }

}

And when I do the request, everything is OK. The JSON response is like this:

Object results:

Array(35)

0: {ID: "1", DNI: "71955507F", College: "mimi", Name: "pepe", Surname: "popo", …}

1: {ID: "_09y4nb7b1", DNI: "434632tnm", College: "siuno", Name: "Matasanos", Surname: "Berenguer Pastor", …}

So, I have problems to show on my HTML component the info. I want to do it with ng-for, but it doesn't work. It appears this error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

<table>

  <tr>

    <th>Name</th>

    <th>Surname</th>

    <th>Phone number</th>

    <th>Email</th>

  </tr>

 <tbody>



   <tr *ngFor="let item of prof">

    <td>{{ item.Name }}</td>

    <td>{{ item.Surname }}</td>

    <td>{{ item.Phone }}</td>

    <td>{{ item.Email }}</td> 

   </tr>



 </tbody>

</table>

Maybe is due to the variable prof that is form by Profesional instances. I don't know how to show the info in the correct way.

you got JSON array not Javascript Object from api, that's why when javascript try to loop that's show the error, because your try gets an object you don't have.

Use JSON.parse() function in order to convert it to JS object.

change these line

this.prof = data

with

this.prof = JSON.parse(data);

so it's like this

 ngOnInit() {

    this.allProf();

  }

    allProf(): void {

    this.profesionalService.getProfesionales()

      .subscribe(data => {

        this.prof = JSON.parse(data);

        console.log(this.prof);



      });

  }