Do I have to create all the classes returned when consuming a JSON web service in Angular/Typescript?

Question

Do I have to create all the classes returned when consuming a JSON web service in Angular/Typescript?

I would like to access this service:

https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=YOUR_API_KEY

I am interested in extracting only two pieces of data:

        "location" : {
           "lat" : -10.6872332,
           "lng" : -37.4329352

However, this service returns data in 11 different classes. My question is: Is it necessary to navigate through all these classes just to access 2 fields?

Currently, my method is stuck at this point.

getCoord(city:string): Observable<any>
{
    return this._http.get(this.urlBase+cidade+this.key)
        //.map((response: Response) => <any>response.json())
        .do(data => console.log('All: ' + JSON.stringify(data)));
}

json angular google-maps typescript google-api

Answer 1

Answer №1

No, I do not. In order to utilize specific properties of JSON, all that is needed is to create a class or path to access the data. In my scenario, to retrieve the location data {lat: number; lng: number;}, I created an object/class along with a few interfaces:

interface Location{lat: number; lng: number;}
interface Geometry{location: Location;}
interface Result{geometry: Geometry;}

export class GeocoderResult {
    results: Array<Result>;
    status: string;

    constructor() {
        this.results = new Array<Result>();
    }
}

In my .TS file, the method works perfectly:

key: string = '&key=XXX';
urlBase: string = 'https://maps.googleapis.com/maps/api/geocode/json?address=';
city: string = 'yourCityName';

getCoord(city: string): any
{
    return this._http.get<GeocoderResult>(this.urlBase+city+this.key)
    .subscribe(data => {    
        return data.results[0].geometry.location;
        //console.log('geo = ', data.results[0].geometry.location);
    });
}

Answer 2

No, I do not. In order to utilize specific properties of JSON, all that is needed is to create a class or path to access the data. In my scenario, to retrieve the location data {lat: number; lng: number;}, I created an object/class along with a few interfaces:

interface Location{lat: number; lng: number;}
interface Geometry{location: Location;}
interface Result{geometry: Geometry;}

export class GeocoderResult {
    results: Array<Result>;
    status: string;

    constructor() {
        this.results = new Array<Result>();
    }
}

In my .TS file, the method works perfectly:

key: string = '&key=XXX';
urlBase: string = 'https://maps.googleapis.com/maps/api/geocode/json?address=';
city: string = 'yourCityName';

getCoord(city: string): any
{
    return this._http.get<GeocoderResult>(this.urlBase+city+this.key)
    .subscribe(data => {    
        return data.results[0].geometry.location;
        //console.log('geo = ', data.results[0].geometry.location);
    });
}

Do I have to create all the classes returned when consuming a JSON web service in Angular/Typescript?

Answer №1

Similar questions

Guide to vertically aligning text in an overlay using CSS within Angular 2

Encountering an issue in Angular 8 flex-layout 8: Unable to export member ɵNgClassImpl

Creating an interactive checkbox input field utilizing a JSON-driven database

Assign a class to an Angular component's host element without any conditions

The error message, "Property 'message' is not found on type 'ErrorRequestHandler<ParamsDictionary, any, any, ParsedQs, Record<string, any>>.ts(2339)", indicates that the requested property is not present in the specified type

Angular is a powerful framework that enables the creation of dynamic user interfaces. One of its many

Rule in Eslint for Typescript that enforces explicit typing and prohibits the use of implicit "any

Exploring the various form types supported by 'react-hook-form'

How do React Native proxies differ from vanilla React proxies in their functionality?

Python: convert a list generator to be serializable in JSON format

Running 'npm start' results in an error linked to package.json

Trouble with AJAX not properly fetching PHP JSON response

Clear the input field once an item has been successfully added to the array

What steps should I follow to have my edit form component extract values from HTML in Angular?

Having difficulty interpreting the JSON response sent by Google

Issue encountered in Vite Preview: Uncaught (in promise) SyntaxError: JSON.parse found an unexpected character at the beginning of the JSON data, line 1 column 1

Getting the initial value of a node from a JSON response by utilizing Groovy

Checking radios or checkboxes will always result in a null value when retrieving their form values

What is the best way to transfer an array of intricate objects to a different page in PHP?

Incorporating a new parameter into the JSON response from SoundCloud