Seeking Automation for Encoding HTML Code in JSON Requests via make.com

How To
1

Hi everyone,

I’m reaching out to discuss a specific challenge I’ve been encountering related to sending HTML content within API requests. The core of the issue is the need to include HTML segments in the JSON body, which often leads to validation errors due to problems with certain characters, particularly with structured elements like lists.

Here’s a practical example to illustrate what I’m trying to achieve: I want to send an unordered list with items through an API. The HTML would look something like this:

htmlCopy code

<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

For inclusion in a JSON request, this needs to be encoded as a string that maintains the HTML structure, resulting in something like this:

jsonCopy code

{ "description": "<ul>\n<li>Item 1<\/li>\n<li>Item 2<\/li>\n<\/ul>" }

While manual encoding (e.g., using the Online JSON Encoder on NDDAPP Online JSON Encoder - NDDAPP) offers a workaround, it’s cumbersome for an efficient workflow. What I’m seeking is a way to automate this encoding process, specifically for HTML content, through make.com. The goal is to streamline how HTML is included in JSON bodies, ensuring it’s correctly processed without manual intervention.

Does anyone have insights, tools, or experience with automating this JSON encoding for HTML content? Any advice on how to approach this or recommendations for tools that integrate with make.com would be greatly appreciated.

Thank you in advance for your support and suggestions!

2

Hi @Ecommike,

Make generally handles this internally with the JSON module. When you create JSON or convert an existing object to JSON, it encodes everything. When you parse the JSON, it is decoded again.

Do you have an example of the Scenario where you are seeing these errors?

3 Likes
3

Hello @Donald_Mitchell yes, this is what my JSON Body looks like:

image
image462×552 23.6 KB

The Step Description always contains the content from Google Sheets (here is the HTML description) as shown in the screenshot:

image
image873×401 18.8 KB

But nothing is encoded automatically

Hier is the output for this request: (all of the fields stay empty because html is not valid)

[
    {
        "id": 908,
        "itemId": 935,
        "lang": "de",
        "name": "",
        "name2": "",
        "name3": "",
        "previewDescription": "",
        "metaDescription": "",
        "description": "",
        "technicalData": "",
        "urlPath": "",
        "metaKeywords": ""
    }
]

It says code 200 so everything is OK but nothing arrives.

If I replace the field in my Google Sheets e.g. only with the value “test” in my google sheet and the scenario rushes through (i.e. without html), I get the following output and the value is also updated in my target system:

[
    {
        "id": 907,
        "itemId": 934,
        "lang": "de",
        "name": "Multitooltaschenmesser Outdoormesser Geschenk für Männer Taschenmesser",
        "name2": "Multitooltaschenmesser Outdoormesser Männergeschenk Taschenmesser",
        "name3": "Multifunktionswerkzeug Outdoor Messer Männer Geschenk",
        "previewDescription": "",
        "metaDescription": "",
        "description": "test",
        "technicalData": "",
        "urlPath": "",
        "metaKeywords": ""
    }
]
4

so i just don’t get an error but it just shoots my whole request if i just let the html code flow into the sheet and it is then played out as a variable in the body.

If I pass the html code through an online JSON encoder like this one, for example:

and then pack it into the google sheets, e.g:

<h1>Multitool Knife - The Ideal Gift for Adventurers and Craftsmen</h1>

<ul>
  <li>10-in-1 Multi-Purpose Knife: Versatile tool for DIY projects with safety lock, wire cutter, pliers, opener, and screwdriver.</li>
  <li>High-Quality Stainless Steel Pocket Knife: Sturdy, durable, and compact. Lightweight at only 218.3g, ideal for outdoor activities.</li>
  <li>Perfect for Outdoor Enthusiasts: Ideal for survival, hiking, fishing, and camping. Includes high-quality magnesium rod for fire starting.</li>
  <li>Unique Gift for Men: Surprise your father, partner, or husband with this practical tool. Perfect for Christmas, birthdays, and more.</li>
  <li>Includes Gift Box and Customer Service: Each multi-functional tool comes in an elegant box. We stand for quality and top-notch service.</li>
</ul>

<p>The TRSCIND Multitool Knife is a reliable companion for all adventures and a practical aid for any DIY project. With its versatile functions and high-quality craftsmanship, it is a gift that makes men's hearts beat faster. Surprise your loved ones with this multi-function pocket knife that is not only functional but also ensures safety and comfort. Order today and experience the joy of giving!</p>

the code is converted into this:

<h1>Multitool Knife - The Ideal Gift for Adventurers and Craftsmen<\/h1>\n\n<ul>\n  <li>10-in-1 Multi-Purpose Knife: Versatile tool for DIY projects with safety lock, wire cutter, pliers, opener, and screwdriver.<\/li>\n  <li>High-Quality Stainless Steel Pocket Knife: Sturdy, durable, and compact. Lightweight at only 218.3g, ideal for outdoor activities.<\/li>\n  <li>Perfect for Outdoor Enthusiasts: Ideal for survival, hiking, fishing, and camping. Includes high-quality magnesium rod for fire starting.<\/li>\n  <li>Unique Gift for Men: Surprise your father, partner, or husband with this practical tool. Perfect for Christmas, birthdays, and more.<\/li>\n  <li>Includes Gift Box and Customer Service: Each multi-functional tool comes in an elegant box. We stand for quality and top-notch service.<\/li>\n<\/ul>\n\n<p>The TRSCIND Multitool Knife is a reliable companion for all adventures and a practical aid for any DIY project. With its versatile functions and high-quality craftsmanship, it is a gift that makes men's hearts beat faster. Surprise your loved ones with this multi-function pocket knife that is not only functional but also ensures safety and comfort. Order today and experience the joy of giving!<\/p>

This is how everything works. Here is the output when I enter the value in my request:

[
    {
        "id": 909,
        "itemId": 936,
        "lang": "de",
        "name": "Multitooltaschenmesser Outdoormesser Geschenk für Männer Taschenmesser",
        "name2": "Multitooltaschenmesser Outdoormesser Männergeschenk Taschenmesser",
        "name3": "Multifunktionswerkzeug Outdoor Messer Männer Geschenk",
        "previewDescription": "",
        "metaDescription": "",
        "description": "<h1>Multitool Knife - The Ideal Gift for Adventurers and Craftsmen</h1>\n\n<ul>\n  <li>10-in-1 Multi-Purpose Knife: Versatile tool for DIY projects with safety lock, wire cutter, pliers, opener, and screwdriver.</li>\n  <li>High-Quality Stainless Steel Pocket Knife: Sturdy, durable, and compact. Lightweight at only 218.3g, ideal for outdoor activities.</li>\n  <li>Perfect for Outdoor Enthusiasts: Ideal for survival, hiking, fishing, and camping. Includes high-quality magnesium rod for fire starting.</li>\n  <li>Unique Gift for Men: Surprise your father, partner, or husband with this practical tool. Perfect for Christmas, birthdays, and more.</li>\n  <li>Includes Gift Box and Customer Service: Each multi-functional tool comes in an elegant box. We stand for quality and top-notch service.</li>\n</ul>\n\n<p>The TRSCIND Multitool Knife is a reliable companion for all adventures and a practical aid for any DIY project. With its versatile functions and high-quality craftsmanship, it is a gift that makes men's hearts beat faster. Surprise your loved ones with this multi-function pocket knife that is not only functional but also ensures safety and comfort. Order today and experience the joy of giving!</p>",
        "technicalData": "",
        "urlPath": "",
        "metaKeywords": ""
    }
]

With the HTML Encode it works then. But how can you automate this in make? because I have a huge Excel table with lots of descriptions in HTML format and I don’t want to encode them manually every time :wink:

6

Okay

yes your right :wink: its fixed if you use this modul:
image

Thanks!

3 Likes
7

Hey @Ecommike :blob_wave:

Awesome to see that you got this up and running with the assistance of @Donald_Mitchell :clap:

Thanks a lot for remembering to step back into the community and to confirm that the suggested module helped you resolve this :pray:

FYI: I marked your last comment as a solution to keep the community organized and easy to look for answers.

2 Likes