map() function throwing null error for response in Angular 6-CodePudding

I am trying to implement Angular 2 code in Angular 6 app and below is the code I am trying to implement.

Could you please tell me why it is throwing these 2 errors

EDIT

Here is the subscription for the above code snippet.

public query(state): void {  
    this.getEmployee(state)  
        .subscribe(x =>super.next(x));  
}

In the C# code, I am return the data and total as below...

if (resultList.Count > 0)
{
    var result = new
    {
        data = resultList.ToArray(),
        total= resultList[0].TotalRecords
    };
    var jsonData = JsonConvert.SerializeObject(result);
    return jsonData;
}

I get the below error when I implemented as you suggested @StepUp

CodePudding user response：

There is no need to call .json method. In addition, it is possible to use pipe method to compose operators. The code can look like this:

return this.http  
    .get(this.BASE_URL, { search: params })      
        pipe(
            map(response => (<GridDataResult>{  
               data: response.EmployeeList,  
               total: response.Count  
            })), catchError( error => {
            return throwError( 'Something went wrong!' )
       });
    )

If you want to map items from array, then it is necessary to call map method of array:

mapToPerson(): Observable<Address[]> {
    this.getPersons
        .pipe(
            map((persons: Person[]) => persons.map(person => 
               person.address)))
        )
}

UPDATE:

It is necessary to understand why it throws error. So we an debug and find the problem. Let's try to simplify your code:

private getEmployee(state: any): Observable<GridDataResult>{  
    let params = new URLSearchParams();  
    params.set('Skip', state.skip);  
    params.set('Take', state.take)  
    return this.http  
        .get(this.BASE_URL, { search: params })  
}

and then see in console what you've got in .subscribe method:

public query(state): void {  
    this.getEmployee(state)  
        .subscribe(yourResponse => console.log(yourResponse ));  
}

After error will be figured out, you can add code from the reply.

CodePudding user response：

I'm more used to Promises so here is my way of implementation with Promises :

private async getEmployee(state: any): Promise<GridDataResult> {  
  let params = new URLSearchParams();  
  params.set('Skip', state.skip);  
  params.set('Take', state.take);
  const dataJson = await this.http.get(this.BASE_URL, { search: params }).toPromise();

  // Don't forget to check if dataJson is null, otherwise dataJson.EmployeeList will throw
  // EDIT
  const dataGridResult: GridDataResult = {
        data: dataJson.EmployeeList,  
        total: dataJson.Count  
  }

  return dataGridResult;
  
 }   

public async query(state): Promise<void> {  
    const dataGridResult:GridDataResult = await this.getEmployee(state);  
    super.next(dataGridResult);
}