#3 Created Service Class for the HttpRequest.

src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
-
+import { HttpClient } from '@angular/common/http';
+import { HttpService } from './http.service';
 
 @Component({
   selector: 'app-root',
@@ -58,30 +59,33 @@ import { Component } from '@angular/core';
 })
 
 export class AppComponent {
-  title = 'azure-api-management-browser';
-
+  elements: any;
   jsonStringArray: any;
   displayedColumns: string[];
   displayData: string[];
   dataSource = this.displayData;
 
-  constructor() {
-    console.log(this.jsonStringArray);
+  constructor(private service: HttpService) {  }
 
-    this.jsonStringArray = Object.keys(elements).map(e => elements[e]);
+  ngOnInit() {
+    this.elements = this.service.getCharacters();
+    console.log(this.elements);
+    this.jsonStringArray = Object.keys(this.elements).map(e => this.elements[e]);
     this.displayedColumns = ['position', 'name', 'weight', 'symbol'];
+    console.log(this.jsonStringArray);
+    // for (let index = 0; index < this.jsonStringArray.length; index++) {
+    //   const val = Object.keys(this.jsonStringArray).map(index => this.jsonStringArray[index]);
+    //   console.log(val);
 
-    for (let index = 0; index < this.jsonStringArray.length; index++) {
-      let val = Object.keys(this.jsonStringArray).map(index => this.jsonStringArray[index]);
-      console.log(val);
-
-      for (let index = 0; index < this.jsonStringArray.length; index++) {
-        let tmp = Object.keys(val).map(index => val[index]);
-        console.log(tmp);
+    //   for (let index = 0; index < this.jsonStringArray.length; index++) {
+    //     const tmp = Object.keys(val).map(index => val[index]);
+    //     console.log(tmp);
 
-      }
-    }
+    //   }
+    // }
   }
+}
+
+
 
 
-}

src/app/app.module.ts

@@ -18,13 +18,16 @@ import { MatSliderModule } from '@angular/material/slider';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
 import { MatNativeDateModule, MatIconModule, MatToolbarModule, MatTableModule } from '@angular/material';
+import { HttpClientModule } from '@angular/common/http';
+
 
 
 const modules: any[] = [
 
   LayoutModule,
 
   MatAutocompleteModule,
+  HttpClientModule,
   MatCheckboxModule,
   MatDatepickerModule,
   MatFormFieldModule,

src/app/http.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { HttpService } from './http.service';
+
+describe('HttpService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: HttpService = TestBed.get(HttpService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/http.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+
+
+const headers = new HttpHeaders()
+  .set('Ocp-Apim-Subscription-Key', '272101d76e92479c9762f658ecff0dc3');
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class HttpService {
+  constructor(private http: HttpClient) { }
+  url = 'https://preview-demo-mm.azure-api.net/private/api/management/apis?';
+
+  getCharacters() {
+    return this
+      .http
+      .get(`${this.url}`, { headers });
+  }
+}
+