Map in Angular 10 array of list objects

Question

This is WORKING service class for which return single transaction

getEditTransactionById(id: number): Observable<ITransaction> {
    return this.httpClient.get<Result<ITransaction>>(baseUrl'/Transaction/GetEditTransactionById'+ `/${id}`)       
    .pipe(
        map((res)=>{
            res.data.valueDate = new Date(res.data.valueDate);       
            return res.data;
        })
    )
}

Actually how I need to change the date format of fields valuedate in array coming from API

Could you please help?

This is my service class which returns array ...Need to change the date format

getTransactions(): Observable<ITransactionResponse[]> {
    return this.httpClient.get<Result<ITransactionResponse[]>>(baseUrl + '/Transaction/GetTransactions')
    .pipe(map( res => res.data));
}

This is my Model:

export class ITransactionResponse {
    id: number;
    transactionNo?:string;
    valueDate?:Date;
    amount?: number;
}

EDIT:

i need to change the date format of valueDate?:Date; of array from json — Glen
– Glen, Commented Nov 16, 2020 at 11:10
@naren in the question i have mention getEditTransactionById.. i need same for getTransactions — Glen
– Glen, Commented Nov 16, 2020 at 11:15
You already map res to res.data, so why don't you also map every entry of res.data the way you do it in your other service? If you don't know how to iterate over a list maybe start with the basics first. — Smutje
– Smutje, Commented Nov 16, 2020 at 11:20

Fahad Subzwari · Accepted Answer · 2020-11-16 12:06:29Z

1

Just replace this

getTransactions(): Observable<ITransactionResponse[]> {
    return this.httpClient.get<Result<ITransactionResponse[]>>(baseUrl + '/Transaction/GetTransactions')
    .pipe(map( res => {
           res.data.map(item => {
             item = new Date(item.valueDate)
           })
           return res.data;
     }));
}

To

getTransactions(): Observable<ITransactionResponse[]> {
    return this.httpClient.get<Result<ITransactionResponse[]>>(baseUrl + '/Transaction/GetTransactions')
    .pipe(map( (res : any) => res.data));
}

This is happening because you didn't specify the type of your incoming res and you are trying to access res.data.valueDate so compiler doesn't know the nested fields of res because default type of res is not an object

edited Nov 16, 2020 at 12:06

answered Nov 16, 2020 at 11:31

Fahad Subzwari

2,3853 gold badges31 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Glen Over a year ago

Thanks ...But i have to change the format of field valueDate in array

Fahad Subzwari Over a year ago

did you try what i mentioned in my answer?

Glen Over a year ago

i tried but actally date is showing 2020-11-26T00:00:00 like that.. i need to format dd-mm-yyyy...so i need to convert all dates in array..( i can change to date to string in the model) is there any solution..

Fahad Subzwari Over a year ago

your array is coming in which key? in res or in res.data ?

Glen Over a year ago

Thnks a lot ...its working ..small changes ..i used moment t convert date to string ...I have replaced date with string..is it possible with date field with format change( i need DD-MM-YYYY)

|

Ramesh Shah · Accepted Answer · 2020-11-16 11:28:49Z

0

After mapping the result to get list of ITransactionResponse, you can map the list of ITransactionResponse, like res.map(x => x.valueDate = new Date(x.valueDate))

answered Nov 16, 2020 at 11:28

Ramesh Shah

3212 silver badges7 bronze badges

1 Comment

Glen Over a year ago

i tried nut no luck ..could u please append in my method

Collectives™ on Stack Overflow

Map in Angular 10 array of list objects

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related