Save items to each member’s JSON with attributes and show them back.
Where this fits
So far you’ve read member data and reacted to it. Now members write their own, with a form that saves to their member JSON.
By the end of this lesson you can
Save a single value to member JSON from a form input
Save to an array so members can keep adding items
Save a group of related fields as one nested item
Set it all up with ms-code attributes, no code edits
Heads up: Older 2023 video. The video says not to use this for member profiles, since Memberstack profile forms already handle those.
Lesson notes
How it works
What member JSON is and when to use it
Member JSON is a free-form JSON object stored on each member. Unlike a custom field, which holds one string, it can hold nested objects and lists, so it suits things like saved preferences, a list of favorites or a small group of related answers. Each member can store up to 1MB.
Your site reads and writes it from the browser with the Memberstack DOM package, using getMemberJSON() and updateMemberJSON(). That means members can change their own JSON, so keep it to non-sensitive data. For profile details like name and email, keep using Memberstack profile forms and custom fields.
How MemberScript #1 saves a form to member JSON
When a member submits a form marked with ms-code="form1", the script loads that member's current JSON, adds the new item and saves it back. The order matters: updateMemberJSON() replaces the whole object rather than merging, so the script always fetches first and merges, which keeps everything already stored. It then clears the inputs.
The form's ms-code-json-type attribute picks the shape. With no type, each input saves as a simple key and value at the top level, like "name": "Julian". With array, each submission is added to a list named by ms-code-json-list, so members can keep adding entries. With group, the inputs save together as one object under the ms-code-json-list name, like a profile with a first and last name inside.
Set up the three forms
Paste MemberScript #1 into the page's body code, then add attributes. You can have several of these forms on one page.
1Simple item: put ms-code="form1" on the form and ms-code-json-name="name" on the input. The value is the key you want, so use whatever fits, like twitter.
2Array: on the form add ms-code="form1", ms-code-json-type="array" and ms-code-json-list="friends". The input still needs the ms-code-json-name attribute so the script picks it up, but its value can stay blank.
3Group: on the form add ms-code="form1", ms-code-json-type="group" and ms-code-json-list="profile". Give each input its own key, like ms-code-json-name="first-name" and ms-code-json-name="last-name".
4Publish, submit each form as a test member and check the member's JSON in the dashboard.
Before you move on
0 of 5
Tick these off on your own site. Done with all of them? You’re ready for the next lesson.
Up next: Member JSON is great for small bits of data. Next, you’ll save Webflow form submissions to Data Tables, a proper database for when you need more.
Chapters
Common questions
What is the difference between member JSON and custom fields in Memberstack?
Custom fields are single string values you define for all members, like first name. Member JSON is one flexible object per member that can hold lists and nested data, up to 1MB.
Why did saving to member JSON delete my other data?
updateMemberJSON() replaces the whole object. Fetch the current JSON with getMemberJSON(), merge your change in, then save, which is what MemberScript #1 does for you.
Can members edit their own member JSON?
Yes. It can be read and written from the browser, so don't use it for anything a member shouldn't be able to change, and never use it to gate content.
Hey there Julian here and welcome to MemberScripts number one so what we want to do here is save items to the member JSON from a form input so all of this of course as is going to be throughout all of these resources you should not need to edit any of this code at all if you do it’ll probably just be something like one simple value and anyways let’s get into it so first of all let’s just take a look at how this actually functions so I’m signed in right now here on this test account and as we can see there is
0:31
absolutely nothing in my member JSON so let’s go ahead and first just for test sake save a full name so let’s do my name oh whatever it’s okay it doesn’t matter we can do anything let’s go ahead and save that thank you your submission has been received now let’s take a look over here and what we’ll be able to see is a console log just saying it’s been added to the JSON so now if we go here and refresh what we’ll be able to see and our JSON is our simple item was saved so with that now let’s take a look
1:04
at the second one so this is an array and the different here difference here is let’s just say list of friends let’s go John save item it’s been added and just for demonstration’s sake let’s just go ahead and refresh this and do it again um let’s go Josh there we go now if I go over here and refresh what we’re going to see is an array just like that saved it can be referenced with different scripts at a later date then let’s just go ahead and
1:34
try the final one so this is a group so this for example you could use to have one individual item with different properties so here let’s just say first name last name let’s save that now you’re not going to want to use this to do your profiles in Memberstack um this is just an example now let’s go ahead and refresh and what we’re going to see is this so profile last name first name so this is
2:06
one item with nested items within it so now that we have that let’s just go ahead and take a look at how do we actually set this up and it is super simple so the first thing that you’re going to want to do is go ahead and get this script itself from the site or of course from this demo project and just copy all of this over put it in your body tag on the page or the project if you’re using it throughout the site um but most likely the page so anyways save that and just forget about it the next thing that you’re going to need to
2:37
do is go to the form itself and add this attribute Ms Dash code equals form one one is standing for the number of MemberScript that this is so the easiest one is of course the simple item which is this one that we have over here and all we need to do for this to make it function after we add that attribute is go over here and then do Ms Dash code dash JSON-name equals name and how that’s going to actually show up is this we have name and then the name
3:09
that’s it add those attributes you’re good to go um of course the value of this should be whatever it is that you’re actually storing so maybe it’s a social profile whatever it may be this needs to stay the same MS code JSON name this is whatever makes sense for your use case now over here the next one we have is array just a reminder that looks like this and people can just save as many things as they want to this array so over here we’ve got that form one attribute applied as well you can have
3:41
as many as you want on the same page um then below here we have MS Dash code dash JSON-type and then we have array so this is just telling the script that we want to save it as an array and then here Ms code JSON list we are just saving the name of the array so it’s friends which as we can see here is correctly saved so with that all we need to do is grab our input right over here and you will need to have this attribute it is not going to
4:14
store anywhere so as you can see here I just have the name and the value is blank this is just telling the script to watch this as a field so make sure you add that and you’re good to go groups over here the setup for the form is basically the same as for the as it was for the array we have form one and then for type we have group and then list name is profile which we can see right over here then all we need to do is within our form we need to set the attributes for the field
4:45
so Ms Dash code dash JSON Dash name I have first name and then here I have last name and that’s it with that set up you should be good to go and then what you want to do with that from there will is totally up to you so all right hope you enjoyed if you have any questions just reach out to julianamemersack.com and I will talk to you soon have a good day
This is v1 of Memberstack University, built from the tutorials we’ve put so much work into over the years. We’d like to make a more organized series.