How to extract client-specific data, including image links, hyperlinks, and buttons, from a JSON array and display it in a Webflow? Answered
If in a user's JSON is a list of clients, and within these clients you have associated information - is then possible that they select their client from a drop-down menu and the associated information will show that belongs to that specific client? I legit tried this for hours but without luck
Julian Galluzzo to solve this solution I'm also looking into this template https://webflow.com/made-in-webflow/website/crm-app-template?utm_medium=affiliate&[…]d=MEAPd1Xv2jXplN&gsxid=MEAPd1Xv2jXplN&gspk=ZHVuY2FuaGFtcmE1MTg5
Do you think that is in this case the better option? I do see it kinda getting messy soon tho, also bit worried about data security
Comments
4 comments
This might help - it's about adding item groups with nested information into the member json https://www.memberstack.com/scripts/add-item-groups-to-member-json
hey Team! Is it possible to get image link from the member json array to put it into the list?
Same question for hyperlinks and buttons
Thanks
#6 - Create Item Groups From Member JSON v0.2
Hey Anton Potorochin, I tested this out for you and yes, you can push images or button links or hyperlinks using the data you store in the Member JSON.
To achieve this, I had created two extra items in JSON like img-link and btn-link (in your case its 'profileImage' instead of img-link). Refer #1 screenshot for clarity.
So after that, I added image component in the page and added custom attribute as ms-code-item-text="img-link" just to maintain consistency and achieve this via making minimal changes to the custom code. In the same way I added hyperlinks and button with custom attribute ms-code-item-text="btn-link" for testing purpose. I have showed this in #2 and #3 screenshots for reference. You can change the value from img-link to profileImage and whatever key that you use for links in your Member JSON.
I made some changes to the memberscript #6. You can find a line in the memberscript #6 which is:
I replaced that line of code with the following:
if (jsonKey === 'img-link') {itemElement.src = value;
} else if (jsonKey === 'btn-link') {
itemElement.href = value;
} else {
itemElement.textContent = value;
}
For better clarity, I have showed the placement of this code in #4 screenshot as well.
Make sure you replace img-link with profileImage as per your Member JSON and btn-link with the button link key name in your Member JSON. Here I have used hyperlinks with the same btn-link value, you can create a separate key for the hyperlink in JSON and implement it via that particular key in the component and the custom code.
Once that's done, just hit publish and you should see the results shown in the last screenshot.
Hope this helps. Let me know if you face any issues in implementation.
WOW! Just wow investigating A J Thank you so much, it works. Really appreciate it.
Please sign in to leave a comment.