Adding elements in increasing order based on the array values

I am implementing selectize.js, where the data is added through an array. My goal is to display the dropdown list in the order of DISPLAYORDER defined within the object.

The code below generates the lists:

option: function(item, escape) {
    var popular = escape(item.ISPOPULAR) == 1 ? ' '+'isPopular' : '';
    return '<div class="option'+popular+'" data-scope="'+escape(item.TRAVELSCOPE)+'">' + item.COUNTRY + '</div>';
}

https://i.sstatic.net/VHjd3.jpg

var countries_list = [ 
    {COUNTRY: "Canada", TRAVELSCOPE: 0, ISPOPULAR: 1, DISPLAYORDER: 2},
    {COUNTRY: "Thailand", TRAVELSCOPE: 3, ISPOPULAR: 1, DISPLAYORDER: 3},
    {COUNTRY: "Australia", TRAVELSCOPE: 1, ISPOPULAR: 1, DISPLAYORDER: 5},
    {COUNTRY: "Switzerland", TRAVELSCOPE: 2, ISPOPULAR: 1, DISPLAYORDER: 4},
    {COUNTRY: "United Kingdom (UK)", TRAVELSCOPE: 1, ISPOPULAR: 1, DISPLAYORDER: 6},
    {COUNTRY: "Singapore", TRAVELSCOPE: 3, ISPOPULAR: 1, DISPLAYORDER: 7},
    {COUNTRY: "Indonesia", TRAVELSCOPE: 3, ISPOPULAR: 1, DISPLAYORDER: 8},
    {COUNTRY: "Malaysia", TRAVELSCOPE: 3, ISPOPULAR: 1, DISPLAYORDER: 9},
    {COUNTRY: "Germany", TRAVELSCOPE: 2, ISPOPULAR: 1, DISPLAYORDER: 11},
    {COUNTRY: "South korea", TRAVELSCOPE: 3, ISPOPULAR: 0, DISPLAYORDER: 0},
    {COUNTRY: "USA", TRAVELSCOPE: 0, ISPOPULAR: 1, DISPLAYORDER: 1},
    {COUNTRY: "Iraq", TRAVELSCOPE: 3, ISPOPULAR: 0, DISPLAYORDER: 0},
    {COUNTRY: "Afghanistan", TRAVELSCOPE: 3, ISPOPULAR: 0, DISPLAYORDER: 0},
    {COUNTRY: "Albania", TRAVELSCOPE: 1, ISPOPULAR: 0, DISPLAYORDER: 0},
    {COUNTRY: "Italy", TRAVELSCOPE: 2, ISPOPULAR: 1, DISPLAYORDER: 10},
    {COUNTRY: "Algeria", TRAVELSCOPE: 1, ISPOPULAR: 0, DISPLAYORDER: 0}
];

$('#select-countries').selectize({
    hideSelected:false,
    preload:true,
    selectOnTab:true,
    plugins: ['remove_button'],
    valueField: 'COUNTRY',
    labelField: 'COUNTRY',
    searchField: 'COUNTRY',
    options:countries_list,
    openOnFocus: true,
    render: {
        item: function(item, escape) {
            return '<div class="item" data-scope="'+escape(item.TRAVELSCOPE)+'" data-value="'+escape(item.COUNTRY)+'">' + item.COUNTRY + '</div>';
        },
        option: function(item, escape) {
            var popular = escape(item.ISPOPULAR) == 1 ? ' '+'isPopular' : '';
            return '<div class="option'+popular+'" data-scope="'+escape(item.TRAVELSCOPE)+'">' + item.COUNTRY + '</div>';
        }
    },
});
<link href="https://selectize.github.io/selectize.js/css/selectize.default.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://selectize.github.io/selectize.js/js/selectize.js"></script>

<select id="select-countries" name="countires[]" multiple class="demo-default" placeholder="Type countries...">
  <option value="">type in here...</option>
</select>

javascriptarrayssortingselectize.js

Answer №1

Before utilizing selectize, ensure to arrange your countries_list in the following manner:

countries_list.sort((a,b) => a.DISPLAYORDER && b.DISPLAYORDER
   ? a.DISPLAYORDER - b.DISPLAYORDER 
   : a.DISPLAYORDER ? -1 : 0)

Your code should appear as follows:

$('#select-coutries').selectize({
    options: countries_list.sort((a,b) => a.DISPLAYORDER && b.DISPLAYORDER
      ? a.DISPLAYORDER - b.DISPLAYORDER 
      : a.DISPLAYORDER ? -1 : 0),
    // ... additional configuration for selectize
});

You can view the operational version here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for extracting only the filename from chokidar instead of the entire file path

I am trying to capture the filename that has been changed, removed, or renamed, but I am currently receiving the full file path. Question: How can I extract only the filename when it is changed, instead of working with the entire file path? This is what ...

javascriptnode.js

Preserving the elements of an array for eventual retrieval

My Arraylist contains dynamically changing values that need to be saved for the next time the application is opened. Currently, I am saving them in a list but they are not persisting when the application is reopened. What is the best way to store these v ...

javaandroidarraysarrayliststorage

Exploring locations using the Google Geolocation API

I have a website and am trying to determine the location of my visitors. I came across this code on Google Code: <script type="text/javascript" src="gears_init.js"></script> <script type="text/javascript"> var geo = google.gears.factory ...

phpjavascriptjquerygoogle-maps-api-3

What is the method for extracting a list of properties from an array of objects, excluding any items that contain a particular value?

I have an array of objects, and I want to retrieve a list with a specific property from those objects. However, the values in the list should only include objects that have another property set to a certain value. To clarify, consider the following example ...

javascriptarraysreactjsreact-nativesorting

Is there a comparable solution like Fabric in Javascript or Node.js?

One thing that I really appreciate about Fabric is how it simplifies the deployment process to multiple servers, especially with its strong support for SSH. But since our project is based on node.js, it would be ideal if we could achieve a similar function ...

javascriptnode.jsdeploymentfabric

Troubleshooting: Why is my Local Image not displaying in ReactJS

I am facing an issue with displaying images in my React application using an array of image paths. Below is the code snippet I have written: import React, { Component } from 'react'; class ItemsList extends Component { constructor() { ...

javascriptreactjsimage

The process of eliminating line breaks in javascript is not functioning as expected

I've been searching all over the place, experimenting with different methods, but I just can't seem to fix this issue.. var save_field = res[0]; var save_value = res[1]; save_value = save_value.replace(/\n/gm, '<br />'); con ...

phpjavascriptjqueryajax

How can I locate an element within the body of an if statement?

I am working on a simple JavaScript (jQuery library) if statement to check for the presence of a div element with the class 'video' on the page. If it finds the element, the variable 'arrows' is set to true, otherwise it is set to false ...

javascriptjqueryif-statementhide

leveraging an array from a separate JavaScript file within a Next.js page

I am facing a situation where I need to utilize an array from another page within my Next.js project. However, it seems that the information in the array takes time to load, resulting in encountering undefined initially when trying to access it for title a ...

javascriptnext.js

Utilizing nested JSON data with React

Hey there! I've been working on adding more levels in Json pulled from Mongo, but I'm running into an issue with accessing elements that have multiple levels of nesting. It seems like it can't read the undefined property. Is there a limit t ...

javascriptjsonreactjs

Exploring the process of connecting search values in MongoDB using Mongoose

In the /search/:query route, I have the code snippet shown below: var param = { query: req.query['query'] } MyModel.find({ "$or": [ { 'name': req.param.query }, { 'age': req.param.query } ...

javascriptnode.jsmongodbmongoose

The function GetURLParameter(sParam) is displaying %20 as blank space in the webpage

I am facing an issue with a code that pulls URL parameters into the landing page. The problem is that it is including white spaces as %20. For example, if my URL parameter is: example.com/?title=my website, it would display my%20website on the page inste ...

javascriptjquery

Tips on accessing the text content of a dt element with prototype

Below is some HTML code that I am working with: <dl> <dt><label>test</label></dt> <dd><input id="someid" type="checkbox" onchange="opConfig.reloadPrice()" class="product-custom-op ...

javascriptprototypejs

The issue arises when attempting to call a method from the same service within jsPDF in an Angular environment

Below you will find my Angular project's pdfService. I am facing an issue where calling the this.formatter() method inside myPDF is not functioning properly. export class pdfService { formatter(value: number): string { return new Intl.N ...

javascriptangulartypescriptjspdf

Unable to reach the top while perfectly centered

I am currently struggling to create a perfectly centered popup menu that allows me to scroll all the way to the top. It seems like the transform property only affects visuals, so even though #content is set to top: 50%, I can't see everything at the t ...

javascripthtmlcss

Strategies for Synchronizing Multiple Asynchronous Calls in NodeJS

I have a function getAliasesByRoleDetailed(role) that is responsible for retrieving user data based on a given role. This particular function utilizes axios to fetch the necessary data. The result obtained from executing this function appears in the follo ...

javascriptnode.jsasynchronousasync-await

What causes z-index to be ineffective with sticky elements?

In my website, I've implemented rollover effects in a sticky footer and a responsive menu that stays at the top. However, when the menu is opened and extends over the footer, it covers everything except the rollovers. Closed navigation http://www.mus ...

javascriptcss

Ways to swap out element within ViewContainerRef in Angular

I am currently expanding my knowledge of Angular and I have encountered a challenge regarding dynamically creating components and swapping them within a single container. Here is the setup: <ng-container #container></ng-container> Here are the ...

javascriptangulartypescript

Is it advisable to consolidate all of my JavaScript files into a single file?

Is it necessary for me to combine all my JavaScript files into one single file and then include that file in a folder? I currently have 10 separate JS files within a "javascript" folder - is this bad for the website, or is it okay? P.S. I am new to web de ...

javascripthtml

Only display entries with no content

When attempting to filter data from a search, all results are being displayed on the submit button even when entering 1, 2, or 3. Here is my code below. Please let me know if I am making a mistake somewhere. ...

javascriptphpjqueryajax