How to make fetch data from web api Angular 6

Question

I am a new angular developer but I don't know where I mistake. I find a lot of sources but ı did not adapt my codes. My codes do not work or make get from web client Could you help me with this issue?

My example JSON Data :

{ "id": "123aCaA-9852", "name": "A bank", "address": "adres", "contactName": "Example name", "contactSurname": "Exmple", "contactPhone": "12312312312", "status": false, "city": { "id": 40, "name": "Turkey", "code": 34 }, My Example ts:

export class Kafein {
    name:string;
    address:string;
}

My example kafein.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Kafein } from './kafein';
import { Observable } from 'rxjs/internal/Observable';
@Component({
  selector: 'app-kafein',
  templateUrl: './kafein.component.html',
  styleUrls: ['./kafein.component.css']
})
export class KafeinComponent implements OnInit {
  title = "Kafein";
  //kafein:Observable<Kafein[]>;
  kafein:Kafein[];
  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.getProducts();
  }
  getProducts(){

   //this.kafein = this.http.get<Kafein[]>('http:example');
   this.http.get<Kafein[]>('http:example').subscribe(res=>{this.kafein=res});

  } 

}

My example component.html

<tr *ngFor='let kafein of Kafein'>
        <th scope="row">1</th>
        <td>{{kafein.name}}</td>
        <td>{{kafein.adress}}</td>
</tr>

@EmreSert have you tried this : this.kafein=res as Kafein[] — Sanoj_V
– Sanoj_V, Commented Aug 2, 2018 at 12:59

Jai · Accepted Answer · 2018-08-02 12:13:27Z

2

You should name your variables bit better way:

let kaf of kafein // <---change the K in Kafein to k(lowercase)

and use kaf as variable in the template.

<tr *ngFor='let kaf of kafein'>
     <th scope="row">1</th>
     <td>{{kaf.name}}</td>
     <td>{{kaf.adress}}</td>
</tr>

answered Aug 2, 2018 at 12:13

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shashikant Devani · Accepted Answer · 2018-08-02 12:15:54Z

0

You had already got api data into your variable. Just change spelling from 'let kafein of Kafein' to 'let kaf of kafein''

answered Aug 2, 2018 at 12:15

Shashikant Devani

2,4641 gold badge15 silver badges29 bronze badges

1 Comment

Shashikant Devani Over a year ago

did you got data in console? Please use console when you bind data from api. and in your above json you got more than two object. So please use it without your class. just bind it to one variable and use it directly in your view.

Ahsan Alam Siddiqui · Accepted Answer · 2018-08-02 12:19:12Z

0

Make a service.ts file and make a function like this

getUsers(){
return  this.httpClient.get("http:example");
}

And import this service.ts in your component and then call your service function like this

getUsers(){
this.apiService.getUsers().subscribe((data:  Array<object>) => {
    this.kafein  =  data;
    console.log(data);
});

If you want further guidance, follow this Link

answered Aug 2, 2018 at 12:19

Ahsan Alam Siddiqui

712 silver badges12 bronze badges

Comments

gellybutton · Accepted Answer · 2018-08-02 12:39:56Z

0

ngFor is for looping through an Array, but your data contains an object. I am going to guess the following code would work:

<tr>
        <th>1</th>
        <td>{{kafein['name']}}</td>
        <td>{{kafein['adress']}}</td>
</tr>

But that is after making sure you are getting data in the first place. For that check the answer of Ahsan Alam Siddiqui

answered Aug 2, 2018 at 12:39

gellybutton

338 bronze badges

Comments

Emre Sert · Accepted Answer · 2018-08-02 13:32:39Z

0

According to my researching , I need to make Authorization process with token for my api because of being user data.By the way, i took my api from bank server and i forgot to say you.The problem solved with the following code.A lot of thanks for lowercase kafein instead of Kafein :)

httpOptions = {
    headers: new HttpHeaders({
      'Authorization':'bearer exampletoken',// TOKEN 
      'Access-Control-Allow-Origin':'*',
      'Access-Control-Allow-Methods':'*',
      'Access-Control-Allow-Headers':'*'
    }),
    withCredentials: false
  };

answered Aug 2, 2018 at 13:32

Emre Sert

3286 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to make fetch data from web api Angular 6

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related