CODEWITHSUNDEEP
javascriptjsonangulartypescriptionic2
Gauzy
Gauzy

Reputation: 771

Converting a JSON Object Array to Observable<string[]>

I am new to TypeScript and Angular 2, have been looking around for the whole day today but could not find anything in relation to what I am trying to achieve. Would appreciate if somebody could help by giving a solution or point in correct direction.

The structure of my code base is like:

-src
 -pages
  -employee
   -employee-page.html
   -employee-page.ts
 -service
  -employee-service.ts

"pages" folder under "src" has sub-folders for each UI like "employee". And in each of these sub-folders, I have a template HTML file (like employee-page.html) and the corresponding TypeScript file (like employee-page.ts).

The "service" folder contains all the service TypeScript files (like employee-service.ts) that will be called/invoked from the TS files from TS file within UI sub-folder (like src/pages/employee). This XXXX-service.ts file will, depending on the type of user (demo or real), will either send back the dummy data from the same class in case of demo user or will in turn call a REST API to get real data from server in case of real user.

In the employee-service.ts file, I have a JSON object with dummy data and the corresponding function as below:

employeeData = {
    "employees": [
        {
            "employeeName": "John Doe",
            "employeeId": 123456,
            "employeeDept": "Accounts",
            "employeeExp": 8
        },
        {
            "employeeName": "John Smith",
            "employeeId": 987654,
            "employeeDept": "Travel",
            "employeeExp": 12
        }
     ]
};

getEmployees(userInfo): Observable<string[]> {
    if(userInfo.name.toLowerCase() === 'demo_user') {
        return this.employeeData.employees;
    }
    else {
        return this.http.get(GET_EMPLOYEES_URL)
            .map((res:Response) => res.json())
            .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
    }
}

In my employee-page.ts, I am calling the employee-service.ts as below:

loadEmployees() {
    this.employeeService.getEmployees(userInfo)
        .subscribe(
            (results) => {
                this.employees = results;
            },
            (error) => {
                this.showError(error);
            }
        );
}

The problem I am facing:

In my employee-service.ts file, the following statement

return this.employeeData.employees;

in the "getEmployees()" function gives an error (compile time error) as below:

[ts]
Type '{ "employeeName": string; "employeeId": number; "employeeDept":    
string; "employeeExp": number...' is not assignable to type 
Observable<string[]>'.
Property '_isScalar' is missing in type '{ "employeeName": string; 
"employeeId": number; "employeeDept": string; "employeeExp": number...'.

However, in the same function, my REST API is returning the same data from server and it's working fine. I have hardcoded it in my REST service to test it out and it works this way.

I know I have to convert "this.employeeData.employees" to satisfy "Observable<string[]>" return type. But I am not able to figure out how.

Can somebody please help me figure this out?

Thanks.

Upvotes: 1

Views: 11045

Answers (1)

Diullei
Diullei

Reputation: 12414

Try this:

first create an interface for the employee object:

interface Employee {
    employeeName: string;
    employeeId: number;
    employeeDept: string;
    employeeExp: number;
}

now change your getEmployees(...) function like this:

function getEmployees(userInfo: any): Observable<Employee[]> { // <-- changed
    if(userInfo.name.toLowerCase() === 'demo_user') {
        return Observable.of(employeeData.employees); // <-- changed
    }
    //...
}

Upvotes: 4

Related Questions