How to sort the json data in array when data is not in ordered?

Question

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

is it just by number? e.g. 1.4 is naturally behind 2 and in front of 1 — webduvet, Aug 11 '15 at 08:18
http://stackoverflow.com/questions/881510/sorting-json-by-values — cgee, Aug 11 '15 at 08:19
maybe you change the value of property `number` to a number without dots and assemble the `number` with the parent `number`. — Nina Scholz, Aug 11 '15 at 08:25
I want to sort my data like 1.1 > 1.2 > 1.3 > 1.4 , not by number but by their position in data because the number may be words sometimes — Dreams, Aug 11 '15 at 09:00
in this case (sort by words) i suggest a separated sorting order property. it makes life easier. — Nina Scholz, Aug 11 '15 at 09:11

score 0 · Answer 1 · answered Aug 11 '15 at 08:17

Just sort the data before processing it

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

The | a.level is because one of your data points has level instead of lv.

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

To order your data by number with hierarchy you should simply use sort function:

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

If you keep this element numbering style it is enough to just sort by this property

I recommended to read https://stackoverflow.com/a/979325/4772988

edited May 23 '17 at 12:13

Community

1
1

answered Aug 11 '15 at 08:19

suvroc

3,058
1
15
29

score 0 · Answer 3 · answered Aug 11 '15 at 08:23

Remove the parent elements. Then sort the second level elements by converting your string number to floats and subtracting them from each other.

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

Demo

score 0 · Answer 4 · answered Aug 11 '15 at 11:42

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

How to sort the json data in array when data is not in ordered?

4 Answers4

Linked