How to sort div data in descending order

Question

I have a div that shows the percentage of the particular color. I want to sort the div percentage in descending order. How to proceed? Below is my code

function displayLegend() {
   for (var key in colorVariable1) {
      let percentage = (countVariable1[key] / totalPCICount) * 100; 
      if(percentage) {
          percentage = percentage.toFixed(2);
      }
      var line = document.createElement("div");
      line.innerHTML = '<span class="box"  style=" background: ' + colorVariable1[key] + ';"></span><span>' + key + '(' + percentage + '%)</span>';
      document.getElementById("legendInfo").appendChild(line);
   }
}

Below is the image.I want to sort the percentage part.

enter image description here

Where is the data coming from? I would suggest sorting the data that generates the `div`s — Alan Friedman, Nov 25 '19 at 12:48
First sort the data and then generate your div that will it auto sorted. If you can't sort data at source then may be sort it on front-end with jquery or implement sort method of your own. — Govind Mantri, Nov 25 '19 at 12:49
please edit your question and show the information correctly — Alberto Sinigaglia, Nov 25 '19 at 12:50
You can try using a CSS approach, as suggested here: https://stackoverflow.com/a/28159766/5334389. order value for each div should be an integer, that you can easily calculate as `Math.floor(percentage * 1000)`. It is not the best approach, but it can be done without preprocessing the array. — Nicola Lepetit, Nov 25 '19 at 13:06
@Priyanka I know it is not a good solution, but the code snippet works even with non sequential order values. — Nicola Lepetit, Nov 25 '19 at 13:58

score 1 · Answer 1 · answered Nov 25 '19 at 13:35

You probably need to store your data first in a structured form, to be able to sort it.

I've re-written your sample to show my idea - untested.

var values = []; // holder for rows

for (var key in colorVariable1) {
    let percentage = (countVariable1[key] / totalPCICount) * 100; 
    if(percentage) {
        percentage = percentage.toFixed(2);
    } else {
        percentage = 0;
    }

    // row definition
    let entry = {
        value: percentage,
        html: '<span class="box"  style=" background: ' + colorVariable1[key] + ';"></span><span>' + key + '(' + percentage + '%)</span>';
    }

    values.push(entry); // add row to holder
 }

// sort rows in holder by value (percentage)
// see: https://stackoverflow.com/questions/979256/sorting-an-array-of-objects-by-property-values
values.sort(function(a, b) {
    return parseFloat(b.value) - parseFloat(a.value);
});

// add sorted lines
for(var i in values){
    var line = document.createElement("div");
    line.innerHTML = values[i].html;
    document.getElementById("legendInfo").appendChild(line);    
}

score 1 · Answer 2 · answered Nov 25 '19 at 14:02

Try this..

// Assummed sample data
var colorVariable1 = {302:"red", 156:"green", 89:"blue", 176:"orange"};
var countVariable1 = {302:30, 156:56, 89:71, 176:89};
var totalPCICount = 75;

function displayLegend() {

    var percentages = {};
    for (var key in colorVariable1) {
        let percentage = (countVariable1[key] / totalPCICount) * 100;
        percentages[key] = percentage.toFixed(2);
    }
    var sorted = Object.keys(percentages)
        .sort(function(a, b) {
            return (+percentages[a]) - (+percentages[b])
        });
    for (var key of sorted) {
        var line = document.createElement("div");
        line.innerHTML = '<span class="box" style="background-color:' + colorVariable1[key] +
            ';"></span><span>' + key + '(' + percentages[key] + '%)</span>';
        document.getElementById("legendInfo").appendChild(line);
    }
}

.box {
  width: 5px;
  height: 5px;
  padding: 5px;
}

<button onclick="displayLegend()">click</button>
  <div id="legendInfo"></div>

How to sort div data in descending order

2 Answers2