Angular 2 TypeScript cara menemukan elemen di Array

131

Saya memiliki Komponen dan Layanan:

Komponen:

export class WebUserProfileViewComponent {
    persons: Person [];
    personId: number;
    constructor( params: RouteParams, private personService: PersonService) {
          
        
           this.personId = params.get('id');
           this.persons =  this. personService.getPersons();
           console.log(this.personId);  
        }
}

Layanan:

@Injectable()
export class PersonService {
      getPersons(){
        var persons: Person[] = [
            {id: 1, firstName:'Hans', lastName:'Mustermann', email: '[email protected]', company:'Test', country:'DE'},
            {id: 2, firstName:'Muster', lastName:'Mustermann', email: '[email protected]', company:'test', country:'DE'},
            {id:3, firstName:'Thomas', lastName:'Mustermann', email: '[email protected]', company:'test', country:'DE'}
        ];
          
        return persons;
      }
}

Saya ingin mendapatkan Item Orang dengan Id ('personID'). PersonID yang saya dapatkan dari Routeparam. Untuk itu saya membutuhkan foreach loop? Tetapi saya belum menemukan solusi untuk ini.

perangkap
sumber
11
Anda dapat menemukan elemen dengan Id seperti orang ini. Temukan (person => person.id === personId)
tstellfe

Jawaban:

255

Anda perlu menggunakan metode Array.filter:

this.persons =  this.personService.getPersons().filter(x => x.id == this.personId)[0];

atau Array.find

this.persons =  this.personService.getPersons().find(x => x.id == this.personId);
Andrei Zhytkevich
sumber
2
@SaravananNandhan, metode this.personService.getPersons()kembaliundefined
Andrei Zhytkevich
4
@AndreiZhytkevich haruskah kita menggunakan tiga sama dengan?
antonioplacerda
@antonioplacerda, ya, itu sudah cukup. Namun, untuk pertanyaan ini tidak terlalu penting.
Andrei Zhytkevich
1
Pada awalnya kode itu tampak samar bagi saya, tetapi mungkin membantu membaca "find (x => x.id == this.personId" sebagai "find x, di mana x id sama dengan id orang ini" Saya tidak tahu tentang yang lain orang, tapi bagi saya ini jauh lebih mudah diingat.
Rizki Hadiaturrasyid
69

Asumsikan saya memiliki array di bawah ini:

Skins[
    {Id: 1, Name: "oily skin"}, 
    {Id: 2, Name: "dry skin"}
];

Jika kami ingin mendapatkan item dengan Id = 1dan Name = "oily skin", Kami akan mencoba seperti di bawah ini:

var skinName = skins.find(x=>x.Id == "1").Name;

Hasilnya akan mengembalikan skinName tersebut menjadi "Kulit berminyak".

Silakan coba, Terima kasih dan salam terbaik!

masukkan deskripsi gambar di sini

Hai Dinh
sumber
4
Terima kasih atas cuplikan kode ini, yang mungkin memberikan beberapa bantuan jangka pendek terbatas. Penjelasan yang tepat akan sangat meningkatkan nilai jangka panjangnya dengan menunjukkan mengapa ini adalah solusi yang baik untuk masalah tersebut, dan akan membuatnya lebih berguna bagi pembaca di masa mendatang dengan pertanyaan serupa lainnya. Mohon edit jawaban Anda untuk menambahkan penjelasan, termasuk asumsi yang Anda buat.
Toby Speight
1
Bagaimana Anda melakukan ini untuk array yang awalnya kosong kemudian diisi secara dinamis ... sepertinya ada masalah saat mengkompilasi .... properti misalnya Id menjadi tidak diketahui.
rey_coder
Halo @rey_coder, saya pikir kita harus memeriksa apakah array tidak null sebelum kita menerapkan untuk mendapatkan item elemen array. Seperti: testArray = []; testArrayItem = testArray.length> 0? testArray.find (x => x.Id == 1) .Name: 'testArray null'; console.log (testArrayItem);
Hai Dinh
1
Hai @ hai-dinh, Itu menyelesaikan masalah. Terima kasih.
rey_coder
9

Ubah struktur data menjadi peta jika Anda sering menggunakan pencarian ini

mapPersons: Map<number, Person>;

// prepare the map - call once or when person array change
populateMap() : void {
    this.mapPersons = new Map();
    for (let o of this.personService.getPersons()) this.mapPersons.set(o.id, o);
}
getPerson(id: number) : Person {
    return this.mapPersons.get(id);
}
rharari
sumber
8

Pilihan rapi yang belum disebutkan adalah menggunakan kombinasi .finddengan fungsi panah dan penghancuran. Ambil contoh ini dari MDN .

const inventory = [
  {name: 'apples', quantity: 2},
  {name: 'bananas', quantity: 0},
  {name: 'cherries', quantity: 5}
];

const result = inventory.find( ({ name }) => name === 'cherries' );

console.log(result) // { name: 'cherries', quantity: 5 }
Nathan Beck
sumber
4

Gunakan kode ini di layanan Anda:

return this.getReports(accessToken)
        .then(reports => reports.filter(report => report.id === id)[0]);
Anuj Shaubhari
sumber
1

Coba ini

          let val = this.SurveysList.filter(xi => {
        if (xi.id == parseInt(this.apiId ? '0' : this.apiId))
          return xi.Description;
      })

      console.log('Description : ', val );
ammad khan
sumber