CODEWITHSUNDEEP
angular
EduBw
EduBw

Reputation: 942

How to get object in Angular5?

I have a problem with getting an Array in Angular. It only works if I click the button twice to get the Array. I need to get the data in 1 click (see Img at the end of the page).

@Injectable()
export class ConexionPersonService {

_people: Person[];

constructor(
    private http: HttpClient,
) { }

public getPeople(): void {

    const url = 'assets/Json/listPerson.json'; 
    this.http.get<Person[]>(url).subscribe(data => {this._people = data});
    console.log('ANTESobtenido ' , this._people);
}

public getPerson(id:number): Person{

    console.log('ID ' , id);

    if(this._people) {
        var per = this._people.find(person => person.id_user == id);
        console.log('obtenido ' , per);
        return this._people.find(person => person.id_user == id);
    }
}


}

export class DetailUserComponent implements OnInit {

    detailPerson: Person;
    People:Person[];
    @Input() id;
    that;

    constructor(
        private route: ActivatedRoute,
        private conexion: ConexionPersonService) { }

    ngOnInit() {
        this.id = +this.route.snapshot.paramMap.get('id');
        this.conexion.getPeople();
        this.getPerson();
    }


    getPerson(): void {

        this.detailPerson = this.conexion.getPerson(this.id);   

     }

So the problem is that the first time it does not work, but after that it does work.

Img

Upvotes: 1

Views: 77

Answers (2)

NitinSingh
NitinSingh

Reputation: 2068

By the time you retrieve the list of people (async), the code to get a specific person has already been executed and returning null.

So.. Either you update the code for specific person in the subscribe handler of people list or let the people retrieval happen on ngOnInit and person retrieval to happen on button click or ngAfterViewInit().

Ideally the people list retrieval should happen in service's own initialization (better) or the specific person search can be done via chaining the two requests directly (get people list from http and in success handler, search for the id); although it will repeat the http call (hence not so desired).

Upvotes: 0

Anshuman Jaiswal
Anshuman Jaiswal

Reputation: 5462

Implementation is not correct, it could be more simpler have a look on following solution:

service

export class DetailUserComponent implements OnInit { 
    detailPerson: Person;
    @Input() id;

    constructor(private service: ConexionPersonService) {}

    ngOnInit() {
        this.id = +this.route.snapshot.paramMap.get('id');
    }

    ngAfterViewInit() {
        this.getPerson();
    }

    getPerson(): void {  
        this.detailPerson = this.conexion.getPerson(this.id);      
    } 
}

service

@Injectable()
export class ConexionPersonService {
    _people: Person[];

    constructor(
        private http: HttpClient,
    ) { 
        this.getPeople();
    }

    public getPeople() {

        const url = 'assets/Json/listPerson.json';
        this.http.get<Person[]>(url).subscribe(data => this._people = data);
    }

    public getPerson(id:number): Person {

        if(this._people) {
            return this._people.find(person => person.id_user = id);
        }
    }
}

Upvotes: 1

Related Questions