使用 each 和 handlebars 助手对对象键进行排序

Posted 2023-02-26

【中文标题】使用 each 和 handlebars 助手对对象键进行排序

【英文标题】：Sort object keys with each and handlebars helper

【发布时间】：2019-05-29 14:40:45

【问题描述】：

我想对每个对象的键进行排序： test1, test4, test3 => test1, test3, test4 ...

我的 json：

"tests": 
    "chapter1": 
        "test1": 5,
        "test4": 8,
        "test3": 3
    ,
    "chapter2": 
        "test1": 1,
        "test5": 14,
        "test3": 12
     

我的车把代码：

#each tests
    <h1>@key</h1>
    <ul>#eachSorted this<li>this</li>/eachSorted</ul>
/each

我试过了，还是不行：

Handlebars.registerHelper('eachSorted', function(context, options) 
    var ret = ""
    Object.keys(context).sort().forEach(function(key) 
        ret = ret + options.fn(key: key, value: context[key])
    )
    return ret
)

【问题讨论】：

预期输出是什么？

它是 5,3,8 和 1,12,14，我的车把代码在一个 html 列表中。

请注意，标题是“排序数组...”，但您想使用它们的值对对象键进行排序。

@NicoDiz 你是对的。我编辑了我的帖子。

太棒了！我的回答有用吗？

【参考方案1】：

您正在渲染整个对象而不是值。试试这个：

#each tests
    <h1>@key</h1>
    <ul>#eachSorted this<li>this.value</li>/eachSorted</ul>
/each

【讨论】：

感谢您的帮助，但这不会按键值对我的对象进行排序。

会的。您编写的辅助方法将起作用。您只需要更改访问排序值的方式。

天哪，你是对的。对不起！当我想创建第二个具有相同排序但带有键的表时，我没有得到带有 key.value 的输出

如果你想渲染键使用`this.key'

【参考方案2】：

将eachSorted 函数替换为：

var tests = 
    "chapter1": 
        "test1": 5,
        "test4": 8,
        "test3": 3
    ,
    "chapter2": 
        "test1": 1,
        "test5": 14,
        "test3": 12
     
;

function eachSorted(context) 
    var ret = ;
	Object.keys(context)
		.sort()
		.forEach(function(key) 
			ret[key] = context[key];
    );
    return ret;



console.log(eachSorted(tests.chapter1));

另外，在您的 JSON 中，tests 是一个对象。您确定可以将each 应用于对象吗？也许你应该使用一个数组。您可以更改 JSON，也可以创建一个 registerHelper，从值创建一个数组。使用：Object.values(tests)。 希望对您有所帮助。