Advanced JSON Data Usage With The Memberstack Dom Package

Article author
Josh Lopez
  • Updated

Before we begin the Memberstack team wants to give a huge shoutout to Edward Goin in our slack community for submitting this helpful information!

View the full DOM Package Website for more additional guidance. 

Setup

This guide is to be used by experienced developers. If you are looking for an easy to follow example please view this article: Using Member JSON Data with Memberstack's DOM Package

When using Member JSON in the Memberstack dashboard you need to add quotation marks around the keys as well as the values like this example:

{
  "username": "Rey",
  "location": {
    "city": "Seattle",
    "state": "Washington"
  },
  "skills": ["graphql", "svelte", "tailwindcss"]
}

Paste the above code in the member JSON so you can test the examples in this article.

 

The examples below do not cover every possible scenario (nested vs non- nested, objects vs arrays, target sourcing methods). But with a little mixing & matching (and testing), as well as additional JavaScript to translate user inputs (fields, buttons, etc) into values, you should be able to cover all use cases.

Note, all reads are for writing to the HTML, you can also write to console.log but that’s not super useful for users.

Writing JSON

Changing a (non-nested) key:value object’s value

<script>
const memberstack = window.$memberstackDom;
let memberId;

memberstack.getCurrentMember().then(({ data: member }) => {
    if (member) {
        memberId = member.id; updateObjectValue(memberId);
    }
});

async function updateObjectValue(memberId) {
    const memberData = await memberstack.getMemberJSON(memberId);
    const originalValue = memberData.data.username; 
    const updatedValue = "newUsername";
    const updatedMemberData = { ...memberData.data, username: updatedValue };
    const result = await memberstack.updateMemberJSON({ json: updatedMemberData });
    const finalMemberData = await memberstack.getMemberJSON(memberId);
}
</script>


Changing a nested key:value object’s value

<script>
const memberstack = window.$memberstackDom;
let memberId;

memberstack.getCurrentMember().then(({ data: member }) => {
    if (member) {
        memberId = member.id; updateMemberLocation(memberId);
    }
});

async function updateMemberLocation(memberId) {
    const memberData = await memberstack.getMemberJSON(memberId);
    const originalValue = memberData.data.location.state; 
    const updatedValue = "Iowa";

    const updatedMemberData = {
        ...memberData.data,
        location: { ...memberData.data.location, state: updatedValue },
    };

    const result = await memberstack.updateMemberJSON({ json: updatedMemberData });
    const finalMemberData = await memberstack.getMemberJSON(memberId);
}
</script>


Changing a nested key:value object’s key name

<script>
const memberstack = window.$memberstackDom;
let memberId;

memberstack.getCurrentMember().then(({ data: member }) => {
    if (member) {
        memberId = member.id; updateMemberLocation(memberId);
    }
})

async function updateMemberLocation(memberId) {
    const memberData = await memberstack.getMemberJSON(memberId);

    const updatedMemberData = {
        ...memberData.data,
        location: {
            ...memberData.data.location,
            region: memberData.data.location.state, state: undefined,
        },
    };

    const result = await memberstack.updateMemberJSON({
        json: updatedMemberData,
    });

    const finalMemberData = await memberstack.getMemberJSON(memberId);
}
</script>


Adding a new nested key:value object

<script>
const memberstack = window.$memberstackDom;
let memberId;

memberstack.getCurrentMember().then(({ data: member }) => {
    if (member) {
        memberId = member.id;
        updateMemberLocation(memberId);
    }
})

async function updateMemberLocation(memberId) {
    const memberData = await memberstack.getMemberJSON(memberId);

    const updatedMemberData = {
        ...memberData.data,
        location: {
            ...memberData.data.location,
            state: "Iowa",
        }
    };

    const result = await memberstack.updateMemberJSON({
        json: updatedMemberData
    });

    const finalMemberData = await memberstack.getMemberJSON(memberId);
}
</script>


Adding/appending a new string to an array

<script>
const memberstack = window.$memberstackDom;
let memberId;

memberstack.getCurrentMember().then(({ data: member }) => {
    if (member) {
        memberId = member.id;
        // or use javascript to get this string from user input (e.g. text field) 
        const newSkill = "nodejs";
        addStringToArray(memberId, newSkill);
    }
});

async function addStringToArray(memberId, newSkill) {
    const memberData = await memberstack.getMemberJSON(memberId);
    const updatedSkills = [
        ...memberData.data.skills,
        newSkill
    ];

    const updatedMemberData = {
        ...memberData.data,
        skills: updatedSkills
    };

    const result = await memberstack.updateMemberJSON({
        json: updatedMemberData
    });

    const finalMemberData = await memberstack.getMemberJSON(memberId);
}
</script>


Changing one string in an array (targeted by string search)

<script>
const memberstack = window.$memberstackDom;
let memberId;

memberstack.getCurrentMember().then(({ data: member }) => {
    if (member) {
        memberId = member.id;
        // The skill you want to update, potential to derive from user input 
        const oldSkill = "svelte";
        // New value for the skill, could also be from user input 
        const updatedSkill = "angular";
        updateStringValue(memberId, oldSkill, updatedSkill);
    }
});

async function updateStringValue(memberId, oldSkill, updatedSkill) {
    const memberData = await memberstack.getMemberJSON(memberId);

    const updatedSkills = memberData.data.skills.map((skill) => skill === oldSkill ? updatedSkill : skill);

    const updatedMemberData = {
        ...memberData.data,
        skills: updatedSkills
    };

    const result = await memberstack.updateMemberJSON({
        json: updatedMemberData,
    });

    const finalMemberData = await memberstack.getMemberJSON(memberId);
}
</script>

Deleting JSON

Deleting a nested object’s key:value pair

<script>
const memberstack = window.$memberstackDom;
let memberId;

memberstack.getCurrentMember().then(({ data: member }) => {
    if (member) {
        memberId = member.id;
        updateMemberLocation(memberId);
    }
})

async function updateMemberLocation(memberId) {
    const memberData = await memberstack.getMemberJSON(memberId);

    const updatedMemberData = {
        ...memberData.data,
        location: {
            ...memberData.data.location,
            state: undefined
        }
    };

    const result = await memberstack.updateMemberJSON({
        json: updatedMemberData
    });

    const finalMemberData = await memberstack.getMemberJSON(memberId);
}
</script>


Deleting a nested object’s value, but keeping the key

<script>
const memberstack = window.$memberstackDom;
let memberId;

memberstack.getCurrentMember().then(({ data: member }) => {
    if (member) {
        memberId = member.id;
        updateMemberLocation(memberId);
    }
})

async function updateMemberLocation(memberId) {
    const memberData = await memberstack.getMemberJSON(memberId);

    const updatedMemberData = {
        ...memberData.data,
        location: {
            ...memberData.data.location,
            state: ""
        }
    };

    const result = await memberstack.updateMemberJSON({
        json: updatedMemberData
    });

    const finalMemberData = await memberstack.getMemberJSON(memberId);
}
</script>


Deleting a non-nested/parent object and all its children objects

<script>
const memberstack = window.$memberstackDom;
let memberId;

memberstack.getCurrentMember().then(({ data: member }) => {
    if (member) {
        memberId = member.id; deleteParentObject(memberId);
    }
})

async function deleteParentObject(memberId) {
    const memberData = await memberstack.getMemberJSON(memberId);

    const updatedMemberData = {
        ...memberData.data, 
        location: undefined
    };

    const result = await memberstack.updateMemberJSON({
        json: updatedMemberData
    });

    const finalMemberData = await memberstack.getMemberJSON(memberId);
}
</script>


Deleting an array string, targeted by index

<script>
const memberstack = window.$memberstackDom;
let memberId;

memberstack.getCurrentMember().then(({ data: member }) => {
    if (member) {
        memberId = member.id;
        // The index of the skill you want to delete
        const skillIndex = 1;
        deleteArrayStringByIndex(memberId, skillIndex);
    }
});

async function deleteArrayStringByIndex(memberId, skillIndex) {
    const memberData = await memberstack.getMemberJSON(memberId);
    const updatedSkills = [...memberData.data.skills];
    //this second "1" is for how many items to remove
    updatedSkills.splice(skillIndex, 1);

    const updatedMemberData = {
        ...memberData.data,
        skills: updatedSkills
    };

    const result = await memberstack.updateMemberJSON({
        json: updatedMemberData,

    });

    const finalMemberData = await memberstack.getMemberJSON(memberId);
}
</script>


Deleting an array string, targeted by string value

<script>
const memberstack = window.$memberstackDom;
let memberId;

memberstack.getCurrentMember().then(({ data: member }) => {
    if (member) {
        memberId = member.id;
        // also can use JS to pull from some kind of user input
        const skillToDelete = "svelte";
        deleteSkillByName(memberId, skillToDelete);
    }
});

async function deleteSkillByName(memberId, skillToDelete) {
    const memberData = await memberstack.getMemberJSON(memberId);
    const updatedSkills = memberData.data.skills.filter(skill => skill !== skillToDelete);

    const updatedMemberData = {
        ...memberData.data,
        skills: updatedSkills
    };

    const result = await memberstack.updateMemberJSON({
        json: updatedMemberData
    });

    const finalMemberData = await memberstack.getMemberJSON(memberId);
}
</script>

Reading JSON

Adding an (non-nested) object value to an HTML element

<div id="output"></div>
          
<script>
const memberstack = window.$memberstackDom;
let memberId;

memberstack.getCurrentMember().then(({ data: member }) => {
    if (member) {
        memberId = member.id;
        displayNestedObject(memberId);
    }
})

async function displayNestedObject(memberId) {
    const memberData = await memberstack.getMemberJSON(memberId); 
    const userName = memberData.data.username;
    const outputDiv = document.getElementById('output');
    outputDiv.innerHTML = `Username: ${userName}`;
}
</script>


Adding a nested object value to an HTML element

<div id="output"></div>
          
<script>
const memberstack = window.$memberstackDom;
let memberId;

memberstack.getCurrentMember().then(({ data: member }) => {
    if (member) {
        memberId = member.id;
        displayNestedObject(memberId);
    }
})

async function displayNestedObject(memberId) {
    const memberData = await memberstack.getMemberJSON(memberId);
    const state = memberData.data.location.state;
    const outputDiv = document.getElementById('output');
    outputDiv.innerHTML = `State: ${state}`;
}
</script>


Adding specific array item/string to an HTML element

<div id="output"></div>
          
<script>
const memberstack = window.$memberstackDom;
let memberId;

memberstack.getCurrentMember().then(({ data: member }) => {
    if (member) {
        memberId = member.id;
        displayAnArrayValue(memberId);
    }
})

async function displayAnArrayValue(memberId) {
    const memberData = await memberstack.getMemberJSON(memberId);
    // 2nd item, as array index starts at 0
    const secondSkill = memberData.data.skills[1]; 
    const outputDiv = document.getElementById('output');
    outputDiv.innerHTML = `Second Skill: ${secondSkill}`;
}
</script>


Adding all array strings as separate HTML elements

<div id="output"></div>
          
<script>
const memberstack = window.$memberstackDom;
let memberId;

memberstack.getCurrentMember().then(({ data: member }) => {
    if (member) {
        memberId = member.id;
        displayAllArrayValuesAsSeparateElements(memberId);
    }
})

async function displayAllArrayValuesAsSeparateElements(memberId) {
    const memberData = await memberstack.getMemberJSON(memberId);    
    const skills = memberData.data.skills;
    const outputDiv = document.getElementById('output');    
    outputDiv.innerHTML = '';
    skills.forEach((skill, index) => {
        const skillDiv = document.createElement('div');
        // For styling, add a class to the div element
        skillDiv.classList.add('skill-item');
        // can remove "Skill ${index + 1}:" to just have the skill strings by themselves.
        skillDiv.innerHTML = `Skill ${index + 1}: ${skill}`;
        outputDiv.appendChild(skillDiv);
    });
}
</script>

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.