title: Acessing nested data from BehaviorSubject in Angular
body: <p>For my project I have to get a json file from an api.<br>
  This data is then put into an Angular service in order to provide the data to my components.</p>
  
  <p>A codesandbox can be found here: <a href="https://codesandbox.io/s/angular-7khq9" rel="nofollow noreferrer">https://codesandbox.io/s/angular-7khq9</a></p>
  
  <p>An external API is providing the data. For testing purposes I am including it as a <code>.json</code> file here.<br>
  The test data is:</p>
  
  <pre><code>{
      "meta": {
          "a": 42,
          "b": 43
      }
  }
  </code></pre>
  
  <p>I want the components to get the latest data so I am using a <code>BehaviorSubject</code> based on <a href="https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/#data-service-ts" rel="nofollow noreferrer">this</a> article (using the last method), as subscribed components automatically get the newest data. </p>
  
  <pre><code>export class DataService {
      private dataSource = new BehaviorSubject({});
      currentData = this.dataSource.asObservable();
  
      constructor(private http: HttpClient) {
        this.http
            .get("https://7khq9.codesandbox.io/assets/data.json")
            .subscribe(data =&gt; {
                 this.changeData(data);
            });
      }
  
      changeData(data) {
          this.dataSource.next(data);
      }
  }
  </code></pre>
  
  <p>This is the service I am currently using to provide the current data and this part kinda works fine.</p>
  
  <hr>
  
  <p>My component now wants to subscribe to the data and print it out for testing purposes.</p>
  
  <pre><code>export class AppComponent {
      title = "CodeSandbox";
  
      constructor(private ds: DataService) {
          this.ds.currentData.subscribe(data =&gt; {
              console.log("test");
              console.log(data); // works
              console.log(data.test); // works
              //console.log(data.test.a); // does not work
          });
      }
  }
  </code></pre>
  
  <p>This gives me first an empty object (according to <code>new BehaviorSubject({})</code>) and then it continues with <code>data</code> and <code>data.test</code>.</p>
  
  <p>But when I am trying to print <code>data.test.a</code> it does not work and provides an error. (just uncomment <code>app.component.ts:17</code> to reproduce)</p>
  
  <pre><code>ERROR TypeError: Cannot read property 'a' of undefined
  </code></pre>
  
  <p>Now I am trying to get the value of <code>a</code> but I am not able to do so.</p>
  
  <hr>
  
  <h2>Ideas</h2>
  
  <p>Since it is printing the default object the code probably tries to get <code>defaultObject.test.a</code> and since it does not exist there is the error. But on the other side it works with <code>defaultObject.test</code> even though it doesnt't exist either.<br>
  <em>(Just saw that it returns undefined but it still does return something on <code>defaultObject.test)</code></em></p>
  
  <p>So I tried to create a new default object:</p>
  
  <pre class="lang-js prettyprint-override"><code>private dataSource = new BehaviorSubject({
      "meta": {
          "a": 99,
          "b": 99
      }
  });
  </code></pre>
  
  <p>This works fine and prints:</p>
  
  <ol>
  <li><code>Object {a: "99", b: "99"} // default object</code> </li>
  <li><code>Object {a: "52", b: "62"} // changed object</code></li>
  </ol>
  
  <p>The obvious solution now is to just put an example of the dataset as default object right?</p>
  
  <p>This kinda seems wrong as:<br>
  a) it puts this huge json file inside my js (ts) file<br>
  b) I am always sending an old object which will immediately will be replaced.</p>
  
  <p>So now I am wondering how I can solve this problem without sending an example as default object.</p>
  
  <p>I am open for any suggestions.</p>