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 ?

1 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)
  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>

  public componentDidMount()

  private  async _getListCustomerData():Promise<void>

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

      let users:Array<User> =[];
      items.forEach(element => {

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




Test result: enter image description here

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



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


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;

  • hi Amos what these file has ClassCustomer and ICustomers.Need to add new file ? ( import { ClassCustomer, User } from './ClassCustomer'; import {ISPListCustomerItem} from './ICustomers')
    – Elina
    Commented May 8, 2020 at 12:35
  • check the update
    – Amos
    Commented May 11, 2020 at 10:00
  • thank you Amos without that above files, i have made some changes in code,now its working.I am new to SPFX and React, to filter the username in array and display the user name only once with list of groups name user is present can you share any reference link.
    – Elina
    Commented May 11, 2020 at 11:37
  • hi this code will return all site,subsite users and groups.If i want to display the users in only site/subsite level how to achieve.
    – Elina
    Commented May 18, 2020 at 12:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.