print attributes values from JSON array in Angular2

Question

I'm using Angular2 and I have retrieved some data from Firebase in this way:

dataset: any;
onGetData() {
    this._dataService.getAllData()
        .subscribe(
        data => this.dataset = JSON.stringify(data),
        error => console.error(error)
    );

if I print dataset I get this JSON:

{"-KE8XuCI7Vsm1jKDJIGK":{"content":"aaa","title":"bbb"},"-KE8XvM268lWhXWKg6Rx":{"content":"cccc","title":"dddd"}}

How can I print out a list made up of only the title values from this JSON array?

I'd like to have: bbb - dddd

Community · Accepted Answer · 2017-05-23 12:17:36Z

2

You can only iterate over an array using ngFor. In your case you need to implement a custom pipe to iterate over keys of an object.

Something like that:

@Pipe({name: 'keyValues'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]);
    }
    return keys;
  }
}

and use it like that:

<span *ngFor="#entry of dataset | keyValues">           
  Title: {{entry.value.title}}
</span>

See this question for more details:

How to display json object using *ngFor

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Apr 1, 2016 at 20:15

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

Comments

Austin · Accepted Answer · 2016-04-01 19:55:18Z

0

In your view you need

<div *ngFor='#data of dataset'>
    {{ data.title }} -
</div>

answered Apr 1, 2016 at 19:55

Austin

1,29110 silver badges19 bronze badges

3 Comments

splunk Over a year ago

it doesn't work. I had already tried in this way:stackoverflow.com/questions/36339173/… but I got that error. I also tried adding a pipe MapToIterable but it still didn't work

Austin Over a year ago

oh, that's because the dataset is not an array. You'll need it to be an array to loop through the data like that

splunk Over a year ago

I get this error in the console: Error: Cannot find a differ supporting object '{"-KE8XuCI7Vsm1jKDJIGK.... I tried with dataset: Object[] rather than dataset:any but It gives me error on this line: data => this.dataset = JSON.stringify(data)

Collectives™ on Stack Overflow

print attributes values from JSON array in Angular2

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related