title: How to get json data from file using Observable
body: <p>I am practicing reading data from a json file, which has a list of countries and states, before I have used this method, but I want to use httpClient and with tests I have these methods, but what is the correct way to read this data.
  Earlie method:</p>
  <pre><code>  getCountries(): Observable&lt;Country[]&gt; {
      return of(countries['countries']);
    }
    getStates(countryID): Observable&lt;State[]&gt; {
      return of(countries['states'].filter(f =&gt; f.countryId === countryID));
    }
  
  </code></pre>
  <p>And this is a method how its work form me:</p>
  <pre><code>  getC(): Observable&lt;Country[]&gt; {
      return this.http.get&lt;Country[]&gt;(this.link).pipe(map(k =&gt; {
        return k['countries'];
      }));
    }
    getS(CID): Observable&lt;State[]&gt; {
      return this.http.get&lt;State[]&gt;(this.link).pipe(map(v =&gt; {
        return v['states'].filter(f =&gt; f.countryId === CID);
      }));
    }
  </code></pre>
  <p>I see something like this, but i have error</p>
  <pre><code>  getC3(): Observable&lt;Country[]&gt; {
      return this.http.get&lt;Country[]&gt;(this.link)
        .toPromise()
        .then(res =&gt; &lt;Country[]&gt;res.countries)
        .then(data =&gt; {return data});
      }
  </code></pre>
  <p>how is right method to do this,
  Error in :</p>
  <p><a href="https://i.stack.imgur.com/UBV7T.png" rel="noreferrer"><img src="https://i.stack.imgur.com/UBV7T.png" alt="PromError" /></a></p>
  <p>It has been a few days, and it seems a serious problem, so I ask this side, what is the method to get data from this json:</p>
  <pre><code>  [
      {
        &quot;data&quot;: [
          {
             &quot;label&quot;: &quot;Select State&quot;,
             &quot;value&quot;: null
          },
          {
            &quot;label&quot;: &quot;Adeje&quot;,
            &quot;value&quot;: {
               &quot;county&quot;: &quot;Gran Canaria&quot;,
               &quot;state&quot;: &quot;Islas Canarias&quot;,
               &quot;country&quot;: &quot;España&quot;
             }
          },
          {
            &quot;label&quot;: &quot;Agaete&quot;,
            &quot;value&quot;: {
              &quot;county&quot;: &quot;Gran Canaria&quot;,
              &quot;state&quot;: &quot;Islas Canarias&quot;,
              &quot;country&quot;: &quot;España&quot;
           }
         }
       ]
     }
   ]
  </code></pre>
  <p>and how to get data from this json:</p>
  <pre><code>[
    {
      &quot;label&quot;: &quot;Select State&quot;,
      &quot;value&quot;: null
    },
    {
      &quot;label&quot;: &quot;Adeje&quot;,
      &quot;value&quot;: {
        &quot;county&quot;: &quot;Gran Canaria&quot;,
        &quot;state&quot;: &quot;Islas Canarias&quot;,
        &quot;country&quot;: &quot;España&quot;
      }
    },
    {
      &quot;label&quot;: &quot;Agaete&quot;,
      &quot;value&quot;: {
        &quot;county&quot;: &quot;Gran Canaria&quot;,
        &quot;state&quot;: &quot;Islas Canarias&quot;,
        &quot;country&quot;: &quot;España&quot;
      }
    }
  ]
  </code></pre>
  <p>considering that I use <code>--strict</code> mode</p>