Http Get- Gat an object from web api

Question

I am trying to get a list of objects from web api. This is the server code:

public IQueryable<PersonViewModel> GetPeople()
{
    var People = from p in db.People
                select new PersonViewModel()
                {
                    Id = p.Id,
                    FirstName = p.FirstName,
                    LastName = p.LastName,
                    IdentityNo = p.IdentityNo,
                    DateOfBirth = p.DateOfBirth
                };

    return People;

}

[Route("api/Person/GetPersonById/{value?}")]
public IQueryable<PersonViewModel> GetPersonById(string value = "")
{
    if (value != null)
    {
        var a= GetPeople().Where(x => x.IdentityNo.StartsWith(value));
        return a;
    }
    else return GetPeople();

}

Person Model:

public class PersonViewModel
{
    public PersonViewModel()
    {

    }
    public PersonViewModel(Person p)
    {
        Id = p.Id;
        FirstName = p.FirstName;
        LastName= p.LastName;
        IdentityNo = p.IdentityNo;
        DateOfBirth = p.DateOfBirth;
    }
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string IdentityNo { get; set; }
    public Nullable<System.DateTime> DateOfBirth { get; set; }
}

Client side code: This is model:

export class Person  {
    Id:string;
    FirstName :string;
    LastName:string;
    IdentityNo:string;
    DateOfBirth:Date;
}

I had a service which is containing a list of Person type, and a function which trying to get the data from the server.

PersonIdList: Person[];

getPersonById(uri: string){
    this.http.get('http://localhost:58527/api/Person/GetPersonById/' + uri)
        .map((data: Response) => {
            return data.json() as Person[];
        }).toPromise().then(x => { this.PersonIdList = x; })
}

But I don't get any results in the list, when debugging PersonIdList is undefined. The error message:

ReferenceError: PersonIdList is not defined at eval (eval at PersonService.getPersonById(webpack-internal:///./src/app/Shared/person.service.ts), :1:1) at PersonService.getPersonById(webpack-internal:///./src/app/Shared/person.service.ts:26:5) at MainComponent.onSubmit (webpack-internal:///./src/app/pages/main/main.component.ts:58:28) at Object.eval [as handleEvent] (ng:///AppModule/MainComponent.ngfactory.js:387:31)↵ at handleEvent (webpack-internal:///./node_modules/@angular/core/esm5/core.js:13805:155)↵ at callWithDebugContext (webpack-internal:///./node_modules/@angular/core/esm5/core.js:15314:42)↵ at Object.debugHandleEvent [as handleEvent] (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14901:12)↵ at dispatchEvent (webpack-internal:///./node_modules/@angular/core/esm5/core.js:10220:25)↵ at eval (webpack-internal:///./node_modules/@angular/core/esm5/core.js:10845:38)↵ at HTMLButtonElement.eval (webpack-internal:///./node_modules/@angular/platform-browser/esm5/platform-browser.js:2680:53)

Is server responding with the correct JSON response? Can you post the entire service code as well? — planet_hunter
What happens if you remove return from map? Looking at this example: angular-2-training-book.rangle.io/handout/http/… they didn't use return there. — penleychan

Avinash Maurya Avinash Maurya · Accepted Answer · 2018-06-26T23:24:08

it seems this is related to referencing, can you try with persisting 'this' reference, like this let _this = this;

function getPersonById(uri) {
let _this = this;
this.http.get('http://localhost:58527/api/Person/GetPersonById/' + uri)
    .map(function (data) {
    return data.json();
}).toPromise().then(function (x) { _this.PersonIdList = x; });

}

Http Get- Gat an object from web api

1 Answers