#Map response to different interface

11 messages · Page 1 of 1 (latest)

gaunt monolith
#

My interface

export interface Meal {
  strMeal: string;
  strCategory: string;
  strArea: string;
}

export interface MealsResponse {
  meals: Meal[];
}

export interface MyMeal {
  name: string;
  category: string;
  area: string;
}

getMeals(mealName: string): Observable<MealsResponse> {
    return this.http.get<MealsResponse>(`${this.url}search.php?s=${mealName}`).pipe(
      map((response: MealsResponse) => {
        return response;
      })
    );
  }

How do i map Meal to MyMeal? (Reason behind this Meal interface is direct TS version of Json that comes from api, and api property names will change)

#

or maybe there some other way to do it

#

because i want for name to be strMeal

#

and so on and on

fading hamlet
# 
getMeals(mealName: string): Observable<Array<MyMeal>> {
    return this.http.get<MealsResponse>(`${this.url}search.php?s=${mealName}`).pipe(
      map(response) => {
        return response.meals.map(meal => ({
          strMeal: meal.meal,
          strCategory: meal.category,
          strArea: meal.area;
        });
      })
    );
  }

But... why transform a beautiful object with properly named properties into an ugly one with awfully named properties?

gaunt monolith
#

it is in reverse :D

#

oh i miss typed

#

Yes im trurning strMeal -> name

gaunt monolith
#

okay that didint work

#

oh okay fixed