使用Webhook动作来预填充问题

目标

从调用返回JSON的Webhook Action中预填充Hidden Value Actions。而Webhook行动有一个选项“使用它来预填充以下问题”，它不识别JSON，一个由api返回的流行格式。

努力:✔✔✔（javascript开发人员是必要的修改Webhook操作所需的API返回的特定数据结构的JavaScript，但是，这通常是一个简单的过程）

解决方案

alchemer用户使用免费API开发一个例子来获取日出/日落信息（https://sunrise-sunset.org/api)并预填充一些隐藏值操作。

第1步：添加Webhook页面

1.添加新页面

2.设置页面>类名来SG-HED.隐藏页面

2.添加一个Webhook行动到以下页面:

（1）方法得到请求API中的数据
(2) URL调用API，这个例子中我们将获得伦敦的数据:https://api.sunrise-sunset.org/json?lat=51.5007292&lng=-0.1268141.
（3）显示返回的数据，以便JavaScript可以访问它

步骤2:添加隐藏值到预填充

添加隐藏值到Webhook页面来保存API调用的信息。在这个示例中，保存日出、日落和一天的长度。Webhook页面现在看起来像这样:

步骤3:添加Javascript

将本文末尾的Javascript Action添加到Webhook页面，以解释Webhook调用返回的JSON数据。在我们的例子中，webhook像这样返回JSON:

{"status": "OK"， "results": {"sunrise": "8:05:30 AM"， "sunset": "3:56:35 PM"，“Solar_noon”：“12:01:02 PM”，:“day_length 07:51:05”,"civil_twilight_begin": "7:25:25 AM"， "civil_twilight_end": "4:36:39 PM"， "nautical_twilight_begin": "6:42:18 AM"， "nautical_twilight_end": "5:19:47 PM"， "astronomical twilight_begin": "6:01:32 AM"， "astronomical twilight_end": "6:00:33 PM"}}

我们的JavaScript将确认状态确定，然后将日出，日落和Day_Length属性保存到我们添加到WebHook页面的隐藏值操作。

Javascript开发人员可以调整getWebhookData()中的代码，以匹配JSON的结构。

第四步:利用数据

对于本例，我们将在下一页显示三个Hidden Value Actions。

JavaScript代码：

/* Alchemer v01预填充HVas与Webhook JSON响应。这个示例代码期望JSON的形式为:{"status": "OK"， "results": {"sunrise": "8:05:30 AM"， "sunset": "3:56:35 PM"， "solar_noon": "12:01:02 PM"， "day_length": "07:51:05"， "civil_twilight_begin":"7:25:25 AM"， "civil_twilight_end": "4:36:39 PM"， "nautical_twilight_begin": "6:42:18 AM"， "nautical_twilight_end": "5:19:47 PM"， "astronomical twilight_begin": "6:01:32 AM"， "astronomical twilight_end": "6:00:33 PM"}} */文档。adddeventlistener ("DOMContentLoaded"， function() {const PREPPOP_MAPPINGS = [{jsonkey：'sunrise'，qid：15}，{jsonkey：'日落'，qid：16}，{jsonkey：'day_length'，qid：17}，] // ******************************* // *** 不需要更改以下  *** // ******************************* const日志= false / * * * *测试布尔值,警报()和把错误如果是假* * bool (t / f)值来测试*味精(字符串)消息提醒,扔在新的错误* / const断言= (bool,味精)= >{味精= " Javascript断言错误:“+味精如果(! bool){警报(味精)console.error(味精)const呃=新的错误(味精)console.error (err)把犯错  } } /*** * 得到一个元素ID基于其问题* * qid} {int /字符串问题ID *节= {string}“元素”的最后一部分元素ID *返回}{元素查找ID的形式:"sgE-" + SGAPI.survey.surveyObject.id + "-" + qid + "-" + section const elem = document.getElementById(id) assert(elem， "Javascript:找不到元素id =“+身份证+”,部分= " +部分)返回elem  } /*** * 得到返回的JSON数据对象webhook * *返回(对象)的结果对象从JSON * / const getWebhookData建造  = () => { const生= document.querySelector(“.sg-http-content”)。innerText if (LOG) console.log("raw = "， raw) if (!Raw || Raw [0] !== '{');warning ("The Webhook call didn't return JSON") return {}}const jsonobj = json.parse（RAW）if（log）console.log（“webhook jsonobj =”，jsonobj）if（jsonobj ['status']！==“确定”）{console.error（“webhook status =”，jsonobj ['status']）return {}} return jsonobj ['结果']} / *** *隐藏从WebHook呼叫返回的JSON，以防我们在此页面上显示数据。* / const hidewebhookjson =（）=> {document.queryselector（'sg-http-content'）。classlist.add（'sg-hide'）} / *** *用json data * * prepopmappings预先填充HVA（数组Offopt Of jsonkey以prepop映射到qid *的数据（对象）数据对象由webhook * / const prepop =（prepopmappings，data）=> {prepopmapping.foreach（prepopmapping => {const val = data [prepopmapping.jsonkey] getelembyqid（prepopmapping.qid）.value =（val！==未定义的？val：“”）}）console.log（“完成prepop”）} / *** *检查此页面是否正在显示此页面因为用户点击了以下*页面上的后退按钮。如果是这样，请继续前进。* *返回（t / f）true如果返回，当true呼叫者应该做的任何东西都有更多* / const迁移=（）=> {var ismoving = sgapi.surveydata [object.kys（sgapi.surveydata）[0]]。page_direction === -2 if（！ismovingback）返回false document.querySelector（“#sg_backButton”）。单击（）返回true} / *** * main（）* //传播返回返回if（迁移（））返回hidewebhookjson（）//将数据从webhook响应保存到页面上的元素const data = getwebhookdata（）prepop（preppop_mappings，data）//单击下一步或提交转到下一页，需要前进的半冒号;（document.querySelector（“#sg_nextbutton”）|| Document.QuerySelector（“#sg_submitbutton”））。单击（）}）