当数据不是有序的时，如何排序数组中的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 1}，{cid：2d8bd8b0，parentCid：，lv：1，number：3，subject：Title3}，{cid：7f66a92d，parentCid：ae35e67d，lv： 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 ：Title1.4}]; var chapterListDiv = document.getElementById（listSummary）; var store = document.createDocumentFragment（）; //我们使用它来存储临时孤立的子对象（var i = 0; i  

  .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。标题1.4 
  

解决方案 Array.filter（）， Array.sort（）和 Array.forEach（） ：

  var data = [{cid：59eb15be，parentCid：，lv：1，number：2主题：Title4}，{cid：bd01cc50，parentCid：ae35e67d，lv：title2}，{cid：title 2}，{cid：d7d851ef，parentCid： 2，number：1.1，subject：Title1}，{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：主题：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}]; //这是你的树生成函数的地方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（'\\\
'）} function getChildren（parent，level）{data.filter（function（a）{return a.parentCid === parent;}）。 a.number.localeCompare（b.number）;}）。forEach（function（a）{print（a，level）; getChildren（a.cid，level +1）;}）;} document.write（' pre / gt;'）; getChildren（''，0）; document.write（'< / pre>'）;  

p>

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>

In json data, all item has a "cid" and some of them has "parentCid" which mean it is the child level of it.)

As second level of result

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

This is not order because "1.1" and "1.2" cannot find their parent node when access in loop because their parent node is behind them. So that is why "1.3" and "1.4" being append first(parent node is ahead).

Is there any way that can have result correctly like below for second level?

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

解决方案

Solution with Array.filter(), Array.sort() and 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>');

这篇关于当数据不是有序的时，如何排序数组中的json数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！