如何使用mustache呈现JSON模板

9nvpjoqh  于 2023-02-26  发布在  其他
关注(0)|答案(5)|浏览(181)

我正在尝试使用以下模板生成一个带有mustache的JSON文件:

{
    "name": "{{customer_info.first_name}}",
    "email": "{{contact_info.email}}",
    "campaign": {
        "campaignId": "{{contact_info.campaign.campaignId}}"
    },
    "tags": [
        {{#contact_info.tags}} 
        {
            "tagId": "{{tagId}}"
        },
        {{/contact_info.tags}}
    ]
}

作为输出示例,我得到:

{
    "name": "Antonio",
    "email": "myemail@gmail.com",
    "campaign": {
        "campaignId": "pfft"
    },
    "tags": [
        {
            "tagId": "6prrtAP"
        },
        {
            "tagId": "64rrrE9"
        },
    ]
}

不幸的是,这是一个格式错误的JSON,因为在数组的最后一个元素后面有一个不想要的“”。
你们谁能帮我解决这个问题,去掉逗号?
多谢了

nsc4cvqm

nsc4cvqm1#

尝试使用SelectTransformnpm包,它具有类似于Mustache的语法,没有Mustache产生的所有副作用,包大小也没有Handlebars.js那么大

import ST from "stjs";
 
const data = {
  name: 'Jakub',
  friends: [
    {
      name: 'Michal'
    }
  ]
};
 
const template = {
  newName: '{{ name }}',
  friends: {
    '{{ #each friends }}': {
      subName: '{{ name }}'
    }
  }
};
 
console.log(ST.select(data).transformWith(template).root());
 
// Result:
/**
 * {
 *   "newName": "Jakub",
 *   "friends": [
 *     {
 *       "subName": "Michal"
 *     }
 *   ]
 * }
 */
pkmbmrz7

pkmbmrz72#

我会这样做:

var md = {};
var tagsCount = 2;
var currTagIndex = 0;
md['show_comma'] = function(){
    currTagIndex++;
    return currTagIndex <= tagsCount;
}

然后在Mustache模板中:

{{#show_comma}}
,
{{/show_comma}}
7cwmlq89

7cwmlq893#

我也遇到过类似的问题,我发现Handlebars和mustache很相似,而且功能更强大。
您可以 checkout 该模板并尝试使用该模板来解决您的问题,而无需向当前模型添加任何内容。

{
    "name": "{{customer_info.first_name}}",
    "email": "{{contact_info.email}}",
    "campaign": {
        "campaignId": "{{contact_info.campaign.campaignId}}"
    },
    "tags": [
        {{#each contact_info.tags}} 
        {
            "tagId": "{{tagId}}"
        }{{#unless @last}},{{/unless}}
        {{/each}}
    ]
}
2skhul33

2skhul334#

不要从文本模板生成JSON。你会经常遇到这样的问题。多余的逗号,字符串中的 meta字符(如果customer_info.first_name包含双引号会怎么样),无法正确嵌套结构等等。
将数据生成为编程语言中的本机结构,并使用编程语言提供的库将其编码为JSON。
但是,如果确实需要,可以尝试在模板外生成尽可能多的JSON数据(理想情况下,生成自包含的JSON片段),然后将其插入模板内。

let contact_info = {"tags": [ "6prrtAP", "64rrrE9" ]}
let tags = contact_info.tags.map((tag) => ({"tagId": tag})); // [{tagId: "6prrtAP"}, {tagId: "64rrrE9"}]
let tagsJSON = JSON.stringify(tags); // "[{\"tagId\":\"6prrtAP\"},{\"tagId\":\"64rrrE9\"}]"

然后,将tagsJSON传递给模板:

{
    "name": "{{customer_info.first_name}}",
    "email": "{{contact_info.email}}",
    "campaign": {
        "campaignId": "{{contact_info.campaign.campaignId}}"
    },
    "tags": {{tagsJSON}}
}

这样,tagsJSON总是包含有效的JSON编码数据,因此它可以安全地作为JSON字典/对象中的一个值进行插值。即使标记列表为空,即使标记ID突然开始包含需要转义的字符等。

rxztt3cl

rxztt3cl5#

这看起来是一个很好的答案:

contact_info['tags'][ contact_info['tags'].length - 1 ].last = true;

模板应该是

{{#contact_info.tags}} 
{
   "tagId": "{{tagId}}"
} {{^last}}, {{/last}}
{{/contact_info.tags}}

来源:https://stackoverflow.com/a/7591866

相关问题