Making a HTTP Get request for a single item in Ionic 2

Question

Making a HTTP Get request for a single item in Ionic 2

I have successfully implemented an API to retrieve data and display it on the page. It works perfectly for a json response containing more than one object, as it follows a "matches" hierarchy. However, I am facing an issue when trying to print out data for just one object.

The Json that is working and displaying properly is:

https://i.sstatic.net/M72Dw.png

Here is the code snippet that is working:

<ion-content>
    <ion-list>
        <ion-item *ngFor="let item of api" [navPush] = "detailsPage" detail-push>
            <div class="thumb">
                <img src="{{item.smallImageUrls}}">
            </div>
            <div class="text">
                <div class="title">
                    <h1>{{item.recipeName}}</h1>
                </div>
                <div class="rating">
                    <rating [(ngModel)]="item.rating"></rating>
                </div>
                <div class="time">
                    <p>{{item.totalTimeInSeconds | HoursMinutesSeconds}} minutes</p>
                </div>
                <div class="ingredients">
                    <p>{{item.ingredients.length}} Ingredients</p>
                </div>

                <div class="course">
                    <p>{{item.attributes.course}} </p>
                </div>

            </div>
        </ion-item>
    </ion-list>
</ion-content>

Typescript code:

this.http.get('http://api.yummly.com/v1/api/recipes?_app_id=397aed16&_app_key=69e2565adcec7a6609b18bef31261e62')
  .map(res => res.json())
  .subscribe(data => {
    console.log(data);
    this.listing = data.matches;
    resolve(this.listing);
  });

I am currently stuck while working with the following Json:

https://i.sstatic.net/M72Dw.png

This is my request:

this.http.get('mylink.co.uk')
  .map(res => res.json())
  .subscribe(data => {
    console.log(data);
    this.details = data;
    resolve(this.details);
  });

And in Angular, I'm trying to display {{attribution}}

If anyone could provide some guidance on where I might be making a mistake, that would be highly appreciated.

arrays json angular object typescript

Answer 1

Answer №1

It is recommended to utilize any[] for typecasting to an array of data.

this.http.get('mylink.co.uk')
  .map((response: Response) => <any[]>response.json())
  .subscribe(data => {
    console.log(data);
    this.details = data;
    resolve(this.details);
  });

Update 1:

The best practice involves using an interface and defining the necessary properties to bind them to the API's returned result. An example interface could be as follows:

export interface Recipe {

    criteria: Criteria;
    matches: Matches;
    faceCounts: any;
    totalMatchCount: number;
    attribution: Attributes;
}

// Additional interfaces defined here...

Your TypeScript code should be updated like so:

this.http.get('mylink.co.uk')
  .map((response: Response) => <Recipe>response.json())
  .subscribe(data => {
    console.log(data);
    this.details = data;
    resolve(this.details);
  });

Answer 2

It is recommended to utilize any[] for typecasting to an array of data.

this.http.get('mylink.co.uk')
  .map((response: Response) => <any[]>response.json())
  .subscribe(data => {
    console.log(data);
    this.details = data;
    resolve(this.details);
  });

Update 1:

The best practice involves using an interface and defining the necessary properties to bind them to the API's returned result. An example interface could be as follows:

export interface Recipe {

    criteria: Criteria;
    matches: Matches;
    faceCounts: any;
    totalMatchCount: number;
    attribution: Attributes;
}

// Additional interfaces defined here...

Your TypeScript code should be updated like so:

this.http.get('mylink.co.uk')
  .map((response: Response) => <Recipe>response.json())
  .subscribe(data => {
    console.log(data);
    this.details = data;
    resolve(this.details);
  });

Answer 3

Answer №2

Try following this example, I found it helped me solve my issue. Here are the resources I used:

Angular HTTP Guide

Google JSON Style Guide

models.ts:

export interface Location {
  id?: string;
  name?: string;
  author?: { 
    id?: string, 
    name?: string, 
    followerCount?: string
  }
}

mock-locations.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';

import { Location } from '@core/models';

@Injectable()
export class MockLocationsService  {

  private readonly URL = 'assets/data/locations.json';

  constructor(protected httpClient: HttpClient) {}

  public list(): Observable<Location[]>   {
    return this.httpClient.get<Location[]>(this.URL);
  }

}

my.page.ts:

  import { Location } from '@core/models';
    
    ...
    
    export class MyPage implements OnInit, OnDestroy {
    
      public items: Array<Location> = [];
      private itemsSubscription: Subscription;
    
      constructor(public navCtrl: NavController,
                  public navParams: NavParams,
                  private locationsService: MockLocationsService,
                  private logger: LoggerService) {
    
      }
      ...
    
      public ngOnInit() {
    
        this.itemsSubscription = this.locationsService.list().subscribe(data => {
          this.items = data;
        });
      }
    
      ...
    
      public ngOnDestroy() {
        this.itemsSubscription.unsubscribe();
      }
    
    }

For more information, check out this reference: Mapping API Objects in Ionic

Answer 4

Try following this example, I found it helped me solve my issue. Here are the resources I used:

Angular HTTP Guide

Google JSON Style Guide

models.ts:

export interface Location {
  id?: string;
  name?: string;
  author?: { 
    id?: string, 
    name?: string, 
    followerCount?: string
  }
}

mock-locations.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';

import { Location } from '@core/models';

@Injectable()
export class MockLocationsService  {

  private readonly URL = 'assets/data/locations.json';

  constructor(protected httpClient: HttpClient) {}

  public list(): Observable<Location[]>   {
    return this.httpClient.get<Location[]>(this.URL);
  }

}

my.page.ts:

  import { Location } from '@core/models';
    
    ...
    
    export class MyPage implements OnInit, OnDestroy {
    
      public items: Array<Location> = [];
      private itemsSubscription: Subscription;
    
      constructor(public navCtrl: NavController,
                  public navParams: NavParams,
                  private locationsService: MockLocationsService,
                  private logger: LoggerService) {
    
      }
      ...
    
      public ngOnInit() {
    
        this.itemsSubscription = this.locationsService.list().subscribe(data => {
          this.items = data;
        });
      }
    
      ...
    
      public ngOnDestroy() {
        this.itemsSubscription.unsubscribe();
      }
    
    }

For more information, check out this reference: Mapping API Objects in Ionic

Making a HTTP Get request for a single item in Ionic 2

Answer №1

Answer №2

Similar questions

Using JavaScript, you can add an article and section to your webpage

Encountering error "An import path cannot end with a '.ts' extension." when importing TypeScript file in Vue Single File Component (SFC) within VS Code

Jasmine reported that there were no specifications found in the Angular project written in TypeScript

Saving even and odd digits in a collection

Issues with running NPM script for compiling TypeScript code

Using ORACLE SQL to deserialize JSON data

Parsing string to JSON object and extracting specific information

Utilizing the Google Geocode API to handle a promise with a substantial array

Obtain information from a web address using Ionic framework

Determine the presence of a JSON Value/Array in a web application using JavaScript and visualize the information in a dynamic

Sending VSCode to external functions

Combining Kafka as the source with mqtt and using jdbc as the sink

Accessing the various types within a monorepo from a sibling directory located below the root folder

Transform the CSS to a Mat-Form-Field containing a search box within it

@JsonFilter: Enhancing performance through customization

Utilizing Logical Operators in Typescript Typing

Deciphering JSON data in classic ASP

How can I retrieve the Google Maps URL containing a 'placeid' using AJAX?

Button for liking and disliking with Angular, Node.js, and

No input in ng2-select2