Show JSON data on the product page with metafields

Hi Everyone,

I have created a meta field for JSON data for every product page. I have added the below data inside JSON meta fields for 1 product.

{
“No”: “111”,
“Name”: “My Data”,
“City”: “Dubai”,
“Custom data”: [{
“id”: 1,
“first_name”: “Jeanette”,
“last_name”: “Penddreth”,
“email”: “jpenddreth0@census.gov”,
“gender”: “Female”,
“ip_address”: “26.58.193.2”
}, {
“id”: 2,
“first_name”: “Giavani”,
“last_name”: “Frediani”,
“email”: “gfrediani1@senate.gov”,
“gender”: “Male”,
“ip_address”: “229.179.4.212”
}, {
“id”: 3,
“first_name”: “Noell”,
“last_name”: “Bea”,
“email”: “nbea2@imageshack.us”,
“gender”: “Female”,
“ip_address”: “180.66.162.255”
}, {
“id”: 4,
“first_name”: “Willard”,
“last_name”: “Valek”,
“email”: “wvalek3@vk.com”,
“gender”: “Male”,
“ip_address”: “67.76.188.26”
}]
}

How to show this data on the product page with JSON Object?

This is my Namespace and key for meta filed => product.metafields.custom.data

use {{}} to print any variable value

{{ product.metafields.custom.data }}

or try using this one if first one didn’t worked

{{ product.metafields.custom.data.id }}

{{ product.metafields.custom.data.first_name }}

Thank you for your response.
I have already tried this code but the data is not properly formated.
I want the proper solution without adding more code.

I know this is a pretty old post and I am fairly new to liquid for developers who come along later here is how you access your JSON Metafields. simplest method is to access it with {% assign my_json_obj = product.metafields.custom.data.value %} and then you can access it directly {{my_json_obj.name}}

Yes, but in this example, how do you access the ID field in the “Custom data” array? I’ve been trying to solve similar issue for almost a day now. I’d think you should be able to access the attribute by using {{my_json_obj[“Custom data”][0].id}} but when rendering in the shop it renders nothing.