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

Setting a default value for Angular Material Autocomplete with a value extracted from a database

Using NodeJS in conjunction with Nginx

Why React.js and webpack are restricting the use of var, let, const?

Is there a way for me to increment the value of 'sessionStorage.fgattempt' whenever either 'fgMade()' or 'threeMade()' are called?

Implementing the loading of a Struts 2 action with jquery in javascript

What measures do websites such as yelp and urbandictionary implement to avoid multiple votes from unregistered users?

Is it possible to create a single button that, upon clicking, fades in one image while simultaneously fading out another?

Why is ASP.NET Core returning an empty object in the response?

Running Jenkins in a Docker container to initiate the process of building an Angular application within a

Difficulty redirecting Ajax call to a timed-out, CAS-protected server

What is the best method for combining numerous tiles within a level in Kaboom JS?

Utilizing Angular 5 routerLink for linking to absolute paths with hash symbols

During the compilation process, Angular could not locate the exported enum

The code to trigger the button with the ID 'Button' using Document.getElementById() is not executing the associated code-behind

Nested loops seem to override previous results with the final output

Are the Angular2 Material components able to work with previous versions?

Dragging a div element within a table

Error 16 occurred when attempting to ngUpgrade two different versions of Highcharts

Attempting to show different fields depending on the chosen option

When using the jQuery datepicker on dynamically generated input fields, the selected date automatically updates the first input field