How to display key name from object and key value Plz suggest

Ionic Framework ionic-v3
1

Hi
I dont know how to display key value and I went through the below link also but not able to do exact as given in link

http://plnkr.co/edit/50LlK0k6OnMnkc2kNHM2?p=preview
2

The solution is actualy much simpler -

If you want to iterate key=>value pairs in ngFor (if i correctly understood your question), just set in your component the keys array along with the main object, and iterate keys only like this:

constructor(){
     this.mainObject  =  { 'name': 'Mike', 'age':36, 'job':'programmer'}
     this.keys = Object.keys(this.mainObject);
}

template:

<ion-item *ngFor="let key of keys">
     <ion-label>{{key}} - {{mainObject[key]}}</ion-label>
</ion-item>
3 Likes
3

Hi thanks its working but my data is like below

 this.mainObject  = [{"id":"1","description":"id is 1"},{"id":"2","description":"id is 2"},{"id":"3","description":"id is 3"}]

when I will do

 this.keys = Object.keys(this.mainObject);

in keys array I will get 0,1 ,2
and above there is same key so may display wrong info

4

This is given by the structure of your data - in your case you are actualy iterating array of objects, so it’s not really key=>pair issue, you don’t need the Object.keys()

for your data:

<ion-item *ngFor="let item of mainObject">
     <ion-label>ID: {{item.id}} => VALUE: {{item.description}}</ion-label>
</ion-item>
5

yes the same way I am using but the below object

 this.mainObject  = [{"id":"1","description":"id is 1"},{"id":"2","description":"id is 2"},{"id":"3","description":"id is 3"}]

can be replaced by like below

 this.mainObject  = [{"key":"5","description":"key is 5"}]
6

Object.keys is ok but I want to use this in ionic html then it may work

7

Not sure if i understand correctly but -
You can wrap Object.keys in a function, and use nested ngFor like this:

constructor(){
     this.mainObject  =  [{ 'name': 'Mike', 'age':36, 'job':'programmer'},{ 'name': 'John', 'age':35, 'job':'cook'}]

}

keys(obj){
    return Object.keys(obj);
}

and in template:

<div *ngFor="let item of mainObject">
    <ion-item *ngFor="let key of keys(item)">
         <ion-label>key: {{key}} => VALUE: {{item[key]}}</ion-label>
    </ion-item>
</div>
1 Like
8

hey thanks for your help I have solved above problem…,
my html

 <ion-item *ngFor="let item of items">      
         <span *ngIf="getKeys(item)">
          <div *ngFor="let key of keys">
              {{key}} :  {{item[key]}}              
             </div> 
          </span>
      </ion-item>

in ts file

 public getKeys(data){
    this.keys=Object.keys(data);
    return true;
  }
1 Like
9

hey mine is same like yours and yours is well structured in html …
thanks
but getting this below error

Cannot find a differ supporting object 'true' of type 'boolean'. NgFor only supports binding to Iterables such as Arrays.
10

if you are trying to use my code with your getKeys function, make sure it returns the keys, not “true” like in your example :wink:

11

okkk thanks atleast better than pipe :slight_smile:

12

This is a terrible idea. You should never do anything in a function called by ngIf that modifies state.

1 Like
13

hmm thanks rapropos :+1:

14

hello , can someone help me to extract detail of any selected competence in another component called detail

<app-competence-item
*ngFor=“let key of keys; let i = index”
[competence]=“competences[key]”
[index]= “i”

  ></app-competence-item>

<a style=“cursor:pointer;” [routerLink]="[index]" routerLinkActive=“active” class=“list-group-item clearfix”>

{{competence.name}}

{{competence.description}}

***** wht can I use in detail component ?? ***

ngOnInit() {

console.log(this.competence); // undefined !!

}

15

Look at the conference app schedule and session detail pages.

1 Like
16

thank you very much :slight_smile:

17

Sorry I am a beginner in this field, it is the first time I develop with angular, can you help me please , in fact i don’t know if i am in the true forum or not , my problem is that I will dispose detail of an object of object getting from API , it’s not a table that’s why i have a problem , thank you for help

18

Thanks man. working fine to me