Using Member JSON Data with Memberstack's DOM Package

This article is your guide to harnessing the power of Member JSON using the Memberstack DOM Package and includes real-world examples that you can apply instantly.

If you have development experience and are looking for advanced code example please read this article: Advanced JSON Data Usage With The Memberstack Dom Package.

View the full DOM Package Website for more additional guidance. 

Understanding Member JSON Data

Before we dive into manipulation, let's understand what member JSON data looks like. JSON data for a member might look something like this:

{
  "data": {
    "username": "josh",
    "location": {
      "city": "Butte",
      "state": "Montana"
    },
    "skills": ["graphql", "react", "tailwindcss"]
  }
}

This JSON data tells us that our member 'Josh' is based in Butte, Montana, and has skills in GraphQL, React, and Tailwind CSS. Pretty neat, right?

Getting Your Hands on Member JSON Data

The first step in manipulating member data is retrieving the current member's JSON data. The `getMemberJSON` function of the DOM Package is designed specifically for this purpose. Here's how you can use it:

await window.$memberstackDom.getMemberJSON();

Remember, this function is asynchronous and returns a Promise that resolves to the JSON data of the currently logged-in member.

Time for Some Action: Updating and Removing Member JSON Data

Now that we have the member's JSON data, let's manipulate it! You can modify this data as per your needs and then save the changes back to the member's data using the `updateMemberJSON` function. Here's a sneak peek into this process:

// Get current member's JSON 
let memberJson = await window.$memberstackDom.getMemberJSON();

// Modify or add new data 
memberJson.avatarURL = "https://www.media.com/buckets/josh/avatar.jpg";

// Remove data 
delete memberJson.skills;

// Update member's JSON 
await window.$memberstackDom.updateMemberJSON({json: memberJson});

In this example, we add an `avatarURL` field to the member's JSON data and remove the `skills` field. The `delete` keyword permanently removes the `skills` field from the member's JSON data, so tread carefully here!

Let's Put It All Together: Full Example Code

Now that we've seen bits and pieces, let's look at how these functions come together in a full-fledged script tag within Webflow:

<script>
document.addEventListener("DOMContentLoaded", async function() {
  // shortens reference to Memberstack
  const memberstack = window.$memberstackDom;

  memberstack.getCurrentMember().then(async ({ data: member }) => {
    // if the member is logged in
    if(member) {
      // Get current member's JSON 
      let memberJson = await memberstack.getMemberJSON();
    
      // Modify or add new data 
      memberJson.avatarURL = "https://www.media.com/buckets/josh/avatar.jpg";
    
      // Remove data 
      delete memberJson.skills;
    
      // Update member's JSON 
      await memberstack.updateMemberJSON({json: memberJson});
    
      // Log the updated JSON data
      console.log(await memberstack.getMemberJSON());
    }
  })
});
</script>

The code above ensures that it waits for the page to load before it starts manipulating the data. This is crucial to ensure `window.$memberstackDom` is available. If a member is logged in, the script gets the member's JSON, updates it, and saves it. Voila!

Displaying Member JSON Data on the Page

Now that we've retrieved and manipulated the member's JSON data, let's display it on the page. We'll be using a custom data attribute, `ms-data-json`, to show the JSON data. This attribute allows you to specify a key from the JSON data, and the corresponding value will be displayed in the HTML element with this attribute.

For instance, if you want to display the username of the member, you can use the `ms-data-json` attribute like this:

<div ms-data-json="username"></div>

Now let's create a function to populate the page with our member data.

<script>
document.addEventListener("DOMContentLoaded", async function() {
  // shortens reference to Memberstack
  const memberstack = window.$memberstackDom;

  memberstack.getCurrentMember().then(async ({ data: member }) => {
    // if the member is logged in
    if(member) {
      // Get current member's JSON 
      let memberJson = await memberstack.getMemberJSON();
      
      // Find all elements with the ms-data-json attribute
      const dataElements = document.querySelectorAll('[ms-data-json]');
      
      // Loop through the elements and add the member data
      dataElements.forEach(el => {
        // Get the key from the attribute
        const key = el.getAttribute('ms-data-json'); 
        
        // Check if the member data has this key
        if (memberJson.hasOwnProperty(key)) { 
          // Add the corresponding member data to the element
          el.innerText = memberJson[key]; 
        }
      });
    }
  })
});
</script>

The above script will fetch all elements with the `ms-data-json` attribute and populate them with the corresponding member data. This way, you can easily display different pieces of member data across your site.

Conclusion

Memberstack's DOM Package is your companion for efficient and convenient manipulation of member JSON data on your Webflow site. With the power to retrieve, modify, and save member JSON data, you can maintain precise and up-to-date member profiles. Remember to handle member data with the utmost care, keeping privacy and security in mind.

Need more information or detailed documentation on Memberstack's DOM Package? Head over to the DOM Package Documentation.