angular2 output object value in html without specifying object name

Question

I'm trying to output JSON values in HTML using ngFor without specifying the object name to render the value in HTML, is this even possible?

I know that I have to specify the object name to actually render the value like the example below.

Let's say I have this JSON object:

'customerObjs':'Ob1'
'FirstName': 'Name'
'Something': 'Something'

And in HTML, I have to do something like the code below to show the value,

<div *ngFor="let obj of Objects">
   {{ obj.FirstName }}
</div>

However, the idea is to render the value even if you don't know the object name. Because what if the backend guy added a new object of YouDontKnowWhatThisIs then the HTML should still render the value of that YouDontKnowWhatThisIs.

So it's more of dynamically outputting the response with hard coding the object name.

Is this possible? If so can someone show an example?

Can you provide a plunker to this? You need to provide more info to get some good help. Look at your customerObjs, actually it is a list and not an object. It wont even work because it is an invalid JSON. But, try to use the json pipe like: {{obj | json}} so you will see all object fields. — Bruno João
– Bruno João, Commented Sep 9, 2016 at 12:56
each time i diplsy json online is with <pre>{{ Objects | json:true }}</pre> — Patrick Ferreira
– Patrick Ferreira, Commented Sep 9, 2016 at 13:10

Bruno João · Accepted Answer · 2016-09-09 13:18:05Z

2

You can use a custom pipe that extract the keys and value from an object, so you can use them as you need.

keys.pipe.ts

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

@Pipe({name: 'keys'})
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;
  }
}

myview.html

<p *ngFor="let object of objects | keys">
  <b>{{object.key}}</b>
  <span>{{object.value}}</span>
</p>

I hope it can help you.

answered Sep 9, 2016 at 13:18

Bruno João

5,6042 gold badges23 silver badges26 bronze badges

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

Comments

Frank Bessou · Accepted Answer · 2016-09-09 13:38:09Z

1

If this behavior is only local to one component, you can define a getter in it that lists the properties in your object:

@Component({/*...*/})
export class {
    private obj;

    get props() {
        return obj ? Object.keys(this.obj.prop): []
    }
}

With the following template:

<div *ngFor="let prop in props">
   {{obj[prop]}} 
</div>

answered Sep 9, 2016 at 13:38

Frank Bessou

6525 silver badges8 bronze badges

1 Comment

nCore Over a year ago

This is how I'm doing it now before I read this answer. Will give it an upvote :).

entozoon · Accepted Answer · 2017-08-15 08:45:35Z

0

If you're just debugging an object, you could do a lot worse than a cheeky JSON.stringify equivalent:

<pre>{{object | json}}</pre>

answered Aug 15, 2017 at 8:45

entozoon

3403 silver badges7 bronze badges

Collectives™ on Stack Overflow

angular2 output object value in html without specifying object name

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related