我意识到这是一个 5 年前的问题,但我想,我会在其中添加我的想法,以防有人遇到类似的用例并发现这很有用。
您想要展平 JSON 对象的用例之一是通过正则表达式 (RegEx) 字符串插值进行动态模板绑定。那不是一口??吗?它只是转换为“模板填充字符串而不进行硬编码”。
好吧,想象一个场景,你有一个像这样的电子邮件模板字符串:
Hello {{firstName}},
It is amazing you chose to join our site. We are happy to have you on board.
To get started, we would really love it if you can confirm your email address
by clicking on the link: {{confirm_url}}.
Welcome aboard
The Team!
给定内存中的以下 JSON 对象:
{
"user" : {
"prefix" : "Dr.",
"firstName" : "Awah",
"lastName" : "Teh",
"email" : "awah@superduperubercoolsite.com",
"address" : {
"street": "100 Main St",
"city" : "PleasantVille",
"state" : "NY",
"phone" : "+1-212-555-1212"
}
},
"meta" : {
"confirm_url" : "http://superduperubercoolsite.com/confirm/ABC123"
}
}
像这样进行正则表达式替换似乎超级简单(假设我们的电子邮件模板字符串存储在名为 template 的变量中,而 json 对象存储在名为 templateData 的变量中:
template = template.replace(new RegExp('{{firstName}}', 'g'), templateData.user.firstName);
template = template.replace(new RegExp('{{confirm_url}}', 'g'), templateData.meta.confirm_url);
简单吧? --> 其实是的!这封电子邮件有 10 个模板化字段怎么样,或者您想将模板与代码分离,方法是将其存储在像 SendGrid 这样的单独系统中,您的营销主管可以在其中访问模板并更改复制语言,而无需不得不打电话给工程部门的人来更改代码、测试代码并重新部署到生产环境(太麻烦了)。
这正是 JSON 扁平化的关键所在!
现在有很多方法可以展平 JSON,我有 attached a link to a codepen 我写的具有展平 JSON 的逻辑(实际上,我在 flattenJSONIntoKVP 和 flattenJSONIntoRAW 方法中演示了两种相似但不同的方法@看看! )。
也就是说,还有其他实现,值得记住的是,这篇文章的重点是讨论 为什么 JSON 扁平化可能有用,而不是 如何强>。
继续!假设您将上面的 JSON(使用我的实现键值对)展平为如下所示:
[
{ "key": "user.prefix", "value": "Dr."},
{ "key": "user.firstName", "value": "Awah"},
{ "key": "user.lastName", "value": "Teh"},
{ "key": "user.email", "value": "awah@superduperubercoolsite.com"},
{ "key": "user.address.street", "value": "100 Main St"},
{ "key": "user.address.city", "value": "{PleasantVille"},
{ "key": "user.address.state", "value": "NY"},
{ "key": "user.address.phone", "value": "+1-212-555-1212"},
{ "key": "meta.confirm_url", "value": "http://superduperubercoolsite.com/confirm/ABC123"},
]
现在,我的朋友,你正在用 GAS 做饭!
为什么,因为现在您可以使用来自 JSON 对象的值动态地interpolate 模板字符串,而不必过多担心 JSON 的结构(如果它由于应用程序的发展而改变,您不必也记得来这里更改此插值代码 - 您只需更新电子邮件模板本身,请注意,它位于 SendGrid [per this example]上)。
那么你说怎么做?:简单,迭代。假设从上面展平的内容存储在一个名为 flatJSON 的变量中:
///Notice how I use Javascripts native string interpolation to create my RegExp
///Also note that I am replacing the dot (.) in my flattened JSON variable names with a double underscore (__), I only do this because my intended target is SendGrid, and I don't believe it likes dots in its template placeholders.
flatJSON.forEach(kvp=>template = template.replace(new RegExp(`{{${kvp.key.replace(/\./g, '__'}}}`, 'g'), kvp.value));
就是这样,一行代码可以替换可能 10 甚至数百甚至数千(好吧..也许不是数千,但你明白了)。
哦!差点忘了,我们需要更新我们的模板字符串。
注意现在,在我们的新模板化字符串中,我们可以使用某种 FQDN 样式的变量来映射回我们的原始 JSON(理想情况下,如果 SendGrid 在其模板占位符中支持点,这看起来会非常好,但唉,不能总是赢得一切!?。
Hello {{user__firstName}},
It is amazing you chose to join our site. We are happy to have you on board.
To get started, we would really love it if you can confirm your email address
by clicking on the link: {{meta__confirm_url}}.
Welcome aboard {{user__prefix}} {{user__lastName}}!
The Team!
瞧瞧!
就这样,我们今天在这里完成了一些好事;我们有:
- 回答了扁平化 JSON 对象的原因
- 我们通过codepen example 深入了解了方法
- 我们甚至概述了一个用例,其中利用 JSON 扁平化可以帮助您编写持久的动态代码,随着您的底层对象结构的变化而发展——这并不需要您利用丑陋的大丑
eval方法(我们可以在另一篇文章中讨论大坏丑 eval)。