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.