How to get 'Query string parameters' from a http Get url

Question

I am calling an API using Get method, I want to just get the 'Query string parameters' which has been appended from backend. For example https://api.npms.io/v2/search?q=scope:angular&lang='fr''. From this API lang='fr' has been appended from backend. I need to get the last 'query parameters' lang='fr'.

app.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
    
@Component({ selector: 'app', templateUrl: 'app.component.html' })
export class AppComponent implements OnInit {
    totalAngularPackages;
    
    constructor(private http: HttpClient) { }
    
    ngOnInit() {      
        // Simple GET request with response type <any>
        this.http.get<any>('https://api.npms.io/v2/search?q=scope:angular&lang='fr'').subscribe(data => {
            this.totalAngularPackages = data.total;
        })
    }
}

Answer 1

You can simply extract the search parameter from the URL by:

• creating an URL object from the string
• extracting the search parameters
• finally get the parameter you want

const url = new URL("https://api.npms.io/v2/search?q=scope:angular&lang='fr'");
const params = new URLSearchParams(url.search);

console.log(params.get('q'));
console.log(params.get('lang'));

See also:

• MDN: URL
• MDN: URLSearchParams

---

Keep in mind that 'https://api.npms.io/v2/search?q=scope:angular&lang='fr'' is an invalid string. Either escape the single quotes or use double quotes:

const url = 'https://api.npms.io/v2/search?q=scope:angular&lang=\'fr\'';
const url = "https://api.npms.io/v2/search?q=scope:angular&lang='fr'";