Get Json from Localhost

Question

I am trying to get some Json from http://localhost:3000/clientes, in Angular 5, and load it into a table.

I can just load Json in table when it is in /assets/

This is the code in general.component.ts

constructor (private httpService: HttpClient) { }
  myVals: string [];

  ngOnInit () {
    this.httpService.get('./assets/person.json').subscribe(
      data => {
        this.myVals = data as string [];   
      },
      (err: HttpErrorResponse) => {
        console.log (err.message);
      }
    );
  }

And this is the body of my table

<tr *ngFor="let item of myVals">
                 <td class="text-center" style="width: 15px;">{{item.ID}}</td>
                 <td class="text-center" style="width: 15px;">{{item.Name}}</td>
                 <td class="text-center" style="width: 200px;">{{item.CPF}}</td>
                 <td class="text-center">{{item.body}}</td>
             </tr>

I am searching a lot, but nothing that could help me, so far. Thanks

if you set a breakpoint at this.myVals = data as string []; does the this.myVals get populated correctly? Also, I'd replace subscribe with map, after get. See this SO: https://stackoverflow.com/questions/40347814/how-to-map-response-object-returned-by-http-service-to-a-typescript-objects-usin?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa — amy8374, Mar 27 '18 at 17:39
@amy8374 The new `HttpClient` by default formats the response to `JSON` so we no longer need to parse it using `map` — Vikas, Mar 27 '18 at 17:44
@Vikas sorry if it is not clear. But my question is: How can I load the Json in localhost:3000/clientes into the table? If I just replace the url in the working code, doesn't work — Leonardo Assunção, Mar 27 '18 at 17:54
If I uderstand correctly, "clients" is a local folder from which you are trying to read a json. In that case show us the folder structure of your app, your pathmay be wrong. However if "clients" is in a different server, I would first hit thr URL and verify that the json is correctly displayed in a browser before moving to parsing it using angular. — SamwellTarly, Mar 27 '18 at 18:01
@SamwellTarly the json is in a server, I try it in browser and I can see it — Leonardo Assunção, Mar 27 '18 at 18:03
Do you get any error in the console? It might be a cors issue. Which port is your angular app using? — David, Mar 27 '18 at 19:09

score 1 · Answer 1 · answered Mar 27 '18 at 18:06

You can tell HttpClient the type of the response to make consuming the output easier and more obvious.

export interface Items {
  ID: string;//change the type according to your response
  NAME: string;
  CPF:string;
}

import it into your general.component.ts. and then you can cast the observable to type Items Array

private url ='http://localhost:3000/clientes';
public myVals=[];
ngOnInit () {
    this.httpService.get<Items[]>(this.url).subscribe(
      data => {
        this.myVals = data;   
      },
      (err: HttpErrorResponse) => {
        console.log (err.message);
      }
    );
  }

Get Json from Localhost

1 Answers1