如何在Node.js的Jade视图中显示原始数组至文本框或文本域？

嘿，我完全懂你遇到的这个糟心问题——在Node.js的Jade视图里，想把嵌套数组原样输出到文本框或文本域，结果却变成了一串扁平的字符串，完全丢了原来的数组结构。别慌，这是Jade的默认行为，咱们用两种简单方法就能搞定：

方法1：用JSON.stringify()完整保留数组结构 #

Jade会自动迭代数组元素并拼接成字符串，那我们就先把整个数组转换成标准的JSON字符串，这样就能完美保留嵌套结构。记得用不转义输出语法!=，不然引号会被转成"这类HTML实体，显示就乱了：

针对Textarea的写法： #

textarea
  != JSON.stringify(yourArray)

针对Textfield（input文本框）的写法： #

input(type="text" value!=JSON.stringify(yourArray))

拿你的示例数组来说，经过JSON.stringify()处理后会变成：

[["Anil","Wed Apr 11 2018 13:58:11 GMT+0000 (UTC)", "Morning"],["Anil","Wed Apr 11 2018 13:58:11 GMT+0000 (UTC)", "Morning"],["Anil","Wed Apr 11 2018 13:58:11 GMT+0000 (UTC)", "Morning"]]

这个字符串会完完整整显示在文本框/域里，和你想要的原始数组结构一模一样。

方法2：手动拼接数组格式（不推荐，仅作参考） #

要是你不想用JSON格式，也可以手动拼接数组字符串，但这种写法繁琐还容易出错，不如第一种方法省心：

textarea
  != '[' + yourArray.map(item => '[' + item.map(str => `"${str}"`).join(',') + ']').join(',') + ']'

为啥会出现扁平化问题？ #

其实是Jade的默认逻辑导致的：它处理数组时会自动遍历每一个元素，把元素直接输出到页面。对于二维数组，它会先遍历外层的子数组，再遍历子数组里的每个元素，最后把所有元素拼接成无结构的字符串——这就是你看到的扁平化结果。而JSON.stringify()把整个数组变成了单个字符串，Jade就不会再去迭代它了。

内容的提问来源于stack exchange，提问作者Anil Yadav