Add value from Array to other array

Question

Component

export class AllUserComponent implements OnInit {
  //Here is saving all users from database
  allUsers: Array<Object>;
  roleName: any[] = []; //here I want roles property from each object from allUsers

  constructor(private userService: UserService) {}

  ngOnInit() {
    //Take from UserService getAll method and subscribe to add all users from database
    this.userService.getAll().subscribe(data => {
      this.allUsers = data.allUsers;
      console.log(this.allUsers)
    });

  }

Service

  getAll(): Observable<AllUsers> {
    return this.http.get<AllUsers>(this.url);
  }

Model

export interface AllUsers{
    allUsers: string[];
}

I want to get roles which are nested values in each object of allUser array and add it to roleName array and display in Roles column in table in HTML view.

this question actually has nothing to do with angular, it is just JavaScript. — AVJT82
– AVJT82, Commented Sep 19, 2019 at 11:21
Please show us what you tried as the mentioned example is all about fetching data. — Sagar Khatri
– Sagar Khatri, Commented Sep 19, 2019 at 11:22

simon · Accepted Answer · 2019-09-19 11:24:14Z

0

try like this:

this.allUsers.forEch(user => {
  user.roleNames.push(user.roles);
})

answered Sep 19, 2019 at 11:24

simon

1,48510 silver badges20 bronze badges

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

Comments

MoxxiManagarm · Accepted Answer · 2019-09-19 12:04:02Z

0

Lets's change that string array first

export interface AllUsers{
    allUsers: User[]; // shouldn't be a string array?!
}

Add the user

export interface User {
  id: number;
  firstName: string;
  lastName: string; 
  email: string;
  password: string;
  roles: Role[];
}

And Role

export interface Role {
  id: number;
  name: string
}

Try to avoid using subscribe, use async pipe instead. You could use lodash to handle your arrays.

export class AllUserComponent implements OnInit {
  allUsers$: Observable<User[]>;
  distinctRoles$: Observable<Role[]>;

  constructor(private userService: UserService) {}

  ngOnInit() {
    // Take from UserService getAll method
    this.allUsers$ = this.userService.getAll().pipe(
      map((all: AllUsers) => all.allUsers),
    );

    // map the roles
    this.distinctRoles$ = this.allUsers$.pipe(
      map((allUsers: User[]) => _.flatMap(allUsers, 'roles')), // import * as _ from 'lodash'
      map((allRoles: Role[][]) => _.flatten(allRoles)),
      map((allRoles: Role[]) => _.uniq(allRoles)), // remove the line if you don't want disctinct
    );
  }

And "subscribe" to your Observables in your template with async pipe

<div *ngFor="let role of disctictRoles$ | async">

edited Sep 19, 2019 at 12:04

answered Sep 19, 2019 at 11:58

MoxxiManagarm

9,2214 gold badges20 silver badges51 bronze badges

1 Comment

Błażej Witczak Over a year ago

In this solution allUsers show users from database, but the problem is in display roles to appropriate user, because all roles in disctictRoles display in each row :/ ibb.co/wYCwGVK here is photo how it display

Nimer Awad · Accepted Answer · 2019-09-19 11:37:12Z

-1

As i understood; you need to show user roles besides its details, is that true?

I think you are using matTable or at least *ngFor; so you need to add a function to get appropriate roles; like:

getRoles(user: Object) {
    return user.roles.reduce((str, role) => {
        // add role name if this is the first role; else add role to string then return it    
        return str? str += ', ' + role.name: role.name;
    }, '');
}

It's not necessary to use reduce function; you can use temporary variable with an ordinary loop; but this is cleaner way.

Then from HTML you can call it in roles td; like:

<tr *ngFor="let user of allUsers">
    <!-- previous details-->
    <td> {{getRoles(user)}} </td>
</tr>

1 Comment

Nimer Awad Over a year ago

Thank you; he can move that function to a pipe.

Collectives™ on Stack Overflow

Add value from Array to other array

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related