Creating Dummy Model In Angular

Question

I trying to create a dummy model in Angular to get values from back end. But it's throwing some error because of array.

abc.ts

export class abc {

    date: Date;
    time: string;
    ABC_Info: [{
            item: string,
            quantity: number,
            a: number
        },
        {
            item: string,
            quantity: number,
            a: number
        }
    ]

    constructor(date: Date, time: string, item: string, quantity: number, a: number) {
        this.meal_time = meal_time;
        this.date = date;
        this.time = time;

        this.ABC_Info[0].item = item;
        this.ABC_Info[0].quantity = quantity;
        this.ABC_Info[0].carbs = a;

        this.ABC_Info[1].item = item;
        this.ABC_Info[1].quantity = quantity;
        this.ABC_Info[1].carbs = a;

    }
}

abc.service.ts

import { abc} from './models/abc';

getABCs(start ? : moment.Moment, end ? : moment.Moment): Observable < abc[] > {
    let params = new HttpParams();

    if (start) {
        params = params.append('start', start.toISOString());
    }

    if (end) {
        params = params.append('end', end.toISOString());
    }
    return this.baseService.getParams('/api/abc/getAll', params)
        .pipe(
            map(res => res as Object[] || []),
            map(bolus => bolus.map(k => new abc(
                    new Date(k['date']),
                    k['time'],
                    k['item'],
                    k['quantity'],
                    k['a']))

            )
        )
}

Error in browser console

ERROR TypeError: Cannot read property '0' of undefined at new Bolus(abc.ts: 39) at abc.service.ts: 33 at Array.map( < anonymous > ) at MapSubscriber.project(carb.service.ts: 33) at MapSubscriber.push.. / node_modules / rxjs / _esm5 / internal / operators / map.js.MapSubscriber._next(map.js: 35) at MapSubscriber.push.. / node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.next(Subscriber.js: 54) at MapSubscriber.push.. / node_modules / rxjs / _esm5 / internal / operators / map.js.MapSubscriber._next(map.js: 41) at MapSubscriber.push.. / node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.next(Subscriber.js: 54) at MergeMapSubscriber.push.. / node_modules / rxjs / _esm5 / internal / operators / mergeMap.js.MergeMapSubscriber.notifyNext(mergeMap.js: 84) at InnerSubscriber.push.. / node_modules / rxjs / _esm5 / internal / InnerSubscriber.js.InnerSubscriber._next(InnerSubscriber.js: 15)

Dunno if it's really required by maybe add a this.ABC_Info = []; to initialize it as array. Maybe add the thrown error message to the question, might help. — Fussel
"I'm getting an error" is not helpful- it is necessary to explain what you are trying to do first. — theMayer

Manu Bhardwaj Manu Bhardwaj · Accepted Answer · 2019-01-18T12:14:07

This is how to define a model:

export interface Abc {
  date: Date;
  time: string;
  ABC_Info: {item: string, quantity: number, a: number}[]
}

And then in your http service:

getAbc(): Observable<Abc> {
  return this.http.get('some api').pipe(map(res => res.json)); // Remove pipe if angular version is below 6
}

Creating Dummy Model In Angular

2 Answers