How to use "indexOf" in javascript

Question

Hi I am usin Angular and I am struggling for an issue. I would like to know How to use "indexOf()" method on a array which has two or more fields. Here is my code:

My array:

[
{
  "id":1,
  "name": "stuff",
  "surname": "stuff"
},
{
  "id":2,
  "name": "stuff",
  "surname": "stuff"
},
{
  "id":3,
  "name": "stuff",
  "surname": "stuff"
}
]

in my angular Code I would like to a user type a certain id from the template(in the form) and check if the corresponding user exists in my array. my angular code is:

      <form #formValue="ngForm" (ngSubmit)="onClick(formValue)">
             <div class="form-group">
               <label for="exampleInputEmail1">Identifiant du challenge</label>
               <input type="text" name="_id" #_id="ngModel" [(ngModel)]="this.user._id" 
                 class="form-control"  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" 
                 placeholder="identifiant">
               
             </div>
             
              
             <input type="submit" value="Submit"  class="btn btn-primary"/>
    </form>

in my *.ts file I have a method that I perform on the submit event named "onClick" look at my ts file:

 onClick(form: NgForm){
    this.getUsers(form.value._id)
  }

// get users method

 getUsers(id: String){
     return this._http.get<any[]>(this.url + 'getAllChallenge').subscribe(
         (users)=>{
             this.users=users;

             this.checkExist= this.users.indexOf(id)
              if(this.checkExist==-1){
                  alert("this id you typed doesn't exist in our array")
               }
               else{

                  /* here is my issue. this alert if is always printed enven 
                     If I type 1,2 or 3(an 
                     existing id)*/

                  alert("this Id exist")
                 }
          
                  
              } 
     );
  }

Thank you in advance!

samanime · Accepted Answer · 2021-09-10 18:22:32Z

4

Basically, you don't.

The function you want to use is find().

You give it a function which should return true or false based on whatever you want. It will then return the first element that matches, or undefined if no elements do. So, if you get a match, it exists, otherwise, it doesn't. You don't have to explicitly cast to a Boolean, but you can.

this.checkExist = Boolean(this.users.find(user => user.id === id));

This is also a findIndex() method which returns the index instead of the object itself if you'd prefer that, but if you're using it as a Boolean, using find() will be safer (since you won't have to check for !== -1).

answered Sep 10, 2021 at 18:22

samanime

26.8k17 gold badges99 silver badges155 bronze badges

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

Comments

digitalniweb · Accepted Answer · 2021-09-10 18:25:19Z

2

If you passed the object to getUsers() function, you could actually do that. I don't know if it is possible in Angular.

a={}
b={}
c=[a,b]
c.indexOf(b) // = 1

Otherwise use the find() method as suggested by others.

answered Sep 10, 2021 at 18:25

digitalniweb

1,1421 gold badge10 silver badges21 bronze badges

Comments

Manzer A · Accepted Answer · 2021-09-10 18:40:44Z

2

You should use findIndex()

var arr = [
{
  "id":1,
  "name": "stuff",
  "surname": "stuff"
},
{
  "id":2,
  "name": "stuff",
  "surname": "stuff"
},
{
  "id":3,
  "name": "stuff",
  "surname": "stuff"
}
]

let index = arr.findIndex((obj) => {
  return obj.id == 2
})
console.log(index)

answered Sep 10, 2021 at 18:40

Manzer A

3,9266 gold badges41 silver badges79 bronze badges

Comments

Adrian Kokot · Accepted Answer · 2021-09-10 18:23:18Z

1

indexOf find index of a element in array. For ex.:

[1,2,3].indexOf(1); // 0

But if you want to search for element with a property (and find index in array) you can use findIndex:

this.users.findIndex(u => u.id === id);

answered Sep 10, 2021 at 18:23

Adrian Kokot

3,6152 gold badges15 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to use "indexOf" in javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related