How to return object from service to component in angular

Question

I want to access particular json in ngOninit. So i have id on click in edit button and with the help of that id i am getting complete object from database like form name , form json which etc. So from the service i want to return that json to ngOninit.

Here is service.

    GetFormById (id: number) {
    return this.httpClient.get<FormTemplate[]>(this.API_URL + 
    "GetFormTemplate/" + id).subscribe(data => {
      console.log(data);
      return data;
    });
    }

In console i am getting complete object from database which i have save.

Here is component

    ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');
    var json = this.dataService.GetFormById(+id);
    }

like how can i get json in ngOnInit.

Edit

ngOnInit() {
const id = this.route.snapshot.paramMap.get('id');
this.dataService.GetFormById(+id).subscribe(response => {
  console.log(response);
  const temp = response['TemplateJson'];
     })

initJq();
  var formData = '[{"type":"header","subtype":"h1","label":"Inquiry"},{"type":"paragraph","subtype":"p","label":"Paragraph content"},{"type":"text","label":"First name","name":"text - 1554220470561","value":"Vipul","subtype":"text"},{"type":"date","label":"Date Field","className":"form - control","name":"date - 1554220484446","value":"2019 - 04 - 25"},{"type":"button","label":"Send Inquiry","subtype":"button","className":"btn btn - primary","name":"button - 1554220480284","style":"primary"}]';

  this.formBuilder = (<any>jQuery('.build-wrap')).formBuilder({ formData });

 // Sample code to handle promise to get for data on page load directly
  this.formBuilder.promise.then(formBuilder => {
    console.log(formBuilder.formData);
  });
}

like whatever json i got in temp i want to pass it in var formData.

wentjun · Accepted Answer · 2019-04-10T06:58:25.643

3

This is not how you should subscribe from observables. You should read up the documentation/tutorial when it comes to handling asynchronous operations (such as HTTP requests). Meanwhile, this is how we can fix your issue.

On your service,

GetFormById (id: number) {
  return this.httpClient.get<FormTemplate[]>(`${this.API_URL}GetFormTemplate/${id}`);
}

On your component.ts, we return the observable value by calling the subscribe() method.

ngOnInit() {
  const id = this.route.snapshot.paramMap.get('id');
  this.dataService.GetFormById(id).subscribe(response => {
    console.log(response);
    const templateObj = response.TempleteJson;
  })
}

edited Apr 10 '19 at 06:58

answered Apr 10 '19 at 06:19

wentjun

40,384
10
95
107

I am getting this object in console {Id: 24, TemplateName: "school management", TemplateJson:"[↵{↵"type": "header",↵"subtype": "h1",↵"lab…"button-1554701441337",↵"style":"primary"↵}↵]", CreatedOn: "2019-04-11T00:00:00", UpdatedOn: "2019-04-24T00:00:00"} so how can i access TempleteJson from this object on ngOnit – Ronak Dumaniya Apr 10 '19 at 06:39
@RonakDumaniya nice, you are returning something. Ok, what exactly do you want to do with the JSON data? Do bear in mind that you can treat it as a JavaScript object. (E.g. response.Id) – wentjun Apr 10 '19 at 06:45
can i able to store it in variable like var json = response.TempleteJson – Ronak Dumaniya Apr 10 '19 at 06:56
Yes, you may store the object as a variable. Do something like `const templateObj = response.TempleteJson;` To test that it works, you can run `console.log(templateObj)` – wentjun Apr 10 '19 at 06:58
I am getting error like TempleteJson dose not exist in FormTemplete[] – Ronak Dumaniya Apr 10 '19 at 07:05
Try using `response['TempleteJson']`? – wentjun Apr 10 '19 at 07:07
Are you sure `TemplateJson` is the right name? Is it nested within another object? – wentjun Apr 10 '19 at 07:15
const temp = response['TemplateJson']; how can i access this temp outside subscribe like i want to store this temp in another var which is outside subscribe – Ronak Dumaniya Apr 10 '19 at 07:21
You can't. You have to handle it within the `subscribe` block. You can either return it later, or you chain it with other RxJS methods – wentjun Apr 10 '19 at 07:27
Please help me like how can i return ? if you have reference then please give me – Ronak Dumaniya Apr 10 '19 at 07:31
Wait, just to check, do you need the TemplateJson immediately? Or is it used somewhere later? Can you tell me more when is it used? – wentjun Apr 10 '19 at 07:39
I have edit code so can you give me solution based on it – Ronak Dumaniya Apr 10 '19 at 09:32
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/191590/discussion-between-wentjun-and-ronak-dumaniya). – wentjun Apr 10 '19 at 09:35
please check this issue becuase of this i am stuck and this is final issur – Ronak Dumaniya Apr 10 '19 at 10:20

score 2 · Answer 2 · answered Apr 10 '19 at 06:19

2

You don't subscribe to the Observable in the service class, but instead in the component:

In the service, just return the Observable from your service method:

GetFormById (id: number): Observable<FormTemplate[]>{
    return this.httpClient.get<FormTemplate[]>(this.API_URL + "GetFormTemplate/" + id);
}

In the component you subscribe to the Observable returned by the service method:

ngOnInit() {
  const id = this.route.snapshot.paramMap.get('id');
  this.dataService.GetFormById(+id).subscribe(data => {
    console.log(data);
  });
}

answered Apr 10 '19 at 06:19

Fullstack Guy

16,368
3
29
44

I am getting this object in console {Id: 24, TemplateName: "school management", TemplateJson:"[↵{↵"type": "header",↵"subtype": "h1",↵"lab…"button-1554701441337",↵"style":"primary"↵}↵]", CreatedOn: "2019-04-11T00:00:00", UpdatedOn: "2019-04-24T00:00:00"} so how can i access TempleteJson from this object on ngOnit – Ronak Dumaniya Apr 10 '19 at 06:28

score 0 · Answer 3 · edited Feb 21 '20 at 14:12

0

Don't subscribe inside service, subscribe inside component onInit.

GetFormById (id: number) {
    return this.httpClient.get<FormTemplate[]>(this.API_URL + "GetFormTemplate/" + id);
}

ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');
    this.dataService.GetFormById(+id).subscribe(data => {
      console.log(data);
    })
}

edited Feb 21 '20 at 14:12

kae_screechae

169
12

answered Apr 10 '19 at 06:19

Rahul Sharma

9,534
1
15
37

I am getting this object in console {Id: 24, TemplateName: "school management", TemplateJson:"[↵{↵"type": "header",↵"subtype": "h1",↵"lab…"button-1554701441337",↵"style":"primary"↵}↵]", CreatedOn: "2019-04-11T00:00:00", UpdatedOn: "2019-04-24T00:00:00"} so how can i access TempleteJson from this object on ngOnit – Ronak Dumaniya Apr 10 '19 at 06:39

How to return object from service to component in angular

3 Answers3

Linked

Related