title: refresh view after changing json data binded Angular 2+
body: <p>So, the case is the following (i'm going to simplify the code so it's more readable but the same case, i'm using json-server to mount a localhost with the Json file):</p>
  
  <p>i have a json file in a url (say "<a href="http://localhost:3000" rel="nofollow noreferrer">http://localhost:3000</a>")with information like this:</p>
  
  <pre><code>{
    "Object1":{
      "a":"Lorem ipsum",
      "b":"Dolor sit"},
  
    "Object2":{
      "a":"Amet Consectetur",
      "b":"Adipiscing elit"}
  }
  </code></pre>
  
  <p>and a service to get this data, with a method that changes the objet of the json to get the data from</p>
  
  <p>getData.service.ts:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Response } from '@angular/http';
  
  
  @Injectable()
  export class GetDataService {
  
    constructor(private http:Http) { }
  
    private jsonURL: string = "http://localhost:3000/Object1"
  
    getData() {
  
        return (this.http.get(this.jsonURL).map((response:Response)=&gt;response.json()))
    }
  
  }
  
    changeData(param) {
        if (param = 'Obj1'){
        this.jsonURL = "http://localhost:3000/Object1"
        }this.jsonURL = "http://localhost:3000/Object2"        
    }
  
  }
  </code></pre>
  
  <p>and a component with a function that calls the function of the service, like this one</p>
  
  <p>component1.component.ts:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { GetDataService } from './services/getData.service';
  
  @Component({
    selector: 'app-component1',
    templateUrl: './component1.component.html',
  })
  export class Component1Component implements OnInit {
  
    data = [] 
  
    constructor(private getDataService: GetDataService,
                ) { }
  
    changeData(param) {
  
    this.getDataService.changeData(param)
    }
  
   ngOnInit() {
  
      const  GetDataService  = this.getDataService.getData().subscribe(data =&gt; this.data= data);
  
    }
  </code></pre>
  
  <p>and an html template with the property "a" of the "Objetc1" binded, and two buttons that call the function of the getDataService to change the object of the json where i bind the data from:</p>
  
  <p>component1.component.hml:</p>
  
  <pre><code>&lt;p&gt;{{data.a}}&lt;/p&gt;
  &lt;button (click)="changeData('Obj1')"&gt;This button changes the url to Object1&lt;/button&gt;
  &lt;button (click)="changeData('Obj2')"&gt;This button changes the url to Object2&lt;/button&gt;
  </code></pre>
  
  <p>the case is that the url is actually changed (i made a console.log() of the jsonURL variable of the service and it does change, but the view is not refreshed after that change and the {{data.a}} points to the "a" property of Object1 and not to the proerty "a" of the Object2, even when the url points to the Object2.</p>
  
  <p>is there a way to refresh the view after making that change?</p>