How to filter an array and return the entire object - Angular

62.4k Views Asked by At
export class ResultComponent {
    students: AdmissionFormData[]

    constructor(private adStudent: AdmissionFormService) {
        adStudent.adFormGet().subscribe(
            x => this.students = x
        )
    }

    onSubmit(value) {

    }
}

In the students array, I have the data. And onSubmit is the function and value is the parameter "roll"

And the HTML File:

<div class="form">
<div class="col-md-5 offset-md-3">
  <div class="card">
      <div class="card-header text-center">
          <h3 id="form_name" >Search Result</h3>
      </div>

      <div class="card-block">
          <form (ngSubmit)="onSubmit(f.value)" #f="ngForm" >
              <div class="form-group">
                <label for="">Roll</label>
                <input
                type="number" 
                ngModel
                name="reg" 
                #reg="ngModel" 
                [min]="99999"
                placeholder="Ex: 224697"
                class="form-control">
                <p class="text-danger" *ngIf="!reg.valid && reg.touched">Roll Should have at least 6 letter</p>
              </div>
              <input 
              type="submit"
              value="Search" 
              class="btn btn-block btn-outline-success">
          </form>
      </div>
  </div>

The array

I want to search for the roll in this array and if I find a match then I would like to return the whole array and use it somewhere.

Now how can I do that?

I think I made a mistake before so I edit the question. Please forgive me I'm new here.

3

There are 3 best solutions below

7
On
export class ResultComponent {
    students: AdmissionFormData[]

    constructor(private adStudent: AdmissionFormService) {
        adStudent.adFormGet().subscribe(
            x => this.students = x
        )
    }

    onSubmit(value):AdmissionFormData[] {
     return this.students.filter(student => student.reg === value)
    }
}

I see on your first two objects that they have the same reg number. If you need to return just one Object you have to use find, because filter will return all the matches. I also specified the return type because it's good practice.

onSubmit(value):AdmissionFormData[] {
   return this.students.find(student => student.reg === value)
}

UPDATE

My code works for what you asked for, filtering. I have created a stackblitz with your forms using fake data and I get to filter the array. One of you issues why my code wasn't working is because you are passing a Object not a String, but I didn't know that because you didn't have an HTML. Take a look to my https://stackblitz.com/edit/angular-nt2ksu and see how I handle that

1
On

You can use array.filter with the property you want to filter, since you have not mentioned the property, assuming it as fullname

this.students = this.students.filter(t=>t.fullname ===roll)[0];

or if you want single Object, use array.find

let studentObj =  this.students.find(t=>t.fullname ===roll);
10
On

return this.students.filter(s => s.reg === value)

Here, s is a student object, and you are filtering objects that have their reg values match the value of onSubmit(value).

This will return an array of objects with specified reg values.