Find object by id in an array using angular 2 and typescript

Question

Hello guys i am using asp.net mvc 5.
When i try to find object by id it returns undefined.Here objects are displayed fine when i do console.log(this.vtypes)

controller.cs:

public JsonResult GetVerificationType(){
        List<verificationType> vlist = new List<verificationType>();
        vlist.Add(new verificationType() { vType = "vtype1", vtypeID = 1 });
        vlist.Add(new verificationType() { vType = "vtype2", vtypeID = 2 });
        vlist.Add(new verificationType() { vType = "vtype3", vtypeID = 3 });
        return Json(vlist, JsonRequestBehavior.AllowGet);}

typescript file:

export class DashboardComponent implements OnInit {
model: any = {};
vtypes = [];
constructor(private LoginServiceModule: LoginService, private router: Router, ) { }

ngOnInit() {
    this.LoginServiceModule.getVerificationTypes().subscribe(x => {
        for (let i = 0; i <= x.length - 1; i++) {
            this.vtypes.push(x[i]); <--- x[i].vtypeID doesn't work here
        }
    });
    console.log(this.vtypes); <----- works fine shows array of 3 length
    var item = this.vtypes.find(x => x.vtypeID === 1);
    console.log(item); <---- returns undefined even when vtypeID = 1 is present
}}

Possible duplicate of [How do I return the response from an Observable/http/async call in angular2?](http://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular2) — eko, May 09 '17 at 09:36
No. Here i am asking for search result from array. It returns undefined even though objects are displayed in console — Osvin, May 09 '17 at 09:53
Can you share the `getVerificationTypes` method code and the result of `console.log(this.vtypes)`? — eko, May 09 '17 at 09:54
0 : Object 1 : Object 2 : Object in object 0 vType : "vtype1" vtypeID : 1 — Osvin, May 09 '17 at 09:57
I am returning this from controlller List vlist = new List(); vlist.Add(new verificationType() { vType = "vtype1", vtypeID = 1 }); vlist.Add(new verificationType() { vType = "vtype2", vtypeID = 2 }); vlist.Add(new verificationType() { vType = "vtype3", vtypeID = 3 }); — Osvin, May 09 '17 at 10:00
Can you edit your question and add these info to your question? It's really hard to read it from here.. — eko, May 09 '17 at 10:01
@echonax thank you for showing interest in question. I have updated now. — Osvin, May 09 '17 at 10:11
yes it is updated. Sorry i cant copy the code of console.log. But I can tell you all three records are displayed. Only problem is when i try to find the record using vtypeID it returns undefined — Osvin, May 09 '17 at 10:18
ok can you try this then: `console.log(JSON.stringify(this.vtypes));` — eko, May 09 '17 at 10:20
Ok then it is a duplicate of the link I've given. Let me explain why it gives you the object when you don't use the `JSON.stringify`. It is because objects are mutable. Your console displays your objects' latest value. At first it is empty. When you actually run the console.log it is still empty but after the data arrives your object changes hence it is reflected to the console. Just read the link I've given and tell me the parts you don't understand. — eko, May 09 '17 at 10:27
I am sorry i am pretty new to angular 2 and typescript. So can you tell me how to tackle this situation — Osvin, May 09 '17 at 10:38
There's no need to apologize, we all started from 0. Have you read the link? Is it difficult to understand? — eko, May 09 '17 at 10:39
Check: http://stackoverflow.com/a/43055707/5706293 the **Solution** part. You should do it inside the subscribe. — eko, May 09 '17 at 10:42
Thankyou. No i mean i am already pushing in array inside subscribe. But how to execute the query outside subscribe — Osvin, May 09 '17 at 10:44
You should really read the link :-) but as a very quick sum, you can't — eko, May 09 '17 at 10:45
Thank you very much it solved my problem. Actually i am trying my hands on Angular 2. So don't have much knowledge about it. You were right i was very quick to understand that answer. — Osvin, May 09 '17 at 10:50

score 0 · Accepted Answer · edited May 23 '17 at 10:31

You need to move the async logic inside the subscribe

 this.LoginServiceModule.getVerificationTypes().subscribe(x => {
        for (let i = 0; i <= x.length - 1; i++) {
            this.vtypes.push(x[i]); <--- x[i].vtypeID doesn't work here
        }
        console.log(this.vtypes); <----- works fine shows array of 3 length
        var item = this.vtypes.find(x => x.vtypeID === 1);
        console.log(item);
    });

Suggested reading: How do I return the response from an Observable/http/async call in angular2?

Find object by id in an array using angular 2 and typescript

1 Answers1