Converting JSON data into an array of a particular type in Angular

Question

Converting JSON data into an array of a particular type in Angular

My current challenge involves converting JSON data into an array of Recipe objects.

Here is the response retrieved from the API:

{
    "criteria": {
        "requirePictures": true,
        "q": null,
        "allowedIngredient": null,
        "excludedIngredient": null
    },
    "matches": [
        {
            "imageUrlsBySize": {
                "90": "https://lh3.googleusercontent.com/8H_kR4fF6IE517FKDHGOyVHEgNmmCdhX_Yz2YfxIDJgCQoU_NJ-hw_FJ1jEolQPPAfoKuKMw4jYjJK512gTyfQ=s90-c"
            },
            "sourceDisplayName": "Mrs. Happy Homemaker",
            "ingredients": [
                "frozen meatballs",
                "pasta sauce",
                "shredded mozzarella cheese",
                "shredded parmesan cheese",
                "Italian seasoning"
            ],
            "id": "Meatball-Parmesan-Casserole-2626493",
            "smallImageUrls": [
                "https://lh3.googleusercontent.com/3dbNmfS4BI-7CUsm2WYE8l7-90CNi3rQPUkO5EMc0gts_MBUAVZlTngm-9VHshp9toXl73RKwiUs9JQCpx6RoQ=s90"
            ],
            "recipeName": "Meatball Parmesan Casserole",
            "totalTimeInSeconds": 900,
            "attributes": {
                "course": [
                    "Main Dishes"
                ]
            },
            "flavors": null,
            "rating": 4
        }
    ],
    "facetCounts": {},
    "totalMatchCount": 1228808,
    "attribution": {
        "html": "Recipe search powered by <a href='http://www.yummly.co/recipes'><img alt='Yummly' src='https://static.yummly.co/api-logo.png'/></a>",
        "url": "http://www.yummly.co/recipes/",
        "text": "Recipe search powered by Yummly",
        "logo": "https://static.yummly.co/api-logo.png"
    }
}

I am attempting to tackle this issue using the map operator in my code snippet below.

  list(): Observable<Recipe[]> {
    return this.http.get('url').pipe(
      map(data =>
        data.matches.map((item: any) =>
          new Recipe({
            name: item.recipeName
          })
        )
      )
    );
  }

However, I encountered an error stating that "matches does not exist on type Object". Am I overlooking something crucial? How can I effectively access the "matches" array to instantiate Recipe objects dynamically within an array? Also, should I stick with utilizing the map operator or explore alternative approaches?

javascript angular typescript

Answer 1

Answer №1

  fetchData(): Observable<any> {
    return this.http.get('url').pipe(
      map(data =>
        data.matches.map((item: any) =>
          new Recipe({
            name: item.recipeName
          })
        )
      )
    );
  }

Alternatively

fetchData(): Observable<Recipe> {
    return this.http.get('url').pipe(
      map(data =>
        data.matches.map((item: any) =>
          new Recipe({
            name: item.recipeName
          })
        )
      )
    );
  }

Consider implementing one of these solutions, since you are receiving a single JSON object from the URL but providing an array of objects in observables.

Answer 2

  fetchData(): Observable<any> {
    return this.http.get('url').pipe(
      map(data =>
        data.matches.map((item: any) =>
          new Recipe({
            name: item.recipeName
          })
        )
      )
    );
  }

Alternatively

fetchData(): Observable<Recipe> {
    return this.http.get('url').pipe(
      map(data =>
        data.matches.map((item: any) =>
          new Recipe({
            name: item.recipeName
          })
        )
      )
    );
  }

Consider implementing one of these solutions, since you are receiving a single JSON object from the URL but providing an array of objects in observables.

Answer 3

Answer №2

To resolve the issue, I decided to replace it with the following solution:

list(): Observable<Recipe[]> {
    return this.http.get('url').pipe(
      map((data: any) =>
        data.matches.map((item: any) =>
          new Recipe({
            name: item.recipeName
          })
        )
      )
    );
  }

I made an adjustment of changing 'data' to '(data: any)'

Answer 4

To resolve the issue, I decided to replace it with the following solution:

list(): Observable<Recipe[]> {
    return this.http.get('url').pipe(
      map((data: any) =>
        data.matches.map((item: any) =>
          new Recipe({
            name: item.recipeName
          })
        )
      )
    );
  }

I made an adjustment of changing 'data' to '(data: any)'

Converting JSON data into an array of a particular type in Angular

Answer №1

Answer №2

Similar questions

What is the process for executing JavaScript code that is stored as a string?

A useful tip for emphasizing tags that have attributes with endings

The issue arises when attempting to drop elements from two lists with incorrect positions and mismatched coordinates

Exporting a module from a TypeScript definition file allows for seamless sharing

Trigger the opening of a class or window upon pressing the button

What is the best way to permit multiple instances of a component in separate tabs without losing their individual states?

Is there a way for me to retrieve the element that is linked to the ng-disabled attribute?

Struggling to remove the image tag from the jQuery ajax response

The Angular2 Mvc5 demonstration application is experiencing compilation errors

Blend jQuery fade in

One controller, divergent template, introducing a fresh variable

Discovering the RGB color of a pixel while hovering the mouse in MapboxGL Js

Create and transmit an array of JSON objects

Personalized Jasmine matchers for a Protractor/WebDriverJS component

JavaScript's version of "a certain phrase within a text"

Middleware functions in Mongoose for pre and post actions are not being triggered when attempting to save

Leveraging AJAX to transmit a JavaScript variable to PHP within the same webpage

Chrome causing window.open to fail

How to retrieve data from an undefined table using Sequelize that is created through association

What could be causing BeautifulSoup to overlook certain elements on the page?