Cannot get JSON object value using angular2 pipe

Question

I am creating a dynamic table using Angular2. I created an angular2 component with two pipes: the 1st channel receives the key from the JSON object, which is used as a column for the table (works fine), while the 2nd channel should get the value from the JSON object (doesn't work) the result that I I get, [object Object]but not the value, sorry, if this question was duplicated, I can’t find any solution elsewhere on the WEB, so we will post it, please help me solve these problems.

Below is my code for your reference

app.component.ts

import { Component } from '@angular/core';
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })

    export class AppComponent {
       rowData=[
         {"Sno":"1","Particulars":"Test","Amount":"1000"},
         {"Sno":"2","Particulars":"Sample","Amount":"10000"}
         ];
    }

Pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'getjsoncolKeys' })
export class KeysPipe implements PipeTransform {
  transform(value, args: string[]): any {
    let keys = [];
    for (var i = 0; i < value.length; i++) {
      for (let key in value[i]) {
        if (keys.indexOf(key) === -1) {
          keys.push(key);
        }
      }
    }
    return keys;
  }
}

@Pipe({ name: 'getjsonvalues' })
export class getjsonValues implements PipeTransform {
  transform(value, args:string[]) : any {

    let values = [];
    for(var i=0; i<value.length;i++){
      for (let key in value) {
      values.push(value[key]);
    }
    }
    return values;
  }
}

app.component.html

<table>
  <tr>
    <th *ngFor='let column of rowData | getjsoncolKeys'>{{column}}</th>
  </tr>
  <tr>
    <td *ngFor='let row of rowData | getjsonvalues'>{{row}}</td>
  </tr>
</table>

Answer 1

rowData.

@Pipe({ name: 'getjsoncolKeys' })
export class KeysPipe implements PipeTransform {
  transform(value, args: string[]): any {
    return Object.keys(value);
  }
}

@Pipe({ name: 'getjsonvalues' })
export class ValuesPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values
    // return Object.values(value);

    // Pipe from Günter !!
    let keys = Object.keys(value);
    console.log(keys.map(k => value[k]));
    return keys.map(k => value[k]);
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>

    <table>
      <tr>
        <!-- use first element to get the keys -->
        <th *ngFor='let column of rowData[0] | getjsoncolKeys'>{{column}}</th>
      </tr>
      <!-- iterate through all elemnts -->
      <tr *ngFor="let row of rowData">
        <td *ngFor='let val of row | getjsonvalues'>{{val}}</td>
      </tr>
    </table>
  `,
})
export class App {
  name:string;

  rowData = [
    {"Sno":"1","Particulars":"Test","Amount":"1000"},
    {"Sno":"2","Particulars":"Sample","Amount":"10000"}
  ];

  constructor() {
    this.name = 'Angular2'
  }
}

: https://plnkr.co/edit/VvxBShlYAvGt8nf9XC0K?p=preview

Answer 2

, ,

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

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Object/values