There is two arrays that display information appending elements to the document. They are being printed in ascending order, but when it comes to organize them all, I can’t organize them individually by data attribute.
This function does the sort but can’t mix different element classes:
$.fn.sortRaffles = function () { this .children() .sort((a, b) => $(a).data("order") - $(b).data("order") || -1) .appendTo(this); return this; } $(".lista ul").sortRaffles();
Before the above code this is where I print the two different element classes (avaibleRaffle and reservedRaffle) using arrays of string and filtering them to display the correct result.
const nums = Array.from({ length: 11 }, (_, i) => `${i}`.padStart(3, "0")); const customers = [ { number: "002" }, { number: "6003" }, { number: "1010" }, { number: "008,005,007,0002" } ]; const reserved_nums = nums.filter( (s) => !customers.some((o) => o.number.includes(s)) ); const avaible_nums = nums.filter((s) => customers.some((o) => o.number.includes(s)) ); var avaibleRaffle = $(); $.each(avaible_nums, function (index, value) { avaibleRaffle = avaibleRaffle.add( '<span class="btn btn-success btn_reservas data-order="' + value + '" >' + value + "</span>" ); }); $(".lista ul li").append(avaibleRaffle); var reservedRaffle = $(); $.each(reserved_nums, function (index, value) { reservedRaffle = reservedRaffle.add( '<span class="btn btn-warning btn_pagos data-order="' + value + '" >' + value + "</span>" ); }); $(".lista ul li").append(reservedRaffle);
The a minimal reproducible example:
/* eslint-env jquery */ const nums = Array.from({ length: 11 }, (_, i) => `${i}`.padStart(3, "0")); const customers = [ { number: "002" }, { number: "6003" }, { number: "1010" }, { number: "008,005,007,0002" } ]; const reserved_nums = nums.filter( (s) => !customers.some((o) => o.number.includes(s)) ); const avaible_nums = nums.filter((s) => customers.some((o) => o.number.includes(s)) ); var avaibleRaffle = $(); $.each(avaible_nums, function (index, value) { avaibleRaffle = avaibleRaffle.add( '<span class="btn btn-success btn_reservas data-order="' + value + '" >' + value + "</span>" ); }); $(".lista ul li").append(avaibleRaffle); var reservedRaffle = $(); $.each(reserved_nums, function (index, value) { reservedRaffle = reservedRaffle.add( '<span class="btn btn-warning btn_pagos data-order="' + value + '" >' + value + "</span>" ); }); $(".lista ul li").append(reservedRaffle); $.fn.sortRaffles = function () { this.children() .sort((a, b) => $(a).data("order") - $(b).data("order") || -1) .appendTo(this); return this; }; $(".lista ul li span").sortRaffles(); console.log("Desired Order:", JSON.stringify(nums)); console.log("Avaible:", JSON.stringify(avaible_nums)); console.log("Reserved:", JSON.stringify(reserved_nums));
.lista ul li { display: inline; } .lista ul li span { border-radius: 50%; width: 100%; max-width: 40px; height: auto; margin: 3px; padding: 6px; }
<html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" /> <link type="text/css" rel="stylesheet" href="src/styles.css" /> </head> <body> <div class="lista"> <ul> <li> <span></span> </li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="src/index.js"></script> </body> </html>
Advertisement
Answer
Since I couldn’t resolve this problem of printing in ascending order the numbers after validating it with sort. Besides the collaboration, I came with a solution that is only using forEach for comparison of arrays:
nums.forEach(function (value) { if (avaibleNumbers.indexOf(value) != -1) { var av = avaibleNumbers.indexOf(value); console.log(avaibleNumbers[av]); } else if (reservedNumbers.indexOf(value) != -1) { var rs = reservedNumbers.indexOf(value); console.log(reservedNumbers[rs]); } });