How to pass JSON array from Bubble to SendGrid Dynamic Template?

Need help APIs
1

こんにちは。
現在 Bubble でアプリを開発しているのですが、SendGrid との連携部分でつまずいています。

■状況

SendGrid プラグインを利用して、jobs の配列データを JSON としてメールに渡そうとしています。
イニシャライズは正常に通っており、jobs_json の中身は以下のように確認できています。

[
{
“job_id”: “10001”,
“job_title”: “フロントエンド開発（React）”,
“job_classification”: “フロントエンド”,
“job_price”: “75万円/月”,
“job_style”: “リモート可”,
“job_startyear”: “2024”,
“job_startmonth”: “10”,
“job_requiredskill”: [“React”,“TypeScript”,“HTML”,“CSS”],
“job_desirecandidate”: “React経験3年以上”
},
{
“job_id”: “10002”,
“job_title”: “バックエンド開発（Node.js）”,
“job_classification”: “バックエンド”,
“job_price”: “80万円/月”,
“job_style”: “常駐（週3日～）”,
“job_startyear”: “2024”,
“job_startmonth”: “11”,
“job_requiredskill”: [“Node.js”,“Express”,“MongoDB”],
“job_desirecandidate”: “API設計経験あり”
}
]

sendgridのテンプレートは以下です

{{subject}}

{{intro}}

{{#each jobs}}
  <div style="border:1px solid #ccc; padding:10px; margin:10px 0;">
    <b>{{job_title}}</b>（{{job_classification}}）
    <div>単価：{{job_price}}</div>
    <div>稼働：{{job_style}}</div>
    <div>開始：{{job_startyear}}年{{job_startmonth}}月</div>
    <div>必須スキル：{{job_requiredskill}}</div>
  </div>
{{/each}}

<p><a href="{{unsubscribe_url}}">配信停止はこちら</a></p>

■問題点

実際にメールを送信しようとすると、以下のエラーが出ます

The service SendGrid API - Send Dynamic Email (Digest) just returned an error (HTTP 400). Please consult their documentation to ensure your call is setup properly. Raw error: {“errors”:[{“message”:“Bad Request”,“field”:null,“help”:null}]}

custom stateでページには変数を持たせてあり、ワークフローでこれにJSONを注入→API使用という流れです。

image
image343×142 3.51 KB

以下の様に:formatted as json-safeを使用するとエラーは出ないのですが、jobs_jsonが空で扱われます。

:formatted as json-safeを外すと先述の400エラーとなります。

image
image356×515 12.5 KB

Bubble から SendGrid に JSON 配列を渡す場合、どのような形式で設定すれば正しく送信できますか？

2

first test with text on screen to see exactly how the formatted as json operator alters the json…I beleive bubble adds /n

for new lines which can cause problems for some other systems.

3

Thank you, @boston85719
I checked and found that when using “formatted as json”, the value gets wrapped in quotes and line breaks become \n.

At the moment, when I use “formatted as json”, no error occurs, but the JSON is treated as a string and the email content becomes NULL.
When I remove “formatted as json”, I get a 400 error — but I believe it should ideally work without using “formatted as json”.

Do you know why the 400 error is happening in this case?

4

Can you share screenshot of settings in API connector and also, how you send the array? (using:format as text on the list).

Formatted as json-safe is not to format the whole JSON but mostly to format string that could break JSON. Also, this function will add surrounding double-quotes so you don’t need them.

5

Hi @Jici, here is the screenshot of the API Connector settings.

pic1
pic1858×832 37.5 KB

pic2
pic2859×281 6 KB

It seems that “formatted as json-safe” should not be used in this case.
I’m attaching several screenshots of the settings for reference.
Please let me know if anything is missing.

image
image296×448 9.93 KB

image
image870×317 14.6 KB

image
image845×425 19.3 KB

6

In your body JSON for jobs, remove all new line and spaces

do something like:[{"job_id":"10001","job_title":…

This will avoid any encoding issue. the json-safe function is to make a string JSON safe, not a whole JSON. When you use json-safe, it will add double quotes around the string. So actually, your JSON is not a JSON anymore but a string and this is not what API expect. Whovever, according to your screenshot, you have special characters that maybe could create issue and you could use json-safe with arbitrary text. like: "job_id":abitrary-text:Format as json-safe

In arbitrary-text, you just set 10002 without doubles quotes because this will be added by json-safe function.

Finally, the unsubscribe_url shouldn’t be empty (doubles quotes with nothing between). A lot of API will reject this (but maybe this is accepted by this API). Empty string is not like null …

7

Thank you very much for your help.
I was able to resolve the issue by directly pasting the JSON instead of using arbitrary-text.
Once I removed the extra formatting and passed the clean JSON array as-is, the API accepted it and the email rendered correctly.

Really appreciate your guidance!

1 Like