String interpolation for complex object in angular 6
0
I have a complex object which is coming from my component :
{
"result": true,
"metrics": {
"callCounters": "",
"campaignDetails": {
"CampaignCount": 123,
"DepartmentCount": 25
},
"callTypeCounts": {
"IncomingCallCountBase": 59644,
"IncomingCallCount": 0,
"OutgoingCallCountBase": 2627223,
"OutgoingCallCount": 0,
"ManualCallCount": 6,
"IvrCallCount": 0,
"IvrCallCountBase": 1270098
},
"campaignCallCounts":
}
}
& my component.ts code looks like this.
import { CampaignService } from './../../../services/campaign.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'campaign-header',
templateUrl: './campaign-header.component.html',
styleUrls: ['./campaign-header.component.css']
})
export class CampaignHeaderComponent implements OnInit {
metricsInfo : any;
constructor(private campaignService:CampaignService ) { }
ngOnInit() {
this.campaignService.MetricsInfo()
.subscribe(response =>{
debugger;
console.log(response.json())
this.metricsInfo = response.json();
})
}
}Also my service looks like this :
import {
Injectable
} from '@angular/core';
import {
Http
} from '@angular/http';
import {
HttpClient
} from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class CampaignService {
constructor(private http: Http) {}
MetricsInfo() {
return this.http.get('http://xxx.xx.xxx.xxx/portal/api/landingPageMetrics');
}
}I want to print "IncomingCallCountBase" to my component.html page in Angular 6 application.
I tried something like this, {{ metricsInfo?.metrics.callTypeCounts.IncomingCallCountBase }} but, it's not working. Also how can I add two fields "IncomingCallCountBase" & "OutgoingCallCountBase" Any help is much appreciated!
NOTE: "metricsInfo" is my component subscribed object.
P.S : This log is after trying the solution.
[
angular angular6 asked Nov 21 '18 at 10:54
Prudhvi BharadwajPrudhvi Bharadwaj
309
add a comment |
0
I have a complex object which is coming from my component :
{
"result": true,
"metrics": {
"callCounters": "",
"campaignDetails": {
"CampaignCount": 123,
"DepartmentCount": 25
},
"callTypeCounts": {
"IncomingCallCountBase": 59644,
"IncomingCallCount": 0,
"OutgoingCallCountBase": 2627223,
"OutgoingCallCount": 0,
"ManualCallCount": 6,
"IvrCallCount": 0,
"IvrCallCountBase": 1270098
},
"campaignCallCounts":
}
}
& my component.ts code looks like this.
import { CampaignService } from './../../../services/campaign.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'campaign-header',
templateUrl: './campaign-header.component.html',
styleUrls: ['./campaign-header.component.css']
})
export class CampaignHeaderComponent implements OnInit {
metricsInfo : any;
constructor(private campaignService:CampaignService ) { }
ngOnInit() {
this.campaignService.MetricsInfo()
.subscribe(response =>{
debugger;
console.log(response.json())
this.metricsInfo = response.json();
})
}
}Also my service looks like this :
import {
Injectable
} from '@angular/core';
import {
Http
} from '@angular/http';
import {
HttpClient
} from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class CampaignService {
constructor(private http: Http) {}
MetricsInfo() {
return this.http.get('http://xxx.xx.xxx.xxx/portal/api/landingPageMetrics');
}
}I want to print "IncomingCallCountBase" to my component.html page in Angular 6 application.
I tried something like this, {{ metricsInfo?.metrics.callTypeCounts.IncomingCallCountBase }} but, it's not working. Also how can I add two fields "IncomingCallCountBase" & "OutgoingCallCountBase" Any help is much appreciated!
NOTE: "metricsInfo" is my component subscribed object.
P.S : This log is after trying the solution.
[
angular angular6 asked Nov 21 '18 at 10:54
Prudhvi BharadwajPrudhvi Bharadwaj
309
its working here stackblitz.com/edit/…
– Sachila Ranawaka
Nov 21 '18 at 10:55
Provide a Minimal, Complete, and Verifiable example reproducing the issue.
– trichetriche
Nov 21 '18 at 11:14
@SachilaRanawaka Strange! I wonder where I did a mistake, agh! anyways! Thank you. Further more can I add the numbers of"IncomingCallCountBase" and "OutgoingCallCountBase" in my component.ts page and put it in another variable and pass to the component view? Much thanks in advance. :)
– Prudhvi Bharadwaj
Nov 21 '18 at 11:21
check stackblitz.com/edit/…
– Sachila Ranawaka
Nov 21 '18 at 11:24
Define "doesn't work", precisely. Use basic debugging techniques, like simply looking at whatmetricsInfois by adding{{ metricsInfo | json }}to your template. You defined it asany, which means you intend it to be an array. But your JSON is not an array, and you're not using it as an array. So, what is it? And why do you useanyin the first place, instead of defining a proper interface for it? And why do you still use the old, deprecated since version 4.3, Http service?
– JB Nizet
Nov 22 '18 at 7:04
add a comment |
0
0
0
I have a complex object which is coming from my component :
{
"result": true,
"metrics": {
"callCounters": "",
"campaignDetails": {
"CampaignCount": 123,
"DepartmentCount": 25
},
"callTypeCounts": {
"IncomingCallCountBase": 59644,
"IncomingCallCount": 0,
"OutgoingCallCountBase": 2627223,
"OutgoingCallCount": 0,
"ManualCallCount": 6,
"IvrCallCount": 0,
"IvrCallCountBase": 1270098
},
"campaignCallCounts":
}
}
& my component.ts code looks like this.
import { CampaignService } from './../../../services/campaign.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'campaign-header',
templateUrl: './campaign-header.component.html',
styleUrls: ['./campaign-header.component.css']
})
export class CampaignHeaderComponent implements OnInit {
metricsInfo : any;
constructor(private campaignService:CampaignService ) { }
ngOnInit() {
this.campaignService.MetricsInfo()
.subscribe(response =>{
debugger;
console.log(response.json())
this.metricsInfo = response.json();
})
}
}Also my service looks like this :
import {
Injectable
} from '@angular/core';
import {
Http
} from '@angular/http';
import {
HttpClient
} from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class CampaignService {
constructor(private http: Http) {}
MetricsInfo() {
return this.http.get('http://xxx.xx.xxx.xxx/portal/api/landingPageMetrics');
}
}I want to print "IncomingCallCountBase" to my component.html page in Angular 6 application.
I tried something like this, {{ metricsInfo?.metrics.callTypeCounts.IncomingCallCountBase }} but, it's not working. Also how can I add two fields "IncomingCallCountBase" & "OutgoingCallCountBase" Any help is much appreciated!
NOTE: "metricsInfo" is my component subscribed object.
P.S : This log is after trying the solution.
[
angular angular6 asked Nov 21 '18 at 10:54
Prudhvi BharadwajPrudhvi Bharadwaj
309
I have a complex object which is coming from my component :
{
"result": true,
"metrics": {
"callCounters": "",
"campaignDetails": {
"CampaignCount": 123,
"DepartmentCount": 25
},
"callTypeCounts": {
"IncomingCallCountBase": 59644,
"IncomingCallCount": 0,
"OutgoingCallCountBase": 2627223,
"OutgoingCallCount": 0,
"ManualCallCount": 6,
"IvrCallCount": 0,
"IvrCallCountBase": 1270098
},
"campaignCallCounts":
}
}
& my component.ts code looks like this.
import { CampaignService } from './../../../services/campaign.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'campaign-header',
templateUrl: './campaign-header.component.html',
styleUrls: ['./campaign-header.component.css']
})
export class CampaignHeaderComponent implements OnInit {
metricsInfo : any;
constructor(private campaignService:CampaignService ) { }
ngOnInit() {
this.campaignService.MetricsInfo()
.subscribe(response =>{
debugger;
console.log(response.json())
this.metricsInfo = response.json();
})
}
}Also my service looks like this :
import {
Injectable
} from '@angular/core';
import {
Http
} from '@angular/http';
import {
HttpClient
} from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class CampaignService {
constructor(private http: Http) {}
MetricsInfo() {
return this.http.get('http://xxx.xx.xxx.xxx/portal/api/landingPageMetrics');
}
}I want to print "IncomingCallCountBase" to my component.html page in Angular 6 application.
I tried something like this, {{ metricsInfo?.metrics.callTypeCounts.IncomingCallCountBase }} but, it's not working. Also how can I add two fields "IncomingCallCountBase" & "OutgoingCallCountBase" Any help is much appreciated!
NOTE: "metricsInfo" is my component subscribed object.
P.S : This log is after trying the solution.
[
import { CampaignService } from './../../../services/campaign.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'campaign-header',
templateUrl: './campaign-header.component.html',
styleUrls: ['./campaign-header.component.css']
})
export class CampaignHeaderComponent implements OnInit {
metricsInfo : any;
constructor(private campaignService:CampaignService ) { }
ngOnInit() {
this.campaignService.MetricsInfo()
.subscribe(response =>{
debugger;
console.log(response.json())
this.metricsInfo = response.json();
})
}
}import { CampaignService } from './../../../services/campaign.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'campaign-header',
templateUrl: './campaign-header.component.html',
styleUrls: ['./campaign-header.component.css']
})
export class CampaignHeaderComponent implements OnInit {
metricsInfo : any;
constructor(private campaignService:CampaignService ) { }
ngOnInit() {
this.campaignService.MetricsInfo()
.subscribe(response =>{
debugger;
console.log(response.json())
this.metricsInfo = response.json();
})
}
}import {
Injectable
} from '@angular/core';
import {
Http
} from '@angular/http';
import {
HttpClient
} from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class CampaignService {
constructor(private http: Http) {}
MetricsInfo() {
return this.http.get('http://xxx.xx.xxx.xxx/portal/api/landingPageMetrics');
}
}import {
Injectable
} from '@angular/core';
import {
Http
} from '@angular/http';
import {
HttpClient
} from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class CampaignService {
constructor(private http: Http) {}
MetricsInfo() {
return this.http.get('http://xxx.xx.xxx.xxx/portal/api/landingPageMetrics');
}
}asked Nov 21 '18 at 10:54
Prudhvi BharadwajPrudhvi Bharadwaj
309
asked Nov 21 '18 at 10:54
Prudhvi BharadwajPrudhvi Bharadwaj
309
edited Nov 22 '18 at 10:34
Prudhvi Bharadwaj
asked Nov 21 '18 at 10:54
Prudhvi BharadwajPrudhvi Bharadwaj
309
asked Nov 21 '18 at 10:54
Prudhvi BharadwajPrudhvi Bharadwaj
309
asked Nov 21 '18 at 10:54
Prudhvi BharadwajPrudhvi Bharadwaj
309
309
its working here stackblitz.com/edit/…
– Sachila Ranawaka
Nov 21 '18 at 10:55
Provide a Minimal, Complete, and Verifiable example reproducing the issue.
– trichetriche
Nov 21 '18 at 11:14
@SachilaRanawaka Strange! I wonder where I did a mistake, agh! anyways! Thank you. Further more can I add the numbers of"IncomingCallCountBase" and "OutgoingCallCountBase" in my component.ts page and put it in another variable and pass to the component view? Much thanks in advance. :)
– Prudhvi Bharadwaj
Nov 21 '18 at 11:21
check stackblitz.com/edit/…
– Sachila Ranawaka
Nov 21 '18 at 11:24
Define "doesn't work", precisely. Use basic debugging techniques, like simply looking at whatmetricsInfois by adding{{ metricsInfo | json }}to your template. You defined it asany, which means you intend it to be an array. But your JSON is not an array, and you're not using it as an array. So, what is it? And why do you useanyin the first place, instead of defining a proper interface for it? And why do you still use the old, deprecated since version 4.3, Http service?
– JB Nizet
Nov 22 '18 at 7:04
add a comment |
its working here stackblitz.com/edit/…
– Sachila Ranawaka
Nov 21 '18 at 10:55
Provide a Minimal, Complete, and Verifiable example reproducing the issue.
– trichetriche
Nov 21 '18 at 11:14
@SachilaRanawaka Strange! I wonder where I did a mistake, agh! anyways! Thank you. Further more can I add the numbers of"IncomingCallCountBase" and "OutgoingCallCountBase" in my component.ts page and put it in another variable and pass to the component view? Much thanks in advance. :)
– Prudhvi Bharadwaj
Nov 21 '18 at 11:21
check stackblitz.com/edit/…
– Sachila Ranawaka
Nov 21 '18 at 11:24
Define "doesn't work", precisely. Use basic debugging techniques, like simply looking at whatmetricsInfois by adding{{ metricsInfo | json }}to your template. You defined it asany, which means you intend it to be an array. But your JSON is not an array, and you're not using it as an array. So, what is it? And why do you useanyin the first place, instead of defining a proper interface for it? And why do you still use the old, deprecated since version 4.3, Http service?
– JB Nizet
Nov 22 '18 at 7:04
its working here stackblitz.com/edit/…
– Sachila Ranawaka
Nov 21 '18 at 10:55
its working here stackblitz.com/edit/…
– Sachila Ranawaka
Nov 21 '18 at 10:55
Provide a Minimal, Complete, and Verifiable example reproducing the issue.
– trichetriche
Nov 21 '18 at 11:14
Provide a Minimal, Complete, and Verifiable example reproducing the issue.
– trichetriche
Nov 21 '18 at 11:14
@SachilaRanawaka Strange! I wonder where I did a mistake, agh! anyways! Thank you. Further more can I add the numbers of"IncomingCallCountBase" and "OutgoingCallCountBase" in my component.ts page and put it in another variable and pass to the component view? Much thanks in advance. :)
– Prudhvi Bharadwaj
Nov 21 '18 at 11:21
@SachilaRanawaka Strange! I wonder where I did a mistake, agh! anyways! Thank you. Further more can I add the numbers of"IncomingCallCountBase" and "OutgoingCallCountBase" in my component.ts page and put it in another variable and pass to the component view? Much thanks in advance. :)
– Prudhvi Bharadwaj
Nov 21 '18 at 11:21
check stackblitz.com/edit/…
– Sachila Ranawaka
Nov 21 '18 at 11:24
check stackblitz.com/edit/…
– Sachila Ranawaka
Nov 21 '18 at 11:24
Define "doesn't work", precisely. Use basic debugging techniques, like simply looking at what
metricsInfo is by adding {{ metricsInfo | json }} to your template. You defined it as any, which means you intend it to be an array. But your JSON is not an array, and you're not using it as an array. So, what is it? And why do you use anyin the first place, instead of defining a proper interface for it? And why do you still use the old, deprecated since version 4.3, Http service?– JB Nizet
Nov 22 '18 at 7:04
Define "doesn't work", precisely. Use basic debugging techniques, like simply looking at what
metricsInfo is by adding {{ metricsInfo | json }} to your template. You defined it as any, which means you intend it to be an array. But your JSON is not an array, and you're not using it as an array. So, what is it? And why do you use anyin the first place, instead of defining a proper interface for it? And why do you still use the old, deprecated since version 4.3, Http service?– JB Nizet
Nov 22 '18 at 7:04
add a comment |
1 Answer
1
active
oldest
votes
0
I can see You have implemented the service in Angular 5 way (i.e no map explicitly for service response).
But the http object you have created using Http . It should be created using HttpClient because Http is now deprecated.
If you want to use Http then modify your code in following way (not recommended) :
// in component.service.ts file
MetricsInfo() {
return this.http.get('http://xxx.xx.xxx.xxx/portal/api/landingPageMetrics')
.map((response:Response) => {
console.log("From service == ", response.json());
return response.json();
});
}
//in component.ts file
ngOnInit() {
this.loadInitialData();
}
// loads inial data
loadInitialData(){
this.campaignService.MetricsInfo()
.subscribe(response =>{
this.metricsInfo = response;
this.getTotal();
})
}<!-- In component.html -->
<div class="container">
{{ metricsInfo?.metrics.callTypeCounts.IncomingCallCountBase }}
</div>If you want to Use the Httpclient then modify your code in following way :
// in component.service.ts file
import { HttpClient, HttpParams } from '@angular/common/http'; // import Httpclient
// create Httpclient object
// you might need to adjust headers and requestObject **if you are using
constructor(
private _http: HttpClient,
) {}
MetricsInfo() {
return this._http.get('http://xxx.xx.xxx.xxx/portal/api/landingPageMetrics');
}
//in component.ts file
ngOnInit() {
this.loadInitialData();
}
// loads inial data
loadInitialData(){
this.campaignService.MetricsInfo()
.subscribe(response =>{
this.metricsInfo = response;
this.getTotal();
})
}Coming back to Addition , You can use The suggestion by @Prudhvi:
getTotal(){
return this.metricsInfo.metrics.callTypeCounts.IncomingCallCount + this.metricsInfo.metrics.callTypeCounts.OutgoingCallCountBase;
}answered Nov 22 '18 at 7:25
programoholicprogramoholic
6051527
Sir, the method "getTotal()" should be fired on ngOnInit() when I called it via the OnInit it throws an error saying metrics is not defined
– Prudhvi Bharadwaj
Nov 22 '18 at 8:26
1
Call getTotal() inside the subscribe of MetricsInfo() service . I updated the answer. check
– programoholic
Nov 22 '18 at 8:35
Do let me know if it worked ?
– programoholic
Nov 22 '18 at 8:37
It did worked. but my console is full of errors.I've attached the console error log after trying your solution.
– Prudhvi Bharadwaj
Nov 22 '18 at 10:27
i am not able to find ? where did you attach ?
– programoholic
Nov 22 '18 at 10:32
|
show 4 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53410558%2fstring-interpolation-for-complex-object-in-angular-6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
I can see You have implemented the service in Angular 5 way (i.e no map explicitly for service response).
But the http object you have created using Http . It should be created using HttpClient because Http is now deprecated.
If you want to use Http then modify your code in following way (not recommended) :
// in component.service.ts file
MetricsInfo() {
return this.http.get('http://xxx.xx.xxx.xxx/portal/api/landingPageMetrics')
.map((response:Response) => {
console.log("From service == ", response.json());
return response.json();
});
}
//in component.ts file
ngOnInit() {
this.loadInitialData();
}
// loads inial data
loadInitialData(){
this.campaignService.MetricsInfo()
.subscribe(response =>{
this.metricsInfo = response;
this.getTotal();
})
}<!-- In component.html -->
<div class="container">
{{ metricsInfo?.metrics.callTypeCounts.IncomingCallCountBase }}
</div>If you want to Use the Httpclient then modify your code in following way :
// in component.service.ts file
import { HttpClient, HttpParams } from '@angular/common/http'; // import Httpclient
// create Httpclient object
// you might need to adjust headers and requestObject **if you are using
constructor(
private _http: HttpClient,
) {}
MetricsInfo() {
return this._http.get('http://xxx.xx.xxx.xxx/portal/api/landingPageMetrics');
}
//in component.ts file
ngOnInit() {
this.loadInitialData();
}
// loads inial data
loadInitialData(){
this.campaignService.MetricsInfo()
.subscribe(response =>{
this.metricsInfo = response;
this.getTotal();
})
}Coming back to Addition , You can use The suggestion by @Prudhvi:
getTotal(){
return this.metricsInfo.metrics.callTypeCounts.IncomingCallCount + this.metricsInfo.metrics.callTypeCounts.OutgoingCallCountBase;
}answered Nov 22 '18 at 7:25
programoholicprogramoholic
6051527
Sir, the method "getTotal()" should be fired on ngOnInit() when I called it via the OnInit it throws an error saying metrics is not defined
– Prudhvi Bharadwaj
Nov 22 '18 at 8:26
1
Call getTotal() inside the subscribe of MetricsInfo() service . I updated the answer. check
– programoholic
Nov 22 '18 at 8:35
Do let me know if it worked ?
– programoholic
Nov 22 '18 at 8:37
It did worked. but my console is full of errors.I've attached the console error log after trying your solution.
– Prudhvi Bharadwaj
Nov 22 '18 at 10:27
i am not able to find ? where did you attach ?
– programoholic
Nov 22 '18 at 10:32
|
show 4 more comments
0
I can see You have implemented the service in Angular 5 way (i.e no map explicitly for service response).
But the http object you have created using Http . It should be created using HttpClient because Http is now deprecated.
If you want to use Http then modify your code in following way (not recommended) :
// in component.service.ts file
MetricsInfo() {
return this.http.get('http://xxx.xx.xxx.xxx/portal/api/landingPageMetrics')
.map((response:Response) => {
console.log("From service == ", response.json());
return response.json();
});
}
//in component.ts file
ngOnInit() {
this.loadInitialData();
}
// loads inial data
loadInitialData(){
this.campaignService.MetricsInfo()
.subscribe(response =>{
this.metricsInfo = response;
this.getTotal();
})
}<!-- In component.html -->
<div class="container">
{{ metricsInfo?.metrics.callTypeCounts.IncomingCallCountBase }}
</div>If you want to Use the Httpclient then modify your code in following way :
// in component.service.ts file
import { HttpClient, HttpParams } from '@angular/common/http'; // import Httpclient
// create Httpclient object
// you might need to adjust headers and requestObject **if you are using
constructor(
private _http: HttpClient,
) {}
MetricsInfo() {
return this._http.get('http://xxx.xx.xxx.xxx/portal/api/landingPageMetrics');
}
//in component.ts file
ngOnInit() {
this.loadInitialData();
}
// loads inial data
loadInitialData(){
this.campaignService.MetricsInfo()
.subscribe(response =>{
this.metricsInfo = response;
this.getTotal();
})
}Coming back to Addition , You can use The suggestion by @Prudhvi:
getTotal(){
return this.metricsInfo.metrics.callTypeCounts.IncomingCallCount + this.metricsInfo.metrics.callTypeCounts.OutgoingCallCountBase;
}answered Nov 22 '18 at 7:25
programoholicprogramoholic
6051527
Sir, the method "getTotal()" should be fired on ngOnInit() when I called it via the OnInit it throws an error saying metrics is not defined
– Prudhvi Bharadwaj
Nov 22 '18 at 8:26
1
Call getTotal() inside the subscribe of MetricsInfo() service . I updated the answer. check
– programoholic
Nov 22 '18 at 8:35
Do let me know if it worked ?
– programoholic
Nov 22 '18 at 8:37
It did worked. but my console is full of errors.I've attached the console error log after trying your solution.
– Prudhvi Bharadwaj
Nov 22 '18 at 10:27
i am not able to find ? where did you attach ?
– programoholic
Nov 22 '18 at 10:32
|
show 4 more comments
0
0
0
I can see You have implemented the service in Angular 5 way (i.e no map explicitly for service response).
But the http object you have created using Http . It should be created using HttpClient because Http is now deprecated.
If you want to use Http then modify your code in following way (not recommended) :
// in component.service.ts file
MetricsInfo() {
return this.http.get('http://xxx.xx.xxx.xxx/portal/api/landingPageMetrics')
.map((response:Response) => {
console.log("From service == ", response.json());
return response.json();
});
}
//in component.ts file
ngOnInit() {
this.loadInitialData();
}
// loads inial data
loadInitialData(){
this.campaignService.MetricsInfo()
.subscribe(response =>{
this.metricsInfo = response;
this.getTotal();
})
}<!-- In component.html -->
<div class="container">
{{ metricsInfo?.metrics.callTypeCounts.IncomingCallCountBase }}
</div>If you want to Use the Httpclient then modify your code in following way :
// in component.service.ts file
import { HttpClient, HttpParams } from '@angular/common/http'; // import Httpclient
// create Httpclient object
// you might need to adjust headers and requestObject **if you are using
constructor(
private _http: HttpClient,
) {}
MetricsInfo() {
return this._http.get('http://xxx.xx.xxx.xxx/portal/api/landingPageMetrics');
}
//in component.ts file
ngOnInit() {
this.loadInitialData();
}
// loads inial data
loadInitialData(){
this.campaignService.MetricsInfo()
.subscribe(response =>{
this.metricsInfo = response;
this.getTotal();
})
}Coming back to Addition , You can use The suggestion by @Prudhvi:
getTotal(){
return this.metricsInfo.metrics.callTypeCounts.IncomingCallCount + this.metricsInfo.metrics.callTypeCounts.OutgoingCallCountBase;
}answered Nov 22 '18 at 7:25
programoholicprogramoholic
6051527
I can see You have implemented the service in Angular 5 way (i.e no map explicitly for service response).
But the http object you have created using Http . It should be created using HttpClient because Http is now deprecated.
If you want to use Http then modify your code in following way (not recommended) :
// in component.service.ts file
MetricsInfo() {
return this.http.get('http://xxx.xx.xxx.xxx/portal/api/landingPageMetrics')
.map((response:Response) => {
console.log("From service == ", response.json());
return response.json();
});
}
//in component.ts file
ngOnInit() {
this.loadInitialData();
}
// loads inial data
loadInitialData(){
this.campaignService.MetricsInfo()
.subscribe(response =>{
this.metricsInfo = response;
this.getTotal();
})
}<!-- In component.html -->
<div class="container">
{{ metricsInfo?.metrics.callTypeCounts.IncomingCallCountBase }}
</div>If you want to Use the Httpclient then modify your code in following way :
// in component.service.ts file
import { HttpClient, HttpParams } from '@angular/common/http'; // import Httpclient
// create Httpclient object
// you might need to adjust headers and requestObject **if you are using
constructor(
private _http: HttpClient,
) {}
MetricsInfo() {
return this._http.get('http://xxx.xx.xxx.xxx/portal/api/landingPageMetrics');
}
//in component.ts file
ngOnInit() {
this.loadInitialData();
}
// loads inial data
loadInitialData(){
this.campaignService.MetricsInfo()
.subscribe(response =>{
this.metricsInfo = response;
this.getTotal();
})
}Coming back to Addition , You can use The suggestion by @Prudhvi:
getTotal(){
return this.metricsInfo.metrics.callTypeCounts.IncomingCallCount + this.metricsInfo.metrics.callTypeCounts.OutgoingCallCountBase;
}// in component.service.ts file
MetricsInfo() {
return this.http.get('http://xxx.xx.xxx.xxx/portal/api/landingPageMetrics')
.map((response:Response) => {
console.log("From service == ", response.json());
return response.json();
});
}
//in component.ts file
ngOnInit() {
this.loadInitialData();
}
// loads inial data
loadInitialData(){
this.campaignService.MetricsInfo()
.subscribe(response =>{
this.metricsInfo = response;
this.getTotal();
})
}<!-- In component.html -->
<div class="container">
{{ metricsInfo?.metrics.callTypeCounts.IncomingCallCountBase }}
</div>// in component.service.ts file
MetricsInfo() {
return this.http.get('http://xxx.xx.xxx.xxx/portal/api/landingPageMetrics')
.map((response:Response) => {
console.log("From service == ", response.json());
return response.json();
});
}
//in component.ts file
ngOnInit() {
this.loadInitialData();
}
// loads inial data
loadInitialData(){
this.campaignService.MetricsInfo()
.subscribe(response =>{
this.metricsInfo = response;
this.getTotal();
})
}<!-- In component.html -->
<div class="container">
{{ metricsInfo?.metrics.callTypeCounts.IncomingCallCountBase }}
</div>// in component.service.ts file
import { HttpClient, HttpParams } from '@angular/common/http'; // import Httpclient
// create Httpclient object
// you might need to adjust headers and requestObject **if you are using
constructor(
private _http: HttpClient,
) {}
MetricsInfo() {
return this._http.get('http://xxx.xx.xxx.xxx/portal/api/landingPageMetrics');
}
//in component.ts file
ngOnInit() {
this.loadInitialData();
}
// loads inial data
loadInitialData(){
this.campaignService.MetricsInfo()
.subscribe(response =>{
this.metricsInfo = response;
this.getTotal();
})
}// in component.service.ts file
import { HttpClient, HttpParams } from '@angular/common/http'; // import Httpclient
// create Httpclient object
// you might need to adjust headers and requestObject **if you are using
constructor(
private _http: HttpClient,
) {}
MetricsInfo() {
return this._http.get('http://xxx.xx.xxx.xxx/portal/api/landingPageMetrics');
}
//in component.ts file
ngOnInit() {
this.loadInitialData();
}
// loads inial data
loadInitialData(){
this.campaignService.MetricsInfo()
.subscribe(response =>{
this.metricsInfo = response;
this.getTotal();
})
}getTotal(){
return this.metricsInfo.metrics.callTypeCounts.IncomingCallCount + this.metricsInfo.metrics.callTypeCounts.OutgoingCallCountBase;
}getTotal(){
return this.metricsInfo.metrics.callTypeCounts.IncomingCallCount + this.metricsInfo.metrics.callTypeCounts.OutgoingCallCountBase;
}answered Nov 22 '18 at 7:25
programoholicprogramoholic
6051527
edited Nov 22 '18 at 8:36
answered Nov 22 '18 at 7:25
programoholicprogramoholic
6051527
answered Nov 22 '18 at 7:25
programoholicprogramoholic
6051527
answered Nov 22 '18 at 7:25
programoholicprogramoholic
6051527
6051527
Sir, the method "getTotal()" should be fired on ngOnInit() when I called it via the OnInit it throws an error saying metrics is not defined
– Prudhvi Bharadwaj
Nov 22 '18 at 8:26
1
Call getTotal() inside the subscribe of MetricsInfo() service . I updated the answer. check
– programoholic
Nov 22 '18 at 8:35
Do let me know if it worked ?
– programoholic
Nov 22 '18 at 8:37
It did worked. but my console is full of errors.I've attached the console error log after trying your solution.
– Prudhvi Bharadwaj
Nov 22 '18 at 10:27
i am not able to find ? where did you attach ?
– programoholic
Nov 22 '18 at 10:32
|
show 4 more comments
Sir, the method "getTotal()" should be fired on ngOnInit() when I called it via the OnInit it throws an error saying metrics is not defined
– Prudhvi Bharadwaj
Nov 22 '18 at 8:26
1
Call getTotal() inside the subscribe of MetricsInfo() service . I updated the answer. check
– programoholic
Nov 22 '18 at 8:35
Do let me know if it worked ?
– programoholic
Nov 22 '18 at 8:37
It did worked. but my console is full of errors.I've attached the console error log after trying your solution.
– Prudhvi Bharadwaj
Nov 22 '18 at 10:27
i am not able to find ? where did you attach ?
– programoholic
Nov 22 '18 at 10:32
Sir, the method "getTotal()" should be fired on ngOnInit() when I called it via the OnInit it throws an error saying metrics is not defined
– Prudhvi Bharadwaj
Nov 22 '18 at 8:26
Sir, the method "getTotal()" should be fired on ngOnInit() when I called it via the OnInit it throws an error saying metrics is not defined
– Prudhvi Bharadwaj
Nov 22 '18 at 8:26
1
1
Call getTotal() inside the subscribe of MetricsInfo() service . I updated the answer. check
– programoholic
Nov 22 '18 at 8:35
Call getTotal() inside the subscribe of MetricsInfo() service . I updated the answer. check
– programoholic
Nov 22 '18 at 8:35
Do let me know if it worked ?
– programoholic
Nov 22 '18 at 8:37
Do let me know if it worked ?
– programoholic
Nov 22 '18 at 8:37
It did worked. but my console is full of errors.I've attached the console error log after trying your solution.
– Prudhvi Bharadwaj
Nov 22 '18 at 10:27
It did worked. but my console is full of errors.I've attached the console error log after trying your solution.
– Prudhvi Bharadwaj
Nov 22 '18 at 10:27
i am not able to find ? where did you attach ?
– programoholic
Nov 22 '18 at 10:32
i am not able to find ? where did you attach ?
– programoholic
Nov 22 '18 at 10:32
|
show 4 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53410558%2fstring-interpolation-for-complex-object-in-angular-6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
its working here stackblitz.com/edit/…
– Sachila Ranawaka
Nov 21 '18 at 10:55
Provide a Minimal, Complete, and Verifiable example reproducing the issue.
– trichetriche
Nov 21 '18 at 11:14
@SachilaRanawaka Strange! I wonder where I did a mistake, agh! anyways! Thank you. Further more can I add the numbers of"IncomingCallCountBase" and "OutgoingCallCountBase" in my component.ts page and put it in another variable and pass to the component view? Much thanks in advance. :)
– Prudhvi Bharadwaj
Nov 21 '18 at 11:21
check stackblitz.com/edit/…
– Sachila Ranawaka
Nov 21 '18 at 11:24
Define "doesn't work", precisely. Use basic debugging techniques, like simply looking at what
metricsInfois by adding{{ metricsInfo | json }}to your template. You defined it asany, which means you intend it to be an array. But your JSON is not an array, and you're not using it as an array. So, what is it? And why do you useanyin the first place, instead of defining a proper interface for it? And why do you still use the old, deprecated since version 4.3, Http service?– JB Nizet
Nov 22 '18 at 7:04