I seem to be having trouble displaying the console response data correctly. I've checked my code multiple times but can't figure out where the issue lies. Any assistance or guidance on this matter would be greatly appreciated.
console response
account.service.ts
import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { Account } from './account';
import { environment } from '../../../environments/environment';
import { UrlConstant } from '../../shared/constant/url-constant';
@Injectable()
export class AccountService {
constructor(private http: Http) {
}
private headers = new Headers({ 'Content-Type': 'application/json'
});
private authApiUri = environment['BP_AUTH_SERVER_URI'];
listAccount(authToken: string): Observable<Account[]> {
this.headers.set('Authorization', authToken);
console.log(authToken, ')))))))))))))))))');
returnthis.http.get(`${this.authApiUri}/${UrlConstant.ACCOUNT_LIST.replace('id' , '5682682637844480')}`, { headers: this.headers })
.map(response => {
console.log(response, 'LLLLLLLLLLLLLLL')
let accounts: Account[] = [];
response.json().accountList.forEach((accountResponse) => {
let account = new Account(accountResponse.name , accountResponse.primaryEmailAddress, accountResponse.displayName);
account.kazooAccountId = accountResponse.account_kazooAccountId;
accounts.push(account);
});
return accounts;
})
.catch(this.handleError);
}
private handleError(error: Response | any): Observable<any> {
return Observable.throw(error.json());
}
}
account.ts
export class Account {
name: string;
kazooAccountId: string;
primaryEmailAddress: string;
displayName: string;
constructor(name: string, primaryEmailAddress: string, displayName: string) {
this.name = name;
this.primaryEmailAddress= primaryEmailAddress;
this.displayName = displayName;
}
}
account-routing.ts
import { Routes } from '@angular/router';
import { UrlConstant } from '../../shared/constant/url-constant';
import { AccountListingComponent } from './account-listing/account-listing.component';
export const accountRoutes : Routes = [
{
path : UrlConstant.ACCOUNT_LISTING,
component : AccountListingComponent
}
];
export const accountRoutingComponent = [ AccountListingComponent ];
account-listing/account-listing.html
<p>
account-listing works!
</p>
<ul>
<li *ngFor="let account of accounts">
{{account.name}}
{{account.kazooAccountId}}
{{account.displayName}}
</li>
</ul>
account-listing/account-listing.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { CookieService } from 'angular2-cookie/services/cookies.service';
import { AppConstant } from '../../../shared/constant/app-constant';
import { Account } from '../account';
import { AccountService } from '../account.service';
@Component({
selector: 'app-account-listing',
templateUrl: './account-listing.component.html',
styleUrls: ['./account-listing.component.css'],
providers: [CookieService, AccountService]
})
export class AccountListingComponent implements OnInit {
accounts: Account[];
constructor(private accountService: AccountService, private router: Router, private cookieService: CookieService) {
}
ngOnInit() {
this.listAccount();
}
listAccount() {
const authToken: string =
this.cookieService.get(AppConstant.AUTH_TOKEN_COOKIE);
this.accountService.listAccount(authToken)
.subscribe((accounts) => {
console.log(accounts, 'KKKKKKKKKKKKKKKKKKKK')
this.accounts = accounts;
})
}
}