How to add new data to existing JSON in Webflow without replacing the entire file for displaying user data? Answered

• 

  Jayess

  • June 13, 2023 15:22

  Hello Edward 👋

  It looks like you can. Test it out and report back for confirmation 😀

  

  0
• 

  Edward Goin

  • June 13, 2023 15:22

  Thanks JS. I’ve read that documentation. It doesn’t deal specifically with adding to JSON non-destructively, but I will run further tests

  Myself, ChatGPT 3.5 and ChatGPT 4 ran a dozen or so tests to try and update a single key:value pair in a multi-layered JSON, but no dice. Used your documentation example, below. I imagine it’s possible, but not sure what the correct syntax is. Not being able to target specific categories and subcategories of the JSON file non-destructively would render the JSON file nearly useless.

  [ {
  “username”: “nicolascodes”,
  “location”: {
  “city”: “NYC”,
  “state”: “New York”
  },
  “skills”: [“graphql”, “react”, “tailwindcss”]
  }]

  If there is a special syntax for me to change JUST New York to Florida (for example), that syntax should be included in the documentation. I think it would be super helpful.

  yeah that get and update memberJSON on the notion page really needs some more information. run a bunch more tests. any new object you add just replaces the entire JSON with that one key:value pair even if there were more.

  According to stack overflow it’s kinda complicated, need to GET the entire json, convert it, then you edit the bit you want, then convert it back, then UPDATE. Not for the squeamish.

  okay, ive got it to work. every use case requires different code. updating a value, updating a key, adding a new key:value pair, deleting a key:value pair. i will share my scripts with MS to update the notion page if you guys are interested

  0
• 

  Jayess

  • June 13, 2023 15:23

  oh wow thanks for reporting back! Tagging Josh Lopez

  0
• 

  Josh Lopez

  • Edited June 13, 2023 19:24

  We recently added a new advanced doc for this. Please check out this article for more information.

  0
• 

  Felipe Izquierdo

  • June 25, 2023 16:43

  I'd like to use my users' custom JSON to display user data in Weblow.

  Is there a way to do this: https://docs.memberstack.com/hc/en-us/articles/9872336561179--Code-Member-Metadata-Attributes with Member's JSON? Any tips?

  0
• 

  Josh Lopez

  • June 25, 2023 16:43

  Hey Felipe Izquierdo 👋

  Great question! You can use the DOM Package that is inside the Webflow script to get the JSON data of the logged in member.

  window.$memberstackDom.getMemberJSON();

  Once you get the JSON you can add to the page using custom code.

  Here is a simple example:

  <div id="location"></div> // a div with id of location on the page
  
  // Define an async function to get member information
  async function getMemberInfo() {
      try {
          // Use Memberstack's function to get the member JSON
          let memberJSON = await window.$memberstackDom.getMemberJSON();
  
          // Get the location data from the member JSON
          let locationData = memberJSON.data.location;
  
          // Format the location data as a string
          let locationString = `${locationData.city}, ${locationData.state}`;
  
          // Find the div with the ID 'location' in your HTML
          let locationDiv = document.getElementById('location');
  
          // Set the text content of the div to the location string
          locationDiv.textContent = locationString;
      } catch(error) {
          console.error("An error occurred: ", error);
      }
  }
  
  // Call the function
  getMemberInfo();

  in this example the json returned would be:

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

  You can read more here.
  0
• 

  Ben Sabic

  • June 25, 2023 16:45

  Hey Felipe Izquierdo!

  This code is adapted slightly from the metadata code. To show something from the member's JSON on an element, add the attribute data-ms-member-json on an element, and for the value, put the key.

  For example, if you want to show their company name, you would put:
  data-ms-member-json=company-name

  If you want to access something nested in an object (i.e. a state inside of a location object), then you would put this:
  data-ms-member-json=location.state

  let memberID;
  const memberstack = window.$memberstackDom;
  
  // Get The Member's ID
  
  memberstack.getCurrentMember().then(({ data: member }) => {
  
  if (member) {
      
      memberID = member.id;
      getMemberJSON(memberID);
  
  }
  
  
  });
  
  // Get The Member's JSON
  
  async function getMemberJSON(memberID) {
  
  const memberJSON = await memberstack.getMemberJSON(memberID);
  
  replaceTextWithJSON(memberJSON);
  
  
  }
  
  // Replace Text With Member JSON
  
  function replaceTextWithJSON(json) {
  
  const els = Array.from(document.querySelectorAll('[data-ms-member-json]'));
  
  els.forEach((el) => {
  const key = 'data.' + el.getAttribute('data-ms-member-json');
  const value = getValueFromKey(json, key);
  if (value !== undefined) {
  el.innerText = value;
  }
  });
  
  }
  
  function getValueFromKey(obj, key) {
  
  const keys = key.split('.');
  let value = obj;
  for (let i = 0; i < keys.length; i++) {
  if (value.hasOwnProperty(keys[i])) {
  value = value[keys[i]];
  } else {
  return undefined;
  }
  }
  return value;
  
  }

  0
• 

  Edward Goin

  • June 25, 2023 16:47

  Felipe Izquierdo check my comment history for a pdf of more in depth json data manipulation examples

  0

Please sign in to leave a comment.