How to retrieve user and groups from sharepoint online using SPFX Webpart

Question

I have to retrieve all users and groups from sharepoint online site,it should be displayed in spfx webpart in below format.Provide me any code examples in React JS.

UserName GroupName user1 Approver

user2 Visitors

user3 visitors Editors

For all users this information has to display, whether the user is not part of the group also he can see who are all present in other group. Sharepoint server side code we can achieve this with Runwithelevatedprivileges. how we can achieve this using spfx webpart ?

Answer 1

You could use pnp.js in spfx.

Sample code:

import * as React from 'react';
import styles from './GetlistitemsReact.module.scss';
import { IGetlistitemsReactProps } from './IGetlistitemsReactProps';
import pnp, { Web } from 'sp-pnp-js'
import { escape } from '@microsoft/sp-lodash-subset';
import { ClassCustomer, User } from './ClassCustomer';
import {ISPListCustomerItem} from './ICustomers'
import $ from "jquery";


export default class GetlistitemsReact extends React.Component<IGetlistitemsReactProps, any> {

  public constructor(props:IGetlistitemsReactProps,any)
  {
    super(props);
    this.state={
      items:[],
      users:[]
    }
  }
  public render(): React.ReactElement<IGetlistitemsReactProps> {
    return (
      <div className={ styles.getlistitemsReact }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
            <div className={ "ms-Grid" }>
            <div className={ "ms-Grid-row" }>
             {
               this.state.users.map((user) =>{
                return <div>
               <span>{user.name}</span>+++++<span>{user.group}</span><br/>
               <br/>
               </div>
               })

             }
            </div>
            </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
  public componentDidMount()
  {
    this._getListCustomerData();
  }

  private  async _getListCustomerData():Promise<void>
  {    

    let items;
    let web = new Web(this.props.context.pageContext.web.absoluteUrl);
    await web.siteGroups.get().then
      ((response)=>{
        items=response.map(item=>{
          return new ClassCustomer(item)});
        this.setState({items});
      }

      )
      let users:Array<User> =[];
      items.forEach(element => {
        web.siteGroups.getByName(element.LoginName).users.get().then((response)=>{
          response.map(item=>{

            let user=new User(item.Title,element.LoginName);

            users.unshift(user)
          })
          this.setState({users});
        })                  
      });

  }

}

Test result:

I did not deduplicate the users array, if you need to deduplicate, you need to write it by yourself.

Updated:

IGetlistitemsReactProps.ts

import { WebPartContext } from "@microsoft/sp-webpart-base";
export interface IGetlistitemsReactProps {
  description: string;
  context:WebPartContext;
}

ClassCustomer.ts

import { ISPListCustomerItem } from "./ICustomers";

export class  ClassCustomer{
    public LoginName:string;


    constructor(item: ISPListCustomerItem) {
      this.LoginName = item.LoginName;


  }
}

export class  User{
public name:string;
public group:string;

constructor(name: string,group:string) {
  this.name = name;
 this.group=group;

}
}