How to sort values from json array follow ul,li

Question

I have a json string. How to sort attribute values from this json follow ul,li html?

[{"id":1},
 {"id":2,"children":[{"id":3},
                     {"id":4},
                     {"id":5,"children":[{"id":6},
                                         {"id":7},
                                         {"id":8}
                    ]
 },
 {"id":9},
 {"id":10,"children":[{"id":11,"children":[{"id":12}]}]}]}
]

var jsonObject = JSON.parse(jsonString); And get values from the object — freethinker, Apr 26 '15 at 07:33

Anto S · Accepted Answer · 2015-04-26T08:49:53.273

try below

    <!DOCTYPE html>
<html>
<title>Stack jQuery</title>
<link rel="stylesheet" href="../repo/css/bootstrap.css" type="text/css" />
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="../repo/js/bootstrap.js"></script>
<script src="../repo/js/jquery.validate.js"></script>
<head></head>
<body>
<div class="showResult">
</div>

<script>
  var data = [{"id":1},{"id":2,"children":[{"id":3},{"id":4},{"id":5,"children":[{"id":6},{"id":7},{"id":8}]},{"id":9},{"id":10,"children":[{"id":11,"children":[{"id":12}]}]}]}]

    var htmlElem = '<ul>';
  $.each(data, function(key, value){
  htmlElem += '<li>'+value.id
  if(typeof(value.children) != "undefined" && typeof(value.children) == 'object'){
    htmlElem += '<ul>'+extractElements(value.children)+'</ul>'
  }
   htmlElem += '</li>';

    $('.showResult').html(htmlElem);
  });
    htmlElem += '</ul>';

    function extractElements(data){
            var childElem = '';
            $.each(data, function(ke, value){
                if(value.id != 'undefined') {
                    childElem += '<li>'+value.id
                        if(typeof(value.children) != 'undefined' && typeof(value.children) == 'object'){
                            childElem += '<ul>'+extractElements(value.children)+'</ul>';
                        }
                    childElem += '</li>';
                }

            });
            return childElem;
    }
  </script>
</body>
</html>

refer @Tushar anwer, check whether the value is object or not. If it is object do $.each .. Steps once again — Anto S, Apr 26 '15 at 07:46
@LêPhướcTrung, in your case it goes like a nested.. So take a basic concept from my answer and customize it accordingly. Or give some time, i will do that — Anto S, Apr 26 '15 at 08:30
@LêPhướcTrung please take my updated code. I solved undefined issue also, if it works fine please accept the answer — Anto S, Apr 26 '15 at 08:50

score 0 · Answer 2 · answered Aug 12 '15 at 07:50

Here is my solution based on a url-tree:

var treeArray;
var out = "<ul>";

treeArray = [
{"display":"feedly","url":"http://feedly.com/index.html#latest","target":"jbi","titel":""},
{"display":"JBI","url":"","target":"","titel":"","children":[
{"display":"jbi-weisendorf","url":"http://www.jbi-weisendorf.de","target":"","titel":""},
{"display":"STRATO Communicator","url":"https://communicator.strato.com/ox6/ox.html","target":"","titel":""},
{"display":"essentialpim","url":"http://www.essentialpim.com/de/new-version-check","target":"","titel":""},
{"display":"Tools","url":"","target":"","titel":"","children":[
{"display":"quintly: Professional Social Media Analytics","url":"https://www.quintly.com/","target":"","titel":""},
{"display":"buzzsumo: find the most shared content for any topic or domain","url":"https://app.buzzsumo.com/top-content","target":"","titel":""}
]}
]}
]   

 treeArray.sort(dynamicSort("display"));
 genTree(treeArray);
 out += '</ul>';
       
 console.log('out => ' + out);
      
 document.getElementById("easy-tree-jbi").innerHTML = out;

 function dynamicSort(property) {
  var sortOrder = 1;
  if(property[0] === "-") {
   sortOrder = -1;
   property = property.substr(1);
  }
  return function (a,b) {
   var result = (a[property].toLowerCase() < b[property].toLowerCase()) ? -1 : (a[property].toLowerCase() > b[property].toLowerCase()) ? 1 : 0;
   return result * sortOrder;
  }
 }
   
 function genTree(arr) {
  var i;
  for (i = 0; i < arr.length; i++) {
   if (arr[i].url === "") 
   {
    if (arr[i].children) 
    {
     arr[i].children.sort(dynamicSort("display"));
     out += '<li>' + arr[i].display + '<ul>';
     genTree(arr[i].children);
     out += '</ul></li>';
    } 
   } else {
    out += '<li><a href="' + arr[i].url + '" target="' + arr[i].target + '" titel="' + arr[i].titel + '">' + arr[i].display + '</a></li>';
   }
  }
 }

<div id="easy-tree-jbi" class="easy-tree" style="overflow-y: auto;"> </div>

How to sort values from json array follow ul,li

2 Answers2