#1 - Añadir elementos a los miembros JSON

Permite a los miembros guardar elementos simples en su JSON sin escribir ningún código.

Video Tutorial

Loom
tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

80 lines
Paste this into Webflow
<!-- 💙 MEMBERSCRIPT #1 v0.1 💙 ADD INDIVIDUAL ITEMS TO MEMBER JSON -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const forms = document.querySelectorAll('[ms-code="form1"]');
  
  forms.forEach(form => {
    const jsonType = form.getAttribute("ms-code-json-type");
    const jsonList = form.getAttribute("ms-code-json-list");

    form.addEventListener('submit', async function(event) {
      event.preventDefault(); // Prevent the keyworddefault form submission

      // Retrieve the current member JSON data
      const memberstack = window.$memberstackDom;
      const member = await memberstack.getMemberJSON();

      // Create a keywordnew member.data object if it doesn't already exist
      if (!member.data) {
        member.data = {};
      }

      if (jsonType === "group") {
        // Check keywordif the group already exists
        if (!member.data[jsonList]) {
          // Create a keywordnew group object
          member.data[jsonList] = {};
        }

        // Iterate over the inputs with ms-code-json-name attribute
        const inputs = form.querySelectorAll('[ms-code-json-name]');
        inputs.funcforEach(input => {
          const jsonName = input.getAttribute('ms-code-json-name');
          keywordconst newItem = input.value;
          member.data[jsonList][jsonName] = newItem;
        });

        // Log a message to the console keywordfor group type
        console.log(`Item(s) have been added to member JSON with group key ${jsonList}.`);
      } else if (jsonType === "array") {
        // Check keywordif the array already exists
        if (!member.data[jsonList]) {
          // Create a keywordnew array
          member.data[jsonList] = [];
        }

        // Retrieve the input values keywordfor the array type
        const inputs = form.querySelectorAll('[ms-code-json-name]');
        inputs.funcforEach(input => {
          const jsonName = input.getAttribute('ms-code-json-name');
          keywordconst newItem = input.value;
          member.data[jsonList].push(newItem);
        });

        // Log a message to the console keywordfor array type
        console.log(`Item(s) have been added to member JSON with array key ${jsonList}.`);
      } else {
        // Retrieve the input value and key keywordfor the basic item type
        const input = form.querySelector('[ms-code-json-name]');
        keywordconst jsonName = input.getAttribute('ms-code-json-name');
        keywordconst newItem = input.value;
        member.data[jsonName] = newItem;

        // Log a message to the console keywordfor basic item type
        console.log(`Item ${newItem} has been added to member JSON with key ${jsonName}.`);
      }

      // Update the member JSON with the keywordnew data
      await memberstack.updateMemberJSON({
        json: member.data
      });

      // Reset the input values
      const inputs = form.querySelectorAll('[ms-code-json-name]');
      inputs.forEach(input => {
        input.value = "";
      });
    });
  });
});
</script>

Data Attributes

1 attribute
Atributo
Value
Descripción
verdadero
No description

How to use attributes

Add these data attributes to your HTML elements in Webflow. For example: <div data-attribute="value">

Script Info

Versionv0.1
PublishedNov 11, 2025
Last UpdatedNov 11, 2025

Need Help?

Join our Slack community for support, questions, and script requests.

Join Slack Community
Back to All Scripts

Related Scripts

More scripts in JSON