Storing multiple objects from observable into a class in Angular2

Question

I'm having a bit of a trouble right now in my Angular2 app. I've retrieved multiple objects from my service, thus i want to store each of them to their own class.

I know how to put an object to a class, however how to work it out if there are multiple objects?

My object

[
  {
    "_key": "2343200",
    "_id": "test/2343200",
    "_rev": "_U9JHQXa---",
    "age": 10,
    "name": "Soy"
  },
  {
    "_key": "2342008",
    "_id": "test/2342008",
    "_rev": "_U9JGn0----",
    "age": 20,
    "name": "John"
  },
  {
    "_key": "2342955",
    "_id": "test/2342955",
    "_rev": "_U9JG46u---",
    "age": 32,
    "name": "Jane"
  }
]

Below is my class.

UserDetails.ts

export class UserDetails {
    key: string;
    id: string;
    name: string;
    age: number;
}

Using foreach() could be the solution, but how to access each data if i want to manipulate them?

For example, i want to access the class of the second data.

Any kind of help is appreciated! I thank you in advance.

Edited: im using my apiservice to retrieve my datas.

data: any;

this.apiService.getUsers().subscribe(users=> {
            this.data = users;
        })

Answer 1

How about:

let jsonArray: IUserDetails[] = [
    ....
];

interface IUserDetails {
    _key: string;
    _id: string;
    _rev: string;
    name: string;
    age: number;
}

class UserDetails {
    key: string;
    id: string;
    name: string;
    age: number;

    constructor(data: IUserDetails) {
        this.key = data._key;
        this.id = data._id;
        this.name = data.name;
        this.age = data.age;
    }
}

const instances: UserDetails[] = jsonArray.map(obj => new UserDetails(obj));
console.log(instances[1]); // UserDetails {key: "2342008", id: "test/2342008", name: "John", age: 20}

(code in playground)

---

Edit

Based on your comment and the edit you made to your question, you need to do the same inside the subscribe handler:

data: UserDetails[];

this.apiService.getUsers().subscribe(users => {
    this.data = users.map(obj => new UserDetails(obj));
})

Answer 2

Use interfaces instead, I see no need for class here :) Whats the difference between "declare class" and "interface" in TypeScript

export interface UserDetails {
    key: string;
    id: string;
    age: number;
    name: string;
}

And when you receive your data, just type it to your interface, in your service you could return an Observable of UserDetails array, and in your component you can have the array of type UserDetails:

data: UserDetails[];

this.apiService.getUsers().subscribe(users=> {
    this.data = users;
})

For example, i want to access the class of the second data. Using foreach() could be the solution, but how to access each data if i want to manipulate them?

Yes you can use forEach if you need to manipulate your data somehow. Do that inside the callback (subscribe), why you need to do that, is because this is asynchronous. More explanation here: How do I return the response from an Observable/http/async call in angular2?

this.apiService.getUsers().subscribe(users=> {
    this.data = users;
    this.data.forEach(user => {
       console.log(user) 
       // do something!
    })
})

---

Edit:

We got some more information and you need a boolean value to your UserDetails to toggle the status of the user, and you want to send the id and status to the backend when this happens.

So first off, add a boolean to your interface, let's call it "status". So add the following property to status: boolean to your interface. Since you api don't seem to give a status value, let's iterate each item and add that property in the callback:

.subscribe(data => {
  this.data = data;
  this.data.forEach(x => {
    // set initial value to true or false, depending what you want
    x.status = true; 
  });
})

Then iterate the users in your template, here I have done it like the following (shortened code). You need to adjust your code accordingly, I see from picture you're using (or want to use) on/off slider :)

<table>
  <tr *ngFor="let user of data">
    <td>{{user.name}}</td>
    <td>{{user.status}}</td>
    <td><button (click)="toggleStatus(user)">Toggle Status</button></td>
  </tr>
</table>

And then your toggleStatus:

toggleStatus(user: UserDetails) {
  user.status = !user.status

  // modify to your actual code
  this.service.sendUser(user.id, user.status)
    .subscribe(....)   
}

Demo