How to assign badges with a button click

I do not know if it will help you, but here an excerpt of my own …

export async function get_AllContactsData() {
  const options = {"suppressAuth": true};
  let userData=[],  contactsBlocked=[], contactsActive=[], contactsHidden=[];
  let contactsDATA = await contacts.queryContacts().find(options);                                console.log("Contacts-Data: ", contactsDATA);
  //---------------------------------------------------------------------
  for (let i = 0; i < contactsDATA.length; i++) {
    try{                                                                                        //console.log("Contacts-Info: ", contactsDATA.items[i].info)
      let dataObject = await {
        "_id":              contactsDATA.items[i]._id,
        "userRevision":     contactsDATA.items[i].revision,
        "userFirstname":    contactsDATA.items[i].info.name.first,
        "userLastname":     contactsDATA.items[i].info.name.last,
        "userPicture":      contactsDATA.items[i].info.picture.image,
        "userEmail":        contactsDATA.items[i].primaryInfo.email,
        "userCountryLong":  contactsDATA.items[i].info.addresses[0].address.formatted,
        "userCountryShort": contactsDATA.items[i].info.addresses[0].address.country,
        "userRole":         "ROLE",
        "userBlockStatus":  contactsDATA.items[i].info.extendedFields["members.membershipStatus"],
        "userRegistration": contactsDATA.items[i]._createdDate        
      };
      await userData.push(dataObject);                                                            console.log("Data-Object: ", dataObject);
      if(contactsDATA.items[i].info.extendedFields["members.membershipStatus"]==="DENIED") {
        contactsBlocked.push(dataObject);}
      else {contactsActive.push(dataObject);}
    } 
    catch{console.log(Error); contactsHidden.push(contactsDATA.items[i])
    }
  }
    //---------------------------------------------------------------------
  return {
    "contacts": userData, 
    "contactsDATA": contactsDATA,
    "contactsTotal": contactsDATA.items,
    "contactsActive": contactsActive,
    "contactsHidden": contactsHidden,
    "contactsBlocked": contactsBlocked,
  };
}
export async function generate_BadgeMemberlist(badgeID) {
  //INPUT ---> BADGE-ID / OUTPUT = MEMBER-LIST-ARRAY
  let badgeMemberlist=[], memberIDs = await badges.listMembers(badgeID);        //console.log("Member-IDs: ", memberIDs);
  let CONTACTS = await get_AllContactsData();                                   //console.log("CONTACTS: ", CONTACTS);
  for (let a = 0; a <memberIDs.length; a++) {
    const MemberID = memberIDs[a]; console.log("MemberID: ", MemberID)
    for (let b = 0; b < CONTACTS.contacts.length; b++) {
      const CONTACT = CONTACTS.contacts[b];                                    //console.log("CONTACT: ", CONTACT)                                                  
      if(CONTACT._id===MemberID){badgeMemberlist.push(CONTACT);}
    }
  }                                                                            //console.log("My RESULT-ARRAY: ", badgeMemberlist);
  return {
    "badgeMemberIDs": memberIDs,
    "badgeMembers": badgeMemberlist
  };
}

Have fun :wink: (normaly i do not provide my own complex written codes) → exception

And here you can see it working in action…

  1. Log-In (you can register or use one of the predefined logins)
  2. Navigate to → “Badges” after login. You will see the Badge-Generator…


3) Show the badge-overview by a click onto → “Show Badge-Overview”.
The Badge-Overview will open…


4) Click on one of the provided/saved/ existing badges in the list, the current selected badge will be loaded. Take for example → MASTER of DESASTER-Badge (sorry for the little literal :laughing:)
5) The current selected badge will be loaded in the Badge-Generator as PREVIEW.
6) Now click onto → “Membership” and see what happens :wink:

EDIT: Forgot to give you the LINK…:sweat_smile:

https://russian-dima.wixsite.com/login-system/vnbadgemgm

BTW: The → “Membership-Display” should show you the amount of related/associated USERS of selected BADGE…