Loop to an object in Typescript

Question

Btw, I am new to Typescript and Angular2.

I have a service that returns an object of type PracticeTestList. The declaration of the service and the object is shown below.

Now, I have a custom pipe that reads the object, as shown below.

The custom pipe class did received the object but in for loop the object is read as a single line string not as an object. Why is that?

How to read the object as an object then in Typescript?

Thanks

Service

getMyPracticeTest(uid: string){
   return this._http.get('http://localhost:49753/RestServiceImpl.svc/getMyPracticeTest/' + uid)
    .map(data => {
        data.json();
        // the console.log(...) line prevents your code from working 
        // either remove it or add the line below (return ...)
        console.log("getMyPracticeTest >>>>>>> ", <PracticeTestList[]>data.json());
        return <PracticeTestList[]>data.json();
    });
}

Object declaration

import { Injectable } from '@angular/core';

@Injectable()
export interface PracticeTestList {
    Purchase_ID: number;
    User_FK: number;
    name: string;
    price: number;
    resteurant: string;
    credit_card_number: string;
    purchase_date : any;
    Test_Status_FK: number;
    child :string;
}

Custom Pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'values'})
export class ValuesPipe implements PipeTransform {
    transform(value, args:string[]) : any {
        let keys = [];

        for (let key in value) {
            console.log("Key >>>> " + key + "   value >>>>> " + value[key]);
            keys.push({key: key, value: value[key]});
        }

        return keys;
    }
}

Added Log inside pipe

Key >>>> 0   value >>>>> [  main.bundle.js:64502:13
Key >>>> 1   value >>>>> {  main.bundle.js:64502:13
Key >>>> 2   value >>>>> "  main.bundle.js:64502:13
Key >>>> 3   value >>>>> P  main.bundle.js:64502:13
Key >>>> 4   value >>>>> u  main.bundle.js:64502:13
Key >>>> 5   value >>>>> r  main.bundle.js:64502:13
Key >>>> 6   value >>>>> c  main.bundle.js:64502:13
Key >>>> 7   value >>>>> h  main.bundle.js:64502:13
Key >>>> 8   value >>>>> a  main.bundle.js:64502:13
Key >>>> 9   value >>>>> s  main.bundle.js:64502:13
Key >>>> 10   value >>>>> e  main.bundle.js:64502:13
Key >>>> 11   value >>>>> _  main.bundle.js:64502:13
Key >>>> 12   value >>>>> I  main.bundle.js:64502:13
Key >>>> 13   value >>>>> D  main.bundle.js:64502:13
Key >>>> 14   value >>>>> "  main.bundle.js:64502:13
Key >>>> 15   value >>>>> :  main.bundle.js:64502:13
Key >>>> 16   value >>>>> 1  main.bundle.js:64502:13
Key >>>> 17   value >>>>> ,  main.bundle.js:64502:13
Key >>>> 18   value >>>>> "

Added HTML code

<table class="table" *ngIf="myPurchaseItems">
    <tr *ngFor="let entry  of myPurchaseItems | values">
      <td>Key: {{entry.key}}, value: {{entry.value}}</td>
    </tr>
</table>

Answer 1

Use Object.keys to get the keys first:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'values' })
export class ValuesPipe implements PipeTransform {
  transform(value): any {
    let keys = Object.keys(value);
    return keys.map(k => value[k]);
  }
}

You can try Object.values() to get the values directly but it might not yet be supported everywhere.