CODEWITHSUNDEEP
javascriptjqueryhtmlxmlget
User2893
User2893

Reputation: 119

How to sort XML data in an order?

I have a set of the list items that I would like to automatically display from high to low on page load. Ideally using jquery or javascript.

Here is my code.

data.xml

<cd>
  <presantage>10%</presantage>
</cd>
<cd> 
  <presantage>50%</presantage>
</cd>
<cd>
  <presantage>5%</presantage>
</cd>

For display xml data

$(document).ready(function(){
    $.ajax({
        type:"GET",
        url:"data.xml",
        dataType:"xml",
        success:xmlParser2
    });
   });
   function xmlParser2(xml){
    xml = $(xml).children();
    $(xml).children().each(function () {

       let tag = $(this).prop("tagName");
        let presantage = '<div>' + $(this).find("presantage").text() + '</div>';

        let html = '<li>'+ (presantage)+'</li>';

            $(".list").append(html);
    });
}

For order elements

var ul = $(".list:first");
var arr = $.makeArray(ul.children("li"));

arr.sort(function(a, b) {
    var textA = +$(a).text();
    var textB = +$(b).text();

    if (textA < textB) return -1;
    if (textA > textB) return 1;

    return 0;
});

ul.empty();

$.each(arr, function() {
    ul.append(this);
});

html

<ul class="list"></ul>

Plunker

Upvotes: 0

Views: 1546

Answers (2)

Nikhil Vartak
Nikhil Vartak

Reputation: 5117

This is a simple JS (pure) code to get percentages sorted in desc order.

var doc = new DOMParser().parseFromString(xml, "application/xml");
var elements = doc.getElementsByTagName('presantage');
var percentages = [];
for (let i = 0; i < elements.length; i++) {
    percentages.push(parseFloat(elements[i].textContent));
}
percentages.sort((a, b) => b - a); // array [50, 10, 5]

After this you can sort loop over percentages and create your list html.

Note: if you need to sort in ascending order you would do a - b.

Upvotes: 0

amar9312
amar9312

Reputation: 405

Try this: 

 function xmlParser2(xml){
   var obj = {};

xml = $(xml).children();
$(xml).children().each(function () {

    obj[$(this).find("presantage").text().replace('%', '')]  = $(this).find("presantage").text();




});

for(var k in obj ){
    let html = '<li>'+ (obj[k])+'</li>';

    $(".list").append(html);
}

// alert(JSON.stringify(obj)) 
}

Upvotes: 2

Related Questions