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


#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

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>

#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;
  }

#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.


#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.


#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