数据未排序时如何对数组中的json数据进行排序？

Posted 2023-03-05

【中文标题】数据未排序时如何对数组中的json数据进行排序？

【英文标题】：How to sort the json data in array when data is not in ordered?

【发布时间】：2015-11-03 08:41:13

【问题描述】：

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”和“1.2”在循环访问时找不到它们的父节点，因为它们的父节点在它们后面。 这就是为什么要先追加“1.3”和“1.4”（父节点在前面）。

有没有什么方法可以正确地产生如下第二级的结果？

1.1. Title1.1
1.2. Title1.2
1.3. Title1.3
1.4. Title1.4

【问题讨论】：

所以基本上你想按数字和级别对数据进行排序？

只是数字吗？例如1.4自然在2的后面，1的前面

***.com/questions/881510/sorting-json-by-values

也许您将属性number 的值更改为不带点的数字并将number 与父number 组装在一起。

我想对我的数据进行排序，例如 1.1 > 1.2 > 1.3 > 1.4 ，不是按数字而是按它们在数据中的位置，因为数字有时可能是单词

【参考方案1】：

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>');

【参考方案2】：

移除父元素。然后通过将您的字符串数字转换为浮点数并将它们彼此相减来对二级元素进行排序。

var data_sorted = data.filter(function(value, index)
    return value.parentCid != "";
).sort(function(value1, value2)
    return parseFloat(value1.number) - parseFloat(value2.number);
);

Demo

【参考方案3】：

要按层次结构的数字对数据进行排序，您只需使用排序功能：

data.sort(function(a, b) 
    return a.number > b.number
);

如果你保持这个元素编号样式，只需要按这个属性排序就足够了

我推荐阅读https://***.com/a/979325/4772988

【参考方案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。