Pass JSON file from one component to another using a service using Angular 6

Question

In the displayresults component, I'm trying to pass the response I get from the http.get() to the articleinfo component. I was originally doing this by using queryParams but I need to pass more complex information from my JSON such as other objects and arrays. I'm using the ArticleInformationService to set the response using this.article_info.setJSONData(response); and then I use console.log(this.article_info.getJSONData()); to make sure I'm getting the right data and I am. But now when I go into the articleinfo component and try console.log(article_info.getJSONData()); I get an empty object. My assumption is that article_info inside the articleinfo component doesn't see its value from displayresults because it is a new instance? Am I going about this the right way?

Component 1

import { Component, OnInit } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Router, NavigationExtras } from "@angular/router";
import { ArticleInformationService } from "../article_information/article-information.service";

@Component({
  selector: "app-displayresults",
  templateUrl: "./displayresults.component.html",
  styleUrls: ["./displayresults.component.css"],
  providers: [ArticleInformationService]
})
export class DisplayresultsComponent implements OnInit {
  response: any;
  constructor(
    private http: HttpClient,
    private router: Router,
    private article_info: ArticleInformationService
  ) {}

  ngOnInit() {
    this.search();
  }

  search() {
    var query: string = window.location.search.substring(1).split("=")[1];

    this.http
      .get(
        "http://my.json/_search?q=" +
          query +
          "&size=100"
      )
      .subscribe(response => {
        this.response = response;
            //*******Setting the response to the service atttribute
            this.article_info.setJSONData(response);
            console.log(response);
            console.log(this.article_info.getJSONData());
          });
      }

Component 2

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { ArticleInformationService } from "../article_information/article-information.service";

@Component({
  selector: "app-articleinfo",
  templateUrl: "./articleinfo.component.html",
  styleUrls: ["./articleinfo.component.css"],
  providers: [ArticleInformationService]
})

export class ArticleinfoComponent implements OnInit {
  constructor(article_info: ArticleInformationService) {
    console.log(article_info.getJSONData());
  }
  ngOnInit() {}
}

Service

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

@Injectable({
  providedIn: "root"
})
export class ArticleInformationService {
  jsonData;
  constructor() {
    this.jsonData = {};
  }
  setJSONData(val: object) {
    this.jsonData = val;
  }
  getJSONData() {
    return this.jsonData;
  }
}

Does your component2 is invoked after storing the data in service? I guess your componet2 is calling the get() method before you set() the value. You need observable to track your values — Ans Bilal, Oct 31 '18 at 18:09

Sajeetharan · Answer 1 · 2018-10-31T18:14:19.913

1

You are resetting the jsonData object in the constructor, which means whenever you instantiate your service, your object will be reset to empty.

Remove setting jsonData to empty inside the constructor, which should solve your issue.

 jsonData = {};
 constructor() {
 }

if you are not doing any refresh via router the above should work. However i would suggest you to use Observable,subject to handle this scenario as mentioned in the answer here.

edited Oct 31 '18 at 18:14

answered Oct 31 '18 at 18:08

Sajeetharan

216,225
63
350
396

Unfortunately it didn't solve it. The object is still empty. – Bryan Bastida Oct 31 '18 at 18:11
i guess you are looking for subject https://stackoverflow.com/questions/47573371/how-to-shared-object-data-between-two-component-using-servicerxjs-subject – Sajeetharan Oct 31 '18 at 18:13
I am using a router. I'm going from /displayresults to /article so that I can display the information from the JSON I get in /displayresults. Is this the reason that I'm getting an empty object? – Bryan Bastida Oct 31 '18 at 18:19
yeah use a subject as mentioned in the above link – Sajeetharan Oct 31 '18 at 18:20
@BryanBastida dude what is different from the accpeted answer? – Sajeetharan Oct 31 '18 at 18:42
I was doing `providers: [ArticleInformationService]` in both components rather than just once in app.module.ts – Bryan Bastida Nov 01 '18 at 16:48

Sunil Singh · Answer 2 · 2018-10-31T18:27:54.033

It looks like you have issue with async and sequence of calls. The best would be to use the BehaviorSubject in service class to solve this issue.

The modified code is here -

ArticleInformationService

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

@Injectable({
  providedIn: "root"
})
export class ArticleInformationService {

  private dataSource = new BehaviorSubject({});
  data = this.dataSource.asObservable();

  constructor() {
    this.jsonData = {};
  }
  setJSONData(val: object) {
    this.dataSource.next(val);
  }
  getJSONData() {
    return this.data;
  }
}

ArticleinfoComponent

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { ArticleInformationService } from "../article_information/article-information.service";

@Component({
  selector: "app-articleinfo",
  templateUrl: "./articleinfo.component.html",
  styleUrls: ["./articleinfo.component.css"],
  providers: [ArticleInformationService]
})

export class ArticleinfoComponent implements OnInit {
  constructor(article_info: ArticleInformationService) {
    article_info.getJSONData().subscribe(data=>{
        console.log(data); //<-- data is here
    });
  }
  ngOnInit() {}
}

Note : code was written in stackoverflow editor so there could be typo or syntactical error. Please correct yourself.

score 0 · Accepted Answer · answered Oct 31 '18 at 18:29

0

By providing your serivce within each of your classes, you are creating two independant instances of your service. The values which are stored in the first version, will not be visible in the second version and vice versa. Provide your service on a higher level instead, for example on the module layer.

answered Oct 31 '18 at 18:29

Patrick Kelleter

2,631
1
13
19

There it is! Thank you so much! – Bryan Bastida Oct 31 '18 at 18:34

score 0 · Answer 4 · answered Oct 31 '18 at 19:00

0

I think your component2 is getting loaded before service returns response in your component1. You can check https://angular.io/guide/component-interaction for some help

answered Oct 31 '18 at 19:00

anubhab

730
1
7
11

Pass JSON file from one component to another using a service using Angular 6

4 Answers4

ArticleInformationService

ArticleinfoComponent