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>

slaesh · Accepted Answer · 2017-01-19 07:23:09Z

4

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

edited Jan 19, 2017 at 7:23

answered Jan 19, 2017 at 7:10

slaesh

17k6 gold badges53 silver badges54 bronze badges

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

3 Comments

balajivaishnav Over a year ago

what is values in the getjsonvalues pipe am getting it as error

balajivaishnav Over a year ago

I mean Object.values

slaesh Over a year ago

First, i renamed your pipe! Second, see my updated answer.. now using Günter's pipe.

Günter Zöchbauer · Accepted Answer · 2017-01-19 07:07:25Z

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, 2017 at 7:07

answered Jan 19, 2017 at 6:55

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

8 Comments

balajivaishnav Over a year ago

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

Günter Zöchbauer Over a year ago

I forgot to update the selector and class name. I guess you did not copy that part, right?

Günter Zöchbauer Over a year ago

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 Over a year ago

It would also be interesting what the console prints with the console.log(...) line I added to the answer.

balajivaishnav Over a year ago

am getting the [object object] not the values

|

Collectives™ on Stack Overflow

Unable to get JSON Object value using angular2 pipe

2 Answers 2

3 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related