How to dynamically display JSON group IDs with memberscript attributes without requiring page refresh? Answered

• 

  A J

  • August 03, 2024 05:25

  Hey Patrick Hoban, ahh now I get what you mean.

  I researched on this a bit and I think there is no direct method to do this via the attribute structure. But figured a workaround for this case and was able to pull the Group ID to be displayed (#1 Screenshot).

  There are multiple approaches to solve this for sure, one way is you could push the group ID value to the member json structure during form submission as a hidden value and then try to display it by using similar custom attribute with the groupID. I personally don't like storing keys as a value within a structure.

  So, I took this approach:

  Add the following code in your Memberscript #6 in the code you might have placed before </body> tag of the page:

   const itemKeys = newItem.querySelectorAll('[ms-code-item-key]'); itemKeys.forEach(itemKey => { const jsonKey = itemKey.getAttribute('ms-code-item-key'); const value = Object.keys(member.data[jsonGroup]).find(k => member.data[jsonGroup][k] === item) itemKey.textContent = value; });

  For your reference, place the above code before the following line which already exists in your script:

   itemContainer.appendChild(newItem.firstChild);

  Save the changes.

  In the custom attribute of the text field where you want to show the Group ID, add a custom attribute as follows:
  ms-code-item-key
groupID

  Have attached a #2 screenshot for your reference as well.
  Once you publish the changes, you must be able to view the group ID on the front-end.

  Let me know if this helps.

  

  0
• 

  Patrick Hoban

  • August 03, 2024 05:30

  Oh wow thank you so much! I'll try that out

  0
• 

  Ashish Jangra

  • March 16, 2025 17:13

  I'm using script 2 and 6 but when i add new item it's not updates without page refresh.

  Submit button has a separate attribute ms-code-update=json which was not in tutorial so i missed it

  0
• 

  A J

  • March 16, 2025 17:14

  Hey Ashish Jangra, hope that resolved the issue. #6 memberscript was probably a continuation from #4 memberscript where the submit attribute setup was explained.

  But for better clarity, you can check the demo project for the working version of #6 memberscript to compare the setup with. Hope this helps.

  0

Please sign in to leave a comment.