Unable to get JSON Object value using angular2 pipe

Question

I am creating a dynamic table using Angular2. I have created an angular2 component with 2 pipes: 1st pipe gets the key from the JSON object which is used as the column for the table (working perfectly), whereas 2nd pipe must get the value from JSON object (not working) the result which I am getting is [object Object] but not the value, sorry if this question was duplicated, I can't able to find any solution elsewhere in the WEB so am posting this, Please help me to resolve this issues

The 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>

Günter Zöchbauer · Answer 1 · 2017-01-19T07:07:25.550

4

I think the value pipe should be like the keys pipe but instead return the values

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]);
  }
}

or use the experimental https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Object/values

edited Jan 19 '17 at 07:07

answered Jan 19 '17 at 06:55

Günter Zöchbauer

623,577
216
2,003
1,567

no error messages in the console, am not even getting the [object object], only the key pipe is returning the value correctly, the jsonvalue pipe not returning any thing – balajivaishnav Jan 19 '17 at 07:03
I forgot to update the selector and class name. I guess you did not copy that part, right? – Günter Zöchbauer Jan 19 '17 at 07:05
I didn't even look at how you implemented the keys pipe |-). You can just use `Object.keys()` to get the keys. I updated my answer. – Günter Zöchbauer Jan 19 '17 at 07:07
It would also be interesting what the console prints with the `console.log(...)` line I added to the answer. – Günter Zöchbauer Jan 19 '17 at 07:07
am getting the [object object] not the values – balajivaishnav Jan 19 '17 at 07:10
Where do you get `[object object]`? I'm pretty sure that's not what the console prints – Günter Zöchbauer Jan 19 '17 at 07:11
you are right not in console, but in web page, in console am getting it as array Array[2]0: ObjectAmount: "1000"Particulars: "Test"Sno: "1"__proto__: Object1: ObjectAmount: "10000"Particulars: "Sample"Sno: "2"__proto__: Objectlength: 2__proto__: Array[0] – balajivaishnav Jan 19 '17 at 07:14
See my answer, with this fix Günter's answer will work too. :) – slaesh Jan 19 '17 at 07:15

slaesh · Accepted Answer · 2017-01-19T07:23:09.713

You problem is incorrect usage of 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'
  }
}

See my live demo: https://plnkr.co/edit/VvxBShlYAvGt8nf9XC0K?p=preview

what is values in the getjsonvalues pipe am getting it as error — balajivaishnav, Jan 19 '17 at 07:20
First, i renamed your pipe! Second, see my updated answer.. now using Günter's pipe. — slaesh, Jan 19 '17 at 07:23

Unable to get JSON Object value using angular2 pipe

2 Answers2