Create a contact with multiple labels using user inputs

Ask the community
, , , , ,
1

Question: How to create a contact with multiple labels, using user inputs (with code)
Background: I already have working code to create a contact with 1 predefined label. I want it to instead create with multiple labels based on user inputs. I’m a rookie coder.

User input elements

Current working code: 
//web.js backend code:
import { contacts, labels } from "@wix/crm";
import { auth } from "@wix/essentials";
import { webMethod, Permissions } from 'wix-web-module';

export const createNewContact = webMethod(Permissions.Anyone, async (contactData) => {
    try {
        const { firstName, emails, labelDisplayName } = contactData;
        // Elevate permissions for CRM operations
        const elevatedFindOrCreateLabel = auth.elevate(labels.findOrCreateLabel);
        const elevatedCreateContact = auth.elevate(contacts.createContact);
        // 1. Find or create the label
        const labelResult = await elevatedFindOrCreateLabel(labelDisplayName);
        const labelKey = labelResult.label.key;    
        
        const contactInfo = {
            name: {first: firstName},
            emails: {
                items: [{email: emails}]
            },
            labelKeys: {
            items: [labelKey]
            }
        };  
        const newContact = await elevatedCreateContact(contactInfo);
        return newContact;
    } catch (error) {
        console.error('Error creating contact:', error);
        throw new Error('Failed to create contact.');
    }
});

//frontend code
import wixData from 'wix-data';
import { authentication } from 'wix-members';
import { createNewContact } from "backend/contacts.web.js";
$w.onReady(async function () {

  let selections = [];
  const populateRepeater = () => {
      $w("#selectionsRepeater").data = selections.map((selection) => ({ selection, _id: Math.floor(Math.random() * 1000000).toString() }))
  }
  $w("#selectionsRepeater").onItemReady(($item, itemData) => {
      $item("#selection").text = itemData.selection;
  })

  $w("#multiSelectDropdown").onChange((event) => {
      const selection = event.target.value;
      //option = {label: "example", value: "example"}
      $w("#multiSelectDropdown").options = $w("#multiSelectDropdown").options.filter((option) => option.value !== selection);
      $w("#multiSelectDropdown").value = null;
      selections.push(selection);
      populateRepeater();
      $w("#selectionsRepeater").expand();
  })

  $w("#submitButton").onClick(async () => {
      const firstName = $w('#input12').value;
      const emails = $w('#input13').value;
      const labelName = "Level1";
      const newContact = await createNewContact({
        firstName, emails, labelDisplayName: labelName
      }); 
  });  
});

Stuck with: I haven’t gotten it to create with multiple labels even predefined in code, like;

const labelName = ["Level1", "Level2"] ;

Attempts: Tried basic manipulations including;

            labelKeys: {
            items: labelKey
            }

instead of

            labelKeys: {
            items: [labelKey]
            }

Hope someone can show how to fix this. Many thanks​:folded_hands:

This task is a continuation of this broader topic Create or Append a Contact with code