-1

I am using JSON object in all components. Is there any global declaration and reuse JSON object in Angular?

Otherwise same object we will load in all components?

Where should I declare that object and how can I call it in other components?

  1. I am maintaining onload functions in HomePage components and I am using in home.html.

  2. I am maintaining the WebserviceProvider for getting values.

But where will I declare and store JSON object and how to re-use other components?

Siva Unique
  • 189
  • 2
  • 17
  • [There's no such thing as a "JSON Object"](http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/) – Andreas Jul 08 '17 at 06:56
  • how are you getting json object from http ? – CharanRoot Jul 08 '17 at 06:56
  • @jonnysai,Kindly check the below code. I am using web service and getting response json object. from back end i am returning object. getCategoryDetails(){ return this.http.get('http://ip/ramu/api/api/JsonServices.php?action=getcategories') .map((res:Response) => res.json()); } – Siva Unique Jul 08 '17 at 08:27
  • above response i am using only home component. but i want to use another component. Kindly help me – Siva Unique Jul 08 '17 at 08:30

3 Answers3

1

I have created AppCommonService and i have used saveCateogry in home.ts and i have used retrieveCategory in my other component. Below code working fine for me.

import { Injectable } from '@angular/core';

@Injectable() export class AppCommonService {

categoryType : any[] = [];
constructor() {

}
saveCateogry(cat:any){
    this.categoryType= cat;
}
retrieveCategory(){
    return this.categoryType;
}

}

Siva Unique
  • 189
  • 2
  • 17
0

If you want to define some data that is shared across all of your components, build a service.

I have a simple service example here: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

DeborahK
  • 57,520
  • 12
  • 104
  • 129
  • getCategoryDetails(){ return this.http.get('ip/ramu/api/api/…') .map((res:Response) => res.json()); } above code i am using in webservice.ts ngOnInit() { this.wsp.getCategoryDetails().subscribe(data => { this.categoryType = data; }); } above code i have used in home.ts but i want use this response in other component – Siva Unique Jul 08 '17 at 08:42
0

Make use of Angular Services they are one used to store data and passing data between components and also easy as Input and Output you will get stuck in a Spaghetti of event emitters , also you can look at the ngrx store for holding data in one place. but i would suggest you to use ngrx only in case of medium to large scale apps as it adds up a bit of code.

In both Angular service and ngrx you store data in a single place to be passed around components.

Also take a look at this answer

Delegation: EventEmitter or Observable in Angular2

and this

Delegation: EventEmitter or Observable in Angular2

Update

If you want to use the service data in other component you can can have one variable in the service and then push the result to that service which you will get in the component to the service var which will emit that a result has been pushed and then the other component can be notified or you can make use of Input and output event emitters or Behaviour or replay Subject

Rahul Singh
  • 19,030
  • 11
  • 64
  • 86
  • getCategoryDetails(){ return this.http.get('ip/ramu/api/api/…') .map((res:Response) => res.json()); } above code i am using in webservice.ts ngOnInit() { this.wsp.getCategoryDetails().subscribe(data => { this.categoryType = data; }); } above code i have used in home.ts but i want use this response in other component – Siva Unique Jul 08 '17 at 08:42
  • updating ans check – Rahul Singh Jul 08 '17 at 08:54