Angular: pass Parameter to this.http.get()

Question

I have an angular APP that need dynamically get the data from API. when I use static URL its work properly.

here my code

service.ts

export interface MachineData {
  name: string;
  status: string;
}

@Injectable()
export class MachineService {
  BASE_URL = 'example.com/api/v1/id/1';

  constructor(private http: HttpClient) { }

  getMachineData() {
    return this.http.get(this.BASE_URL);
  }
}

component.ts

showMachine() {
    this.machineService.getMachineData()
    .subscribe((data: machineData) => this.machineData = {
        status: data['status'],
    });
}

markers: marker[] = [
    {
        id: 1,
        name: "Marker A",
        lat: -6.949065,
        lng: 107.592339,
    },
    {
        id: 2,
        name: "Marker B",
        lat: -6.935582,
        lng: 107.610037,
    }
]

component.html

<agm-marker
    *ngFor="let m of markers; let i = index"
    (markerClick)="showMachine(m.id, i)"
    [latitude]="m.lat"
    [longitude]="m.lng"
    [label]="m.name">

    <agm-info-window>
        <strong>
            <p>Status : {{machineData.status}}</p>
        </strong>
    </agm-info-window>
</agm-marker>

how to make the URL dynamic?... I mean add the ID to the URL.

example:

from this

return this.http.get(this.BASE_URL);

to this

return this.http.get(this.BASE_URL + id);

so I can retrieve data by id. already trying by do like this :

on my component.html

(markerClick)="showMachine(m.id)"

on my component.ts

showMachine(id: number) {
    this.machineService.getMachineData(id: number)
    .subscribe((data: machineData) => this.machineData = {
        status: data['status'],
    });
}

and my service.ts

return this.http.get(this.BASE_URL + id);

but it's not work.

console log the dynamic URL code and check it matches with static one. — Suresh Kumar Ariya, Oct 02 '18 at 04:05
I guess you should check the dynamic URl value first... this.BASE_URL + id is correct? — Jihoon Kwon, Oct 02 '18 at 04:07
This seems pretty simple if you use debugger, you should debug it and resolve. — Just code, Oct 02 '18 at 04:15
@JihoonKwon the url is correct, when i use `example.com/api/v1/id/1` its show the data, id `1 and 2` have the data. but when use `this.BASE_URL + id` its show nothing, did my `id` pass correctly?... — Dicky Raambo, Oct 02 '18 at 04:42
@DickyRaambo I meant please check the this.BASE_URL + id first. ex : const finalUrl = this.BASE_URL + id; console.log("final url : ", finalUrl); If this url is correct, then you can check the response which client received from server. or You should check server logs ( request / response ) :) — Jihoon Kwon, Oct 02 '18 at 05:11
try this link https://stackoverflow.com/questions/34475523/how-to-pass-url-arguments-query-string-to-a-http-request-on-angular — Mohan Singh, Oct 02 '18 at 06:25
Try this... BASE_URL = 'example.com/api/v1'; getMachineData(id) { let Params = new HttpParams(); Params = Params.append('id', id); return this.http.get(this.BASE_URL,{ params: Params }); } — lesiano, Oct 02 '18 at 06:27

score 0 · Answer 1 · answered Oct 02 '18 at 15:11

id is a number, URL a string.

Thus, you want to convert the id to string first before doing "url + id".

i.e. something like this does work. Without the "toString" you will get "NaN" in the concatenation.

let url: string;
let id: number;

id = 5
url = "http://something/";

let result = url + id.toString();

console.log(result);

Angular: pass Parameter to this.http.get()

1 Answers1