JSON to HTML email / JavaScript

filip · 2024-08-13T18:59:22.255Z

Hi, I am build newsletter app that allows users to send HTML emails, since I am getting the data as JSON object like this:

[
    {
        "object": "block",
        "id": "30d98aa1-cf7b-4e43-8669-a64671054b6f",
        "parent": {
            "type": "page_id",
            "page_id": "6b3854f8-1a98-44e7-a34b-88fbf3b57b73"
        },
        "created_time": "2024-08-13T15:34:00.000Z",
        "last_edited_time": "2024-08-13T15:34:00.000Z",
        "created_by": {
            "object": "user",
            "id": "3912c482-ecf9-44ef-bd96-68944fe5eff1"
        },
        "last_edited_by": {
            "object": "user",
            "id": "3912c482-ecf9-44ef-bd96-68944fe5eff1"
        },
        "has_children": false,
        "archived": false,
        "in_trash": false,
        "type": "paragraph",
        "paragraph": {
            "rich_text": [
                {
                    "type": "text",
                    "text": {
                        "content": "Hi [Recipient's Name],",
                        "link": null
                    },
                    "annotations": {
                        "bold": true,
                        "italic": false,
                        "strikethrough": false,
                        "underline": false,
                        "code": false,
                        "color": "default"
                    },
                    "plain_text": "Hi [Recipient's Name],",
                    "href": null
                }
            ],
            "color": "default"
        }
    },
    {
        "object": "block",
        "id": "c5be27cc-0f4f-4d9d-a43e-caa592d91bbb",
        "parent": {
            "type": "page_id",
            "page_id": "6b3854f8-1a98-44e7-a34b-88fbf3b57b73"
        },
        "created_time": "2024-08-13T15:34:00.000Z",
        "last_edited_time": "2024-08-13T15:34:00.000Z",
        "created_by": {
            "object": "user",
            "id": "3912c482-ecf9-44ef-bd96-68944fe5eff1"
        },
        "last_edited_by": {
            "object": "user",
            "id": "3912c482-ecf9-44ef-bd96-68944fe5eff1"
        },
        "has_children": false,
        "archived": false,
        "in_trash": false,
        "type": "paragraph",
        "paragraph": {
            "rich_text": [
                {
                    "type": "text",
                    "text": {
                        "content": "Thank you for joining Acme Corp! We're thrilled to have you on board and look forward to helping you achieve your goals.",
                        "link": null
                    },
                    "annotations": {
                        "bold": false,
                        "italic": false,
                        "strikethrough": false,
                        "underline": false,
                        "code": false,
                        "color": "default"
                    },
                    "plain_text": "Thank you for joining Acme Corp! We're thrilled to have you on board and look forward to helping you achieve your goals.",
                    "href": null
                }
            ],
            "color": "default"
        }
    },
    {
        "object": "block",
        "id": "5cf8ec69-006a-4ba7-8be7-68acaf82d099",
        "parent": {
            "type": "page_id",
            "page_id": "6b3854f8-1a98-44e7-a34b-88fbf3b57b73"
        },
        "created_time": "2024-08-13T15:34:00.000Z",
        "last_edited_time": "2024-08-13T15:34:00.000Z",
        "created_by": {
            "object": "user",
            "id": "3912c482-ecf9-44ef-bd96-68944fe5eff1"
        },
        "last_edited_by": {
            "object": "user",
            "id": "3912c482-ecf9-44ef-bd96-68944fe5eff1"
        },
        "has_children": false,
        "archived": false,
        "in_trash": false,
        "type": "image",
        "image": {
            "caption": [],
            "type": "external",
            "external": {
                "url": "https://images.unsplash.com/32/RgJQ82pETlKd0B7QzcJO_5912578701_92397ba76c_b.jpg?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb"
            }
        }
    },
    {
        "object": "block",
        "id": "f5bb341d-9ead-4bef-9f4d-7281ab71dc1b",
        "parent": {
            "type": "page_id",
            "page_id": "6b3854f8-1a98-44e7-a34b-88fbf3b57b73"
        },
        "created_time": "2024-08-13T15:34:00.000Z",
        "last_edited_time": "2024-08-13T15:34:00.000Z",
        "created_by": {
            "object": "user",
            "id": "3912c482-ecf9-44ef-bd96-68944fe5eff1"
        },
        "last_edited_by": {
            "object": "user",
            "id": "3912c482-ecf9-44ef-bd96-68944fe5eff1"
        },
        "has_children": false,
        "archived": false,
        "in_trash": false,
        "type": "paragraph",
        "paragraph": {
            "rich_text": [
                {
                    "type": "text",
                    "text": {
                        "content": "Here’s a quick overview of what you can do with our platform:",
                        "link": null
                    },
                    "annotations": {
                        "bold": false,
                        "italic": false,
                        "strikethrough": false,
                        "underline": false,
                        "code": false,
                        "color": "default"
                    },
                    "plain_text": "Here’s a quick overview of what you can do with our platform:",
                    "href": null
                }
            ],
            "color": "default"
        }
    },
    {
        "object": "block",
        "id": "bbe91a4f-e6b2-46ab-b304-f209ce046ef7",
        "parent": {
            "type": "page_id",
            "page_id": "6b3854f8-1a98-44e7-a34b-88fbf3b57b73"
        },
        "created_time": "2024-08-13T15:34:00.000Z",
        "last_edited_time": "2024-08-13T15:34:00.000Z",
        "created_by": {
            "object": "user",
            "id": "3912c482-ecf9-44ef-bd96-68944fe5eff1"
        },
        "last_edited_by": {
            "object": "user",
            "id": "3912c482-ecf9-44ef-bd96-68944fe5eff1"
        },
        "has_children": false,
        "archived": false,
        "in_trash": false,
        "type": "bulleted_list_item",
        "bulleted_list_item": {
            "rich_text": [
                {
                    "type": "text",
                    "text": {
                        "content": "Easily manage your projects and tasks.",
                        "link": null
                    },
                    "annotations": {
                        "bold": false,
                        "italic": false,
                        "strikethrough": false,
                        "underline": false,
                        "code": false,
                        "color": "default"
                    },
                    "plain_text": "Easily manage your projects and tasks.",
                    "href": null
                }
            ],
            "color": "default"
        }
    },
    {
        "object": "block",
        "id": "68f1e89d-1b06-432a-b314-7ffab85f2c55",
        "parent": {
            "type": "page_id",
            "page_id": "6b3854f8-1a98-44e7-a34b-88fbf3b57b73"
        },
        "created_time": "2024-08-13T15:34:00.000Z",
        "last_edited_time": "2024-08-13T15:34:00.000Z",
        "created_by": {
            "object": "user",
            "id": "3912c482-ecf9-44ef-bd96-68944fe5eff1"
        },
        "last_edited_by": {
            "object": "user",
            "id": "3912c482-ecf9-44ef-bd96-68944fe5eff1"
        },
        "has_children": false,
        "archived": false,
        "in_trash": false,
        "type": "bulleted_list_item",
        "bulleted_list_item": {
            "rich_text": [
                {
                    "type": "text",
                    "text": {
                        "content": "Track your progress with our analytics tools.",
                        "link": null
                    },
                    "annotations": {
                        "bold": false,
                        "italic": false,
                        "strikethrough": false,
                        "underline": false,
                        "code": false,
                        "color": "default"
                    },
                    "plain_text": "Track your progress with our analytics tools.",
                    "href": null
                }
            ],
            "color": "default"
        }
    },
    {
        "object": "block",
        "id": "a46089b7-5b39-41e3-a1e0-9e0c894e881b",
        "parent": {
            "type": "page_id",
            "page_id": "6b3854f8-1a98-44e7-a34b-88fbf3b57b73"
        },
        "created_time": "2024-08-13T15:34:00.000Z",
        "last_edited_time": "2024-08-13T15:34:00.000Z",
        "created_by": {
            "object": "user",
            "id": "3912c482-ecf9-44ef-bd96-68944fe5eff1"
        },
        "last_edited_by": {
            "object": "user",
            "id": "3912c482-ecf9-44ef-bd96-68944fe5eff1"
        },
        "has_children": false,
        "archived": false,
        "in_trash": false,
        "type": "bulleted_list_item",
        "bulleted_list_item": {
            "rich_text": [
                {
                    "type": "text",
                    "text": {
                        "content": "Customize your workspace to fit your needs.",
                        "link": null
                    },
                    "annotations": {
                        "bold": false,
                        "italic": false,
                        "strikethrough": false,
                        "underline": false,
                        "code": false,
                        "color": "default"
                    },
                    "plain_text": "Customize your workspace to fit your needs.",
                    "href": null
                }
            ],
            "color": "default"
        }
    },
    {
        "object": "block",
        "id": "2f51eb15-d0f3-426b-a340-8501dc6369b5",
        "parent": {
            "type": "page_id",
            "page_id": "6b3854f8-1a98-44e7-a34b-88fbf3b57b73"
        },
        "created_time": "2024-08-13T15:34:00.000Z",
        "last_edited_time": "2024-08-13T15:34:00.000Z",
        "created_by": {
            "object": "user",
            "id": "3912c482-ecf9-44ef-bd96-68944fe5eff1"
        },
        "last_edited_by": {
            "object": "user",
            "id": "3912c482-ecf9-44ef-bd96-68944fe5eff1"
        },
        "has_children": false,
        "archived": false,
        "in_trash": false,
        "type": "paragraph",
        "paragraph": {
            "rich_text": [
                {
                    "type": "text",
                    "text": {
                        "content": "If you have any questions or need assistance, feel free to reply to this email or contact our support team.",
                        "link": null
                    },
                    "annotations": {
                        "bold": false,
                        "italic": false,
                        "strikethrough": false,
                        "underline": false,
                        "code": false,
                        "color": "default"
                    },
                    "plain_text": "If you have any questions or need assistance, feel free to reply to this email or contact our support team.",
                    "href": null
                }
            ],
            "color": "default"
        }
    }
]

How can I transform it to look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to Acme Corp</title>
    
</head>
<body style="font-family: Arial, sans-serif; color: #333; line-height: 1.6;">
    <p><strong>Hi [Recipient's Name],</strong></p>
    
    <p>Thank you for joining Acme Corp! We're thrilled to have you on board and look forward to helping you achieve your goals.</p>
    
    <div class="image-container" style="text-align: center; margin: 20px 0;">
        <img src="https://images.unsplash.com/32/RgJQ82pETlKd0B7QzcJO_5912578701_92397ba76c_b.jpg?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb" alt="Welcome Image" style="max-width: 100%; height: auto;" height="auto">
    </div>
    
    <p>Here’s a quick overview of what you can do with our platform:</p>
    
    <ul style="margin: 0; padding-left: 20px;">
        <li style="margin-bottom: 10px;">Easily manage your projects and tasks.</li>
        <li style="margin-bottom: 10px;">Collaborate with your team in real-time.</li>
        <li style="margin-bottom: 10px;">Access detailed reports and insights to track your progress.</li>
    </ul>
    
    <p>If you have any questions or need assistance, feel free to reach out to us at <a href="mailto:support@acmecorp.com">support@acmecorp.com</a>.</p>
    
    <p>Cheers,</p>
    
    <p>The Acme Corp Team</p>
</body>
</html>

image405×535 51.1 KB

This was done using ChatGPT

I tried using Toolbox plugin and JavaScript scripts made with ChatGPT but did not succeed, any ideas?

Thanks

fede.bubble · 2024-08-13T21:59:16.905Z

Have you tried using something like https://www.json2html.com/ ?

system · 2024-10-22T19:00:19.181Z

This topic was automatically closed after 70 days. New replies are no longer allowed.