CODEWITHSUNDEEP
jsonangulartypescript
user11202780
user11202780

Reputation:

How to get json data from file using Observable

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:

  getCountries(): Observable<Country[]> {
    return of(countries['countries']);
  }
  getStates(countryID): Observable<State[]> {
    return of(countries['states'].filter(f => f.countryId === countryID));
  }

And this is a method how its work form me:

  getC(): Observable<Country[]> {
    return this.http.get<Country[]>(this.link).pipe(map(k => {
      return k['countries'];
    }));
  }
  getS(CID): Observable<State[]> {
    return this.http.get<State[]>(this.link).pipe(map(v => {
      return v['states'].filter(f => f.countryId === CID);
    }));
  }

I see something like this, but i have error

  getC3(): Observable<Country[]> {
    return this.http.get<Country[]>(this.link)
      .toPromise()
      .then(res => <Country[]>res.countries)
      .then(data => {return data});
    }

how is right method to do this, Error in :

PromError

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:

  [
    {
      "data": [
        {
           "label": "Select State",
           "value": null
        },
        {
          "label": "Adeje",
          "value": {
             "county": "Gran Canaria",
             "state": "Islas Canarias",
             "country": "España"
           }
        },
        {
          "label": "Agaete",
          "value": {
            "county": "Gran Canaria",
            "state": "Islas Canarias",
            "country": "España"
         }
       }
     ]
   }
 ]

and how to get data from this json:

[
  {
    "label": "Select State",
    "value": null
  },
  {
    "label": "Adeje",
    "value": {
      "county": "Gran Canaria",
      "state": "Islas Canarias",
      "country": "España"
    }
  },
  {
    "label": "Agaete",
    "value": {
      "county": "Gran Canaria",
      "state": "Islas Canarias",
      "country": "España"
    }
  }
]

considering that I use --strict mode

Upvotes: 8

Views: 4775

Answers (1)

Owen Kelvin
Owen Kelvin

Reputation: 15098

The easiest way to solve your problem is to recognize that the best practice while using angular is to use Observables rather that using Promises

The Problem

Consider the code

getC3(): Observable<Country[]> {
  return this.http.get<Country[]>(this.link)
    .toPromise()
    .then(res => <Country[]>res.countries)
    .then(data => {return data});
  }

Thw line return this.http.get<Country[]>(this.link) will return an Observable. If you call .toPromise() on an Observable this returns a Promise. You will hence get the error that Promise<Country[]> does not contain properties ... from type Observable<Country[]>

Solution

One way (the better way) to solve this to simply maintain the type as Observable.

getC3(): Observable<Country[]> { return this.http.get<Country[]>(this.link)}

I wouldn't recommend below, Changing the return type to promise

getC3(): Promise<Country[]> {
  return this.http.get<Country[]>(this.link)
    .toPromise()
    .then(res => <Country[]>res.countries)
    .then(data => {return data});
  }

Upvotes: 7

Related Questions