Angular 2: HTTP GET Request with JSON Parameter

To make an HTTP GET request and pass a JSON object, you can use Angular’s HttpClient module. First, ensure you have imported the HttpClientModule in your AppModule:

typescriptCopy code
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule
  ],
  // other module configurations
})
export class AppModule { }

Then, you can modify your service and component as follows:

typescriptCopy code
// Service
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) {}

  getMatchedPersons(person: any): Observable<any> {
    return this.http.get<any>('url', { params: person });
  }
}

// Component
import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  person: any = { firstname: 'Peter', lastname: 'Test' };
  persons: any[];

  constructor(private dataService: DataService) {}

  getMatchedPersons() {
    this.dataService.getMatchedPersons(this.person).subscribe(
      data => this.persons = data,
      error => console.error(error)
    );
  }
}

In this example, the getMatchedPersons method in the service takes a person object as a parameter and passes it as a query parameter in the HTTP GET request. In the component, the person object is created with the required data, and the getMatchedPersons method is called to make the HTTP request.

لتنفيذ طلب HTTP GET وتمرير كائن JSON، يمكنك استخدام خدمة Angular HttpClient. يجب أولاً التأكد من استيراد HttpClientModule في AppModule الخاص بك:

typescriptCopy code
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule
  ],
  // other module configurations
})
export class AppModule { }

ثم، يمكنك تعديل خدمتك ومكونك كما يلي:

typescriptCopy code
// Service
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) {}

  getMatchedPersons(person: any): Observable<any> {
    let params = new HttpParams().set('firstname', person.firstname).set('lastname', person.lastname);
    return this.http.get<any>('url', { params: params });
  }
}

// Component
import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  person: any = { firstname: 'Peter', lastname: 'Test' };
  persons: any[];

  constructor(private dataService: DataService) {}

  getMatchedPersons() {
    this.dataService.getMatchedPersons(this.person).subscribe(
      data => this.persons = data,
      error => console.error(error)
    );
  }
}

في هذا المثال، يأخذ الطريقة getMatchedPersons في الخدمة كائن person كمعامل ويمرره كمعلمة استعلام في طلب HTTP GET. في المكون، يتم إنشاء كائن person بالبيانات المطلوبة، ويتم استدعاء الطريقة getMatchedPersons لتنفيذ الطلب HTTP.