当数据不按顺序排列时,如何对数组中的json数据进行排序
How to sort the json data in array when data is not in ordered?
var data = [
{
cid: "59eb15be",
parentCid: "",
lv: 1,
number: "2",
subject: "Title 2"
},
{
cid: "d7d851ef",
parentCid: "",
lv: 1,
number: "4",
subject: "Title4"
},
{
cid: "bd01cc50",
parentCid: "ae35e67d",
lv: 2,
number: "1.1",
subject: "Title1.1"
},
{
cid: "2d8bd8b0",
parentCid: "",
lv: 1,
number: "3",
subject: "Title3"
},
{
cid: "7f66a92d",
parentCid: "ae35e67d",
lv: 2,
number: "1.2",
subject: "Title1.2"
},
{
cid: "ae35e67d",
parentCid: "",
lv: 1,
number: "1",
subject: "Title1"
},
{
cid: "e7c2dbcc",
parentCid: "ae35e67d",
lv: 2,
number: "1.3",
subject: "Title1.3"
},
{
cid: "cc784c42",
parentCid: "ae35e67d",
lv: 2,
number: "1.4",
subject: "Title1.4"
}
];
var chapterListDiv = document.getElementById("listSummary");
var store = document.createDocumentFragment(); //we use this to store temporary orphaned childs
for(var i=0; i<data.length; i++){
var node = document.createElement("div");
node.className = "lv" + (data[i].level || data[i].lv);
var content = document.createTextNode(data[i].number + "." + " " + data[i].subject);
node.appendChild(content);
node.setAttribute("data-id", data[i].cid); //set a data-id attribute. We need it for the orphaned values.
node.setAttribute("data-parent-id", data[i].parentCid); //set a data-parent-id attribute. We need it for the orphaned values.
if (data[i].parentCid == "") //we have a root node
{
chapterListDiv.appendChild(node);
}
else
{
var parent = chapterListDiv.querySelector('div[data-id="'+data[i].parentCid+'"]'); //look for a node with the parent id.
if (parent) //parent is found
{
parent.appendChild(node);
}
else
{
store.appendChild(node); //temp store the node.
}
}
}
//final check
var storeChilds = store.querySelectorAll('div[data-parent-id]');
if (storeChilds)
{
Array.prototype.map.call(storeChilds, function(element){
var parent = document.querySelector('div[data-id="'+element.getAttribute("data-parent-id")+'"]') ||
store.querySelector('div[data-id="'+element.getAttribute("data-parent-id")+'"]')
parent.appendChild(element);
});
}
.lv1 {
}
.lv2{
padding-left: 30px;
}
.lv3{
padding-left: 30px;
}
<div id="listSummary"></div>
在json数据中,所有项都有一个"cid",其中一些项有"parentCid",这意味着它是它的子级。(
作为第二级结果
1.3. Title1.3
1.4. Title1.4
1.1. Title1.1
1.2. Title1.2
这不是顺序,因为"1.1"answers"1.2"在循环中访问时找不到其父节点,因为它们的父节点在后面。所以这就是为什么"1.3"answers"1.4"被首先附加(父节点在前面(。
有没有什么方法可以像下面这样正确地获得第二级的结果?
1.1. Title1.1
1.2. Title1.2
1.3. Title1.3
1.4. Title1.4
只需在处理之前对数据进行排序
data.sort(function(a, b) {
if ((a.lv | a.level) > (b.lv | b.level))
return 1;
else if ((a.lv | a.level) < (b.lv | b.level))
return -1;
else {
if (Number(a.number) > Number(b.number))
return 1;
else
return -1;
}
});
| a.level
是因为您的一个数据点具有level
而不是lv
。
要按数字和层次结构对数据进行排序,只需使用排序函数:
data.sort(function(a, b) {
return a.number > b.number
});
如果你保持这种元素编号样式,只需按这个属性排序就足够了
我推荐阅读https://stackoverflow.com/a/979325/4772988
删除父元素。然后,通过将字符串编号转换为浮点数并将它们彼此相减,对二级元素进行排序。
var data_sorted = data.filter(function(value, index){
return value.parentCid != "";
}).sort(function(value1, value2){
return parseFloat(value1.number) - parseFloat(value2.number);
});
演示
具有Array.filter()
、Array.sort()
和Array.forEach()
的解决方案:
var data = [{ cid: "59eb15be", parentCid: "", lv: 1, number: "2", subject: "Title 2" }, { cid: "d7d851ef", parentCid: "", lv: 1, number: "4", subject: "Title4" }, { cid: "bd01cc50", parentCid: "ae35e67d", lv: 2, number: "1.1", subject: "Title1.1" }, { cid: "2d8bd8b0", parentCid: "", lv: 1, number: "3", subject: "Title3" }, { cid: "7f66a92d", parentCid: "ae35e67d", lv: 2, number: "1.2", subject: "Title1.2" }, { cid: "ae35e67d", parentCid: "", lv: 1, number: "1", subject: "Title1" }, { cid: "e7c2dbcc", parentCid: "ae35e67d", lv: 2, number: "1.3", subject: "Title1.3" }, { cid: "cc784c42", parentCid: "ae35e67d", lv: 2, number: "1.4", subject: "Title1.4" }];
// this is the place for your tree generating function
function print(a, l) {
var ll = l;
while (ll--) document.write(' ');
document.write('Computed level: ' + l + ' ');
Object.keys(a).forEach(function (i) {
document.write(i + ': ' + a[i] + ' ');
});
document.write(''n')
}
function getChildren(parent, level) {
data.filter(function (a) {
return a.parentCid === parent;
}).sort(function (a, b) {
return a.number.localeCompare(b.number);
}).forEach(function (a) {
print(a, level);
getChildren(a.cid, level + 1);
});
}
document.write('<pre>');
getChildren('', 0);
document.write('</pre>');
相关文章:
- 使用数据数组创建多个类似组件
- WebAudio API数据数组大小
- Jquery 循环一次或在数据数组中显示一次数据
- Cakephp 访问不在模型数据数组上的输入
- 使用来自 Ajax 响应的 JSON 数据数组
- Angular JS(离子)数据数组到$scope元素
- handontable:在不更改数据数组/对象的情况下隐藏某些列
- 如何使用for循环语句通过Ajax发送大数据数组
- 压缩 JS 中的数据数组
- 传递的参数D3提示回调是完整的数据数组
- 如何在数据数组的每次迭代中创建一个内容为“i+1”的新 HTML 元素
- 在 laravel 4 上使用循环将数据数组存储到单个数组中
- 为什么它说输入数据数组的格式不正确 jqchart.
- Javascript - 使用变量 RegExp 匹配数据数组中的多个关键字
- 尝试将数据数组设置为从视图调用函数后$scope
- 如何在 PHP 中创建 jqplot 数据数组
- 如何使用该数据数组从左向右移动画布
- 如何根据数字列从 Parse 中对数据数组进行排序
- 为什么 php json 响应不会将数据数组发送回 ajax jquery 请求
- 如何将内容添加到 JQuery Flot 图表数据数组工具提示