这里我以vue为例 不过json排序用的js方式 任何前端项目都可以通过js完成
我们组件代码现在是这样的
<template><div><div v-for = "item in navCateList" :key = "item.id">{{ item.name }}</div></div>
</template><script>
export default {data() {return {navCateList: {"activity": {id: 1,name: "活动"},"integral": {id: 2,name: "积分"},"inventory": {id: 3,name: "清单"},"haveUndueDiscussionOverSth": {id: 4,name: "说事"}}};},created() {for(let key in this.navCateList) {console.log(key)}},
};
</script>
运行代码
可以看到 现在的顺序 和我们定义的是一样的
但是 有些时候 我们有一些特殊的排序需求
但我们又不方便动之前的数据 我们就可以定义一个排序的数组来整理json
例如 我们现在要改成
积分 说事 清单 活动
这样的顺序 我们就可以先整理一个这样的数组
这里 我们定义了一个数组 里面存储的是json的key
顺序就是我们之前说的
然后 我们编写代码
this.navCateList = Object.fromEntries(Object.entries(this.navCateList).sort((a, b) => this.arr.indexOf(a[0]) - this.arr.indexOf(b[0]))
)
for(let key in this.navCateList) {console.log(key)
}
我们通过 this.arr 对this.navCateList进行排序
运行之后 我们看json的顺序就很完美了
但这里需要强调 如果你直接用 console.log 在控制台打印整个json
这就会按首字母排序了 会影响大家的判断 所以 建议 看排序 还是 用循环看 因为循环的顺序才是最后渲染到界面的效果
