Listing tags in a specific order

Ask the community
,
3

Here’s the Wix Velo code that iterates through a list and transforms each value into a label-value object suitable for tags:

export function transformListToTags(list) {
  // Check if input is a list
  if (!Array.isArray(list)) {
    console.error("Input must be a list of values.");
    return;
  }

  // Create an empty array to store the transformed objects
  const tags = [];

  // Loop through each value in the list
  for (const value of list) {
    // Create a new object with label and value properties (assuming value is a string)
    const tagObject = {
      label: value, // Set label to the current value
      value: value, // Set value to the current value (you can customize this)
    };

    // Add the object to the tags array
    tags.push(tagObject);
  }

  // Return the array of label-value objects
  return tags;
}

Explanation:

  1. transformListToTags Function: This function takes a list of values as input.
  2. Input Validation: It checks if the input is indeed a list using Array.isArray . If not, it logs an error and exits.
  3. Initializing Tags Array: An empty array named tags is created to store the transformed objects.
  4. Looping Through List: The code iterates through each value in the list using a for...of loop.
  5. Creating Tag Object: Inside the loop, a new object named tagObject is created with properties:
  • label : Set to the current value from the list.
  • value : Also set to the current value (you can customize this property to hold a different value).
  1. Adding to Tags Array: The tagObject is pushed into the tags array.
  2. Returning Transformed List: Finally, the function returns the tags array containing label-value objects.

How to Use:

  1. Copy and paste the code into your Velo module.
  2. Call the transformListToTags function, passing your list of values as input. For example:

const myList = ["Value 1", "Value 2", "Value 3"];
const tags = transformListToTags(myList);
console.log(tags); // Output: [{ label: "Value 1", value: "Value 1" }, ...]

This will log an array of objects with labels and values, ready to be used for your tags object. Remember to customize the value property within the tagObject if you need it to hold something different than the original value.

1 Like