Angular 2 how to get key value from object arrays?

Question

I have object array :

{"-LTYJbW1B3mhrdc6C64N":{"done":0,"name":"Job2","pt":5},"-LTYJcSOUh07SQcixP4x":{"done":0,"name":"Job3","pt":5}}

As it seems, there is two objects with random keys (--LTYJbW1B3mhrdc6C64N) , I want to get these KEYS, how I can do that ?

HTML :

<div class="task-block" *ngFor="let task of objectValues(team.tasks)">
 <p >{{task.name}}</p>
 <button mat-raised-button (click)="updateTask(task)">Done!</button>
  <i class="material-icons deletetask">close </i></div>

TS :

objectValues(obj) { 
  if(obj){
    console.log(JSON.stringify(obj))
    return Object.values(obj || {});
  }

  }



updateTask(task){
      console.log(task.key); //here I want to get task.key
    }

You can use for in loop for object iteration.

Paresh Gami
– Paresh Gami

2018-12-12 17:57:13 +00:00
Commented Dec 12, 2018 at 17:57 — Paresh Gami
– Paresh Gami, Commented Dec 12, 2018 at 17:57
I tried, as of result I wrote here for an example.

PokerJoker
– PokerJoker

2018-12-12 17:57:53 +00:00
Commented Dec 12, 2018 at 17:57 — PokerJoker
– PokerJoker, Commented Dec 12, 2018 at 17:57
Post your code as example in question itself.

Paresh Gami
– Paresh Gami

2018-12-12 17:58:30 +00:00
Commented Dec 12, 2018 at 17:58 — Paresh Gami
– Paresh Gami, Commented Dec 12, 2018 at 17:58
@AndriusL. Please check the answer.

Beginner
– Beginner

2018-12-12 18:06:17 +00:00
Commented Dec 12, 2018 at 18:06 — Beginner
– Beginner, Commented Dec 12, 2018 at 18:06

Paresh Gami · Accepted Answer · 2018-12-12 18:20:21Z

2

html

<div class="task-block" *ngFor="let task of tasks | keyvalue">
  <div (click)="itemClick(task.key)>{{task | json}}</div>
</div>

ts

export class AppComponent  {
  task = {
    "-LTYJbW1B3mhrdc6C64N": {"done":0,"name":"Job2","pt":5},
    "-LTYJcSOUh07SQcixP4x":{"done":0,"name":"Job3","pt":5}
  };

  itemClick(key) {
     console.log(key);
  }
}

edited Dec 12, 2018 at 18:20

answered Dec 12, 2018 at 18:01

Paresh Gami

4,7926 gold badges28 silver badges44 bronze badges

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

3 Comments

PokerJoker Over a year ago

How do I get key of an object in TS ?

PokerJoker Over a year ago

You missunderstood - i need item key not keyS. I mean one item onClick.

Paresh Gami Over a year ago

@AndriusL. Check now.

Code Maniac · Accepted Answer · 2018-12-12 18:08:12Z

1

Object.keys() is all you need.

let obj = {
"-LTYJbW1B3mhrdc6C64N":{"done":0,"name":"Job2","pt":5},
"-LTYJcSOUh07SQcixP4x":{"done":0,"name":"Job3","pt":5}
}

let op = Object.keys(obj);
console.log(op);

answered Dec 12, 2018 at 18:08

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

3 Comments

PokerJoker Over a year ago

It works - gets two keys, but how to get one when I click on item in ngFor ?

Code Maniac Over a year ago

@AndriusL. you can search on object when your onclick event is fired.

PokerJoker Over a year ago

I want to get only one key - not all keys. On which item I click - that key i need

WSMathias9 · Accepted Answer · 2018-12-12 18:18:45Z

1

var keys = Object.keys(YourObject)
console.log(keys)
// ["key1", "keys2",...]


updateTask(task){
   var keys = Object.keys(task)
   console.log(keys[0]);
   return keys[0]
}

MDN Object.keys()

edited Dec 12, 2018 at 18:18

answered Dec 12, 2018 at 18:04

WSMathias9

6858 silver badges16 bronze badges

1 Comment

PokerJoker Over a year ago

How to get one key ? Of an object I click on ?

Beginner · Accepted Answer · 2018-12-12 18:04:35Z

0

You can use Object.keys, which will give you an array of keys of the object.

I hope this will solve the issue.

let obj = {"-LTYJbW1B3mhrdc6C64N":{"done":0,"name":"Job2","pt":5},"-LTYJcSOUh07SQcixP4x":{"done":0,"name":"Job3","pt":5}}

let keysOfObj = Object.keys(obj)

console.log("keys of the obj =>", keysOfObj)

answered Dec 12, 2018 at 18:04

Beginner

9,20011 gold badges50 silver badges94 bronze badges

3 Comments

PokerJoker Over a year ago

How can I get only one object key ? I mean onclick fired. Because I only need one key from an item I click.

Beginner Over a year ago

Since as you told the key is random, how can we identify is there any identifier to check for which click it has orginated

Beginner Over a year ago

Okay got it, so you are passing the object only pass the object Id. In the method catch that Id and from the object.keys(obj) use array.find to find the key from the array. Pass obj and Id two params

MetalSlugSnk · Accepted Answer · 2018-12-12 18:08:59Z

0

Are these objects also in an array or are they on their own?

If they are in an array you can use this to loop over the object keys which will give there "names" and there sub values

Object.keys(obj).forEach(function(key) {
console.log(key, obj[key]);
});

In your case you just want the first level of names. Just object.keys should do the trick.

console.log(Object.keys(obj));

Source: Javascript object loop

edited Dec 12, 2018 at 18:08

answered Dec 12, 2018 at 18:03

MetalSlugSnk

638 bronze badges

3 Comments

PokerJoker Over a year ago

It works, but it gets both values, can I get only one value if I click on one item ? Because as you can see it's in ngFor

MetalSlugSnk Over a year ago

@AndriusL. Remove the obj[key] from the console.log, check the updated answer for just object names.

PokerJoker Over a year ago

still getting both, not one

Collectives™ on Stack Overflow

Angular 2 how to get key value from object arrays?

5 Answers 5

html

ts

3 Comments

3 Comments

1 Comment

3 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

html

ts

3 Comments

3 Comments

1 Comment

3 Comments

3 Comments

Related