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

Question

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.

As an aside: there's no such thing as a "JSON object".

nnnnnn
– nnnnnn

2017-03-23 02:46:50 +00:00
Commented Mar 23, 2017 at 2:46 — nnnnnn
– nnnnnn, Commented Mar 23, 2017 at 2:46

Diullei · Accepted Answer · 2017-03-23 03:00:26Z

4

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
    }
    //...
}

answered Mar 23, 2017 at 3:00

Diullei

12.5k2 gold badges30 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gauzy Over a year ago

That worked! Thanks a lot for your quick response, very much appreciated! Now need to figure out what that "interface" is and how it works! :D

Diullei Over a year ago

I'm glad to help you! On your employeeData object, the employees property is an array of objects with specific properties. We just create an interface to help our type definition. For more details about interfaces: typescriptlang.org/docs/handbook/interfaces.html

Gauzy Over a year ago

Aah...now I think I get it Diullei. Thanks for a quick to-the-point explanation and for the link, appreciated. I certainly need to learn more about TypeScript as language. Thanks!

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related