个人中心
gpt4 book ai didi

javascript - Node-Red 中函数的输出在 html 中显示为 [object OBJECT]。模板

转载 作者：行者123 更新时间：2023-12-03 02:56:12 35 4
gpt4 key购买 nike

好吧，这是我的第一天......

我正在尝试制作一个小型 Node-Red 应用程序。这可能看起来很愚蠢，但它实际上是我需要做的事情的一个有趣的例子，但不那么幽默。HTTP 输入触发对 Urban Dictionary API 的 HTTP 请求，并抓取术语“Honey Badger”的随机定义。

然后一个函数将字符串分解成碎片并提取实际定义并丢弃所有元垃圾。

然后将该字符串传递到一个模板，该模板在 {{payload}} 行之前和之后包含 HTML 负载，以生成显示 Urban Dictionary 内容的页面，并在每个页面加载时显示随机定义。

我得到了我想要的一切，并且调试模板的输出正在日志中显示 UD 内容，但是在浏览器中我得到的只是 [object OBJECT] 我的文本段落应该在的位置。

据我所知，这是因为该函数输出的是对象，而不是字符串。

我并没有真正完全理解对象是什么。

我以前从未编写过任何 JS 代码，这就是我的起点。

[{"id":"65001585.8c9564","type":"http in","z":"4737d790.fefe58","name":"badger","url":"/Badger","method":"get","upload":false,"swaggerDoc":"","x":76,"y":72,"wires":[["980800c8.6789f","ab39736b.ffbfd"]]},{"id":"980800c8.6789f","type":"http request","z":"4737d790.fefe58","name":"URBAN DICTIONARY","method":"GET","ret":"txt","url":"https://urban.now.sh/random/Honey Badger","tls":"","x":269,"y":106,"wires":[["c0ff5132.822508"]]},{"id":"ab39736b.ffbfd","type":"http response","z":"4737d790.fefe58","name":"http response","x":1016.5551147460938,"y":75.22221374511719,"wires":[]},{"id":"e98c98a8.0a9a28","type":"template","z":"4737d790.fefe58","name":"Template","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<HTML>\n\n\t<HEAD>\n\t\t<TITLE> [ H O N E Y B A D G E R ] </TITLE>\n\t\t<META HTTP-EQUIV=\"refresh\" CONTENT=\"300\">\n<style>\np.minortext\n{\n    font-family: \"Arimo\";\n    color:#A9A9A9\n}\np.majortext\n{\n    font-family: \"Impact\";\n    color:black\n    size:20\n}\n\n</style>\n</head>\n\n\t<BODY>\n\t        <CENTER>\n\t            <Table Width = \"100%\" Bgcolor=\"#A9A9A9\"><TR><TD ALIGN = \"CENTER\">\n\t              <a class=\"weatherwidget-io\" href=\"https://forecast7.com/en/n34d93138d60/adelaide/\" data-font=\"Roboto Slab\" data-mode=\"Current\" data-days=\"3\" data-shadow=\"#000000\" data-accent=\"#000000\" data-textColor=\"#ffffff\" data-highColor=\"#ffffff\" data-lowColor=\"#ffffff\" data-sunColor=\"#ffffff\" data-moonColor=\"#ffffff\" data-cloudColor=\"#ffffff\" data-cloudFill=\"#ffffff\" data-rainColor=\"#ffffff\" data-snowColor=\"#ffffff\" >Adelaide, South Australia, Australia</a>\n<script>\n!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=\"https://weatherwidget.io/js/widget.min.js\";fjs.parentNode.insertBefore(js,fjs);}}(document,\"script\",\"weatherwidget-io-js\");\n</script>\n</td><td align = \"center\">\n\n\n</td>\n\n\n\n</TD><TD ALIGN = \"RIGHT\"><IMG SRC=\"LogIn.PNG\">       </TD></TR></Table>\n\t        <Table Width = \"500\" Height = \"620\" Border = \"0\">\n\t            <TR Width = \"500\" Height = \"320\">\n\t                <TD Width = \"500\" Height = \"320\" VALIGN = \"CENTER\">\n\t\t<CENTER>\n\t\t\t    <FONT SIZE = \"20\">\n                    <p class=\"majortext\">\n                        <IMG SRC=\"HoneyBadger.PNG \" ALT=\"HoneyBadger\"><BR>\n\t\t\t\t        <B>H O N E Y B A D G E R</B>\n\t\t\t        </P>\n\t\t\t    </FONT>\n\t\t\t        </TD>\n\t\t\t     </TR>\n\t\t\t     \t            <TR Width = \"500\" Height = \"300\">\n\t                <TD Width = \"500\" Height = \"300\" VALIGN = \"TOP\">\n\t\t\t<CENTER>\n\t\t\n\t\t\t<p class=\"minortext\">\n\t\t\t    \t\t\t    <FONT SIZE = \"5\">\n\t\t\t    {{{payload}}}\n            </P>\n\t\t</CENTER>\n\t\t    </TD>\n\t\t    </TR>\n\t\t    </TABLE>\n\t\t</CENTER>\n\t</BODY>\n</HTML>\t\t\t    \n\n","output":"str","x":830.0000610351562,"y":108.55557250976562,"wires":[["ad7d02ac.52565","ab39736b.ffbfd"]]},{"id":"ad7d02ac.52565","type":"debug","z":"4737d790.fefe58","name":"","active":true,"console":"true","complete":"payload","x":1013.3883666992188,"y":153.77764892578125,"wires":[]},{"id":"c0ff5132.822508","type":"function","z":"4737d790.fefe58","name":"test","func":"var parts = msg.payload.split(\"definition\");\nvar message1 = { payload: parts[0] };\nvar message2 = { payload: parts[1] };\nvar msg2parts = message2.payload.split(\"URL\");\nvar msgsparts1 = {payload: msg2parts[0]};\nvar msgsparts2 = {payload: msg2parts[1]};\n\n\nreturn msgsparts1;\n","outputs":"1","noerr":0,"x":446.75921630859375,"y":106.75926971435547,"wires":[["e132da2c.78b1a8"]]},{"id":"e132da2c.78b1a8","type":"change","z":"4737d790.fefe58","name":"","rules":[{"t":"change","p":"payload","pt":"msg","from":"\"\"","fromt":"str","to":"","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"\\n","fromt":"str","to":"","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"n\\","fromt":"str","to":"","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":":","fromt":"str","to":"","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"\"\"\"","fromt":"str","to":"","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":".\",\"\"","fromt":"str","to":"","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"\\","fromt":"str","to":"","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"\"","fromt":"str","to":"","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"example","fromt":"str","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":628.8887939453125,"y":107.99996948242188,"wires":[["e98c98a8.0a9a28"]]}]

enter image description here

最佳答案

首先，您需要删除 http-in 和 http-response 节点之间的直接链接，因为这不会向发出请求的浏览器返回任何内容。

下一个问题，要使 http-in/http-response 节点正常工作，您需要将 http-in 节点生成的原始消息一直传递到 http -response 节点。您正在 Test 函数节点中生成一个新消息 (msgsparts1) 对象，这将不起作用。

此外，城市字典的响应是一个 JSON 对象，因此与其尝试使用字符串函数 .split() 将其分割，不如解析 JSON 并访问它的字段要容易得多。您可以通过使用 JSON 节点 解析字符串并使用 更改节点 将描述移至 msg.payload 来完成此操作。

在将消息发送到 http-response 之前，您还需要从 http-request 中删除 header 。您可以使用相同的更改节点

来完成此操作 
[{"id":"72cc29ed.aa819","type":"http in","z":"8aa94366.b8bde","name":"badger","url":"/Badger","method":"get","swaggerDoc":"","x":90,"y":160,"wires":[["2f9e6174.bde466"]]},{"id":"2f9e6174.bde466","type":"http request","z":"8aa94366.b8bde","name":"URBAN DICTIONARY","method":"GET","ret":"txt","url":"https://urban.now.sh/random/Honey Badger","tls":"","x":200,"y":260,"wires":[["5d7d10da.a757d"]]},{"id":"c6b86250.24357","type":"http response","z":"8aa94366.b8bde","name":"http response","x":960,"y":220,"wires":[]},{"id":"5d1bd9d2.9efad8","type":"template","z":"8aa94366.b8bde","name":"Template","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<HTML>\n\n\t<HEAD>\n\t\t<TITLE> [ H O N E Y B A D G E R ] </TITLE>\n\t\t<META HTTP-EQUIV=\"refresh\" CONTENT=\"300\">\n<style>\np.minortext\n{\n    font-family: \"Arimo\";\n    color:#A9A9A9\n}\np.majortext\n{\n    font-family: \"Impact\";\n    color:black\n    size:20\n}\n\n</style>\n</head>\n\n\t<BODY>\n\t        <CENTER>\n\t            <Table Width = \"100%\" Bgcolor=\"#A9A9A9\"><TR><TD ALIGN = \"CENTER\">\n\t              <a class=\"weatherwidget-io\" href=\"https://forecast7.com/en/n34d93138d60/adelaide/\" data-font=\"Roboto Slab\" data-mode=\"Current\" data-days=\"3\" data-shadow=\"#000000\" data-accent=\"#000000\" data-textColor=\"#ffffff\" data-highColor=\"#ffffff\" data-lowColor=\"#ffffff\" data-sunColor=\"#ffffff\" data-moonColor=\"#ffffff\" data-cloudColor=\"#ffffff\" data-cloudFill=\"#ffffff\" data-rainColor=\"#ffffff\" data-snowColor=\"#ffffff\" >Adelaide, South Australia, Australia</a>\n<script>\n!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=\"https://weatherwidget.io/js/widget.min.js\";fjs.parentNode.insertBefore(js,fjs);}}(document,\"script\",\"weatherwidget-io-js\");\n</script>\n</td><td align = \"center\">\n\n\n</td>\n\n\n\n</TD><TD ALIGN = \"RIGHT\"><IMG SRC=\"LogIn.PNG\">       </TD></TR></Table>\n\t        <Table Width = \"500\" Height = \"620\" Border = \"0\">\n\t            <TR Width = \"500\" Height = \"320\">\n\t                <TD Width = \"500\" Height = \"320\" VALIGN = \"CENTER\">\n\t\t<CENTER>\n\t\t\t    <FONT SIZE = \"20\">\n                    <p class=\"majortext\">\n                        <IMG SRC=\"HoneyBadger.PNG \" ALT=\"HoneyBadger\"><BR>\n\t\t\t\t        <B>H O N E Y B A D G E R</B>\n\t\t\t        </P>\n\t\t\t    </FONT>\n\t\t\t        </TD>\n\t\t\t     </TR>\n\t\t\t     \t            <TR Width = \"500\" Height = \"300\">\n\t                <TD Width = \"500\" Height = \"300\" VALIGN = \"TOP\">\n\t\t\t<CENTER>\n\t\t\n\t\t\t<p class=\"minortext\">\n\t\t\t    \t\t\t    <FONT SIZE = \"5\">\n\t\t\t    {{{payload}}}\n            </P>\n\t\t</CENTER>\n\t\t    </TD>\n\t\t    </TR>\n\t\t    </TABLE>\n\t\t</CENTER>\n\t</BODY>\n</HTML>\t\t\t    \n\n","x":780,"y":260,"wires":[["bc66ae55.037f78","c6b86250.24357"]]},{"id":"bc66ae55.037f78","type":"debug","z":"8aa94366.b8bde","name":"","active":true,"console":"true","complete":"payload","x":940,"y":300,"wires":[]},{"id":"5d7d10da.a757d","type":"json","z":"8aa94366.b8bde","name":"","x":390,"y":260,"wires":[["8ecda72f.12eed8"]]},{"id":"8ecda72f.12eed8","type":"change","z":"8aa94366.b8bde","name":"","rules":[{"t":"move","p":"payload.definition","pt":"msg","to":"payload","tot":"msg"},{"t":"delete","p":"headers","pt":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":560,"y":260,"wires":[["e0951766.77e858","5d1bd9d2.9efad8"]]},{"id":"e0951766.77e858","type":"debug","z":"8aa94366.b8bde","name":"","active":true,"console":"false","complete":"false","x":810,"y":180,"wires":[]}]

enter image description here

关于javascript - Node-Red 中函数的输出在 html 中显示为 [object OBJECT]。模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47606707/

35 4 0
文章推荐： javascript - 重新加载页面后在默认
  • 下创建第二个或下一个
  • | jQuery、本地存储
    • 文章推荐： javascript 谷歌地图 setcenter 和 setzoom 带动画
    文章推荐： javascript - 从数组中采样随机子集
    文章推荐： javascript - 使用另一个 JavaScript 对象的值初始化一个 JavaScript 对象
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com