Arrange JSON using JavaScript based on an alternative array order and the remaining items alphabetically

Question

Arrange JSON using JavaScript based on an alternative array order and the remaining items alphabetically

I need help sorting a JSON items with Javascript based on another array, and then alphabetically for the rest of the items.

Here is the array of the desired order for sorting the JSON items:

var order = [3,9,50,7];

The JSON data has an "ID" key that I want to sort using the order array, and the remaining items should be sorted by the "Name" key.

This is the initial JSON data:

var data = [
    {
        "id": "9",
        "title": "B"
    },
    {
        "id": "63",
        "title": "Z"
    },
    {
        "id": "433",
        "title": "D"
    },
    {
        "id": "50",
        "title": "A"
    },
    {
        "id": "2",
        "title": "G"
    }
]

Here is how I would like the final result to look:

var data = [
    {
        "id": "9",
        "title": "B"
    },
    {
        "id": "50",
        "title": "A"
    },
    {
        "id": "433",
        "title": "D"
    },
    {
        "id": "2",
        "title": "G"
    },
    {
        "id": "63",
        "title": "Z"
    }
]

javascript arrays json sorting object

Answer 1

Answer №1

To establish a custom sort order, consider using an object and assigning a default value to reposition other IDs towards the end.

var order = [3, 9, 50, 7],
    data = [{ id: "9", title: "B" }, { id: "63", title: "Z" }, { id: "433", title: "D" }, { id: "50", title: "A" }, { id: "2", title: "G" }],
    orderO = {};

order.forEach(function (a, i, aa) {
    orderO[a] = i - aa.length; // set negative values and zero as defaults
});

data.sort(function (a, b) {
    return (orderO[a.id] || 0) - (orderO[b.id] || 0) || a.title.localeCompare(b.title);
});

console.log(data);
console.log(orderO);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

To establish a custom sort order, consider using an object and assigning a default value to reposition other IDs towards the end.

var order = [3, 9, 50, 7],
    data = [{ id: "9", title: "B" }, { id: "63", title: "Z" }, { id: "433", title: "D" }, { id: "50", title: "A" }, { id: "2", title: "G" }],
    orderO = {};

order.forEach(function (a, i, aa) {
    orderO[a] = i - aa.length; // set negative values and zero as defaults
});

data.sort(function (a, b) {
    return (orderO[a.id] || 0) - (orderO[b.id] || 0) || a.title.localeCompare(b.title);
});

console.log(data);
console.log(orderO);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Answer №2

To begin, start by identifying the elements in your data array that correspond to those in your order array. Next, employ a specialized sorting algorithm to arrange the remaining elements and then combine the outcomes.

var order = [5, 11, 39, 8];
var data = [{ "id": "11", "title": "C" }, { "id": "72", "title": "W" }, { "id": "544", "title": "E" }, { "id": "39", "title": "R" }, { "id": "4", "title": "H" }];

function customSortArray(array, sortOrder) {
    var updatedArray = [];
    for (var j = 0; j < sortOrder.length; j++) {
        var position = array.findIndex(y => y.id === sortOrder[j].toString());
        if (position >= 0) {
            updatedArray.push(array.splice(position, 1));
        }
    }

    return updatedArray.concat(array.sort((x, y) => x.title > y.title ? 1 : -1));
}
console.log(customSortArray(data, order));

Answer 4

To begin, start by identifying the elements in your data array that correspond to those in your order array. Next, employ a specialized sorting algorithm to arrange the remaining elements and then combine the outcomes.

var order = [5, 11, 39, 8];
var data = [{ "id": "11", "title": "C" }, { "id": "72", "title": "W" }, { "id": "544", "title": "E" }, { "id": "39", "title": "R" }, { "id": "4", "title": "H" }];

function customSortArray(array, sortOrder) {
    var updatedArray = [];
    for (var j = 0; j < sortOrder.length; j++) {
        var position = array.findIndex(y => y.id === sortOrder[j].toString());
        if (position >= 0) {
            updatedArray.push(array.splice(position, 1));
        }
    }

    return updatedArray.concat(array.sort((x, y) => x.title > y.title ? 1 : -1));
}
console.log(customSortArray(data, order));

Answer 5

Answer №3

To streamline the order of your array, begin by reducing it to a single object where each element serves as a key with its index in the array as the corresponding value. Next, utilize sorting methods to arrange elements based on their presence in the array, followed by their position within the array, and lastly by title.

var data = [{"id":"9","title":"B"},{"id":"63","title":"Z"},{"id":"433","title":"D"},{"id":"50","title":"A"},{"id":"2","title":"G"}]

var order = [3,9,50,7].reduce(function(r, e, i) {
 return r[e] = i, r
}, {})

var result = data.sort(function(a, b) {
 return ((order[b.id] != undefined) - (order[a.id] != undefined) || (order[a.id] - order[b.id])) ||
  a.title.localeCompare(b.title)
})

console.log(result)

Answer 6

To streamline the order of your array, begin by reducing it to a single object where each element serves as a key with its index in the array as the corresponding value. Next, utilize sorting methods to arrange elements based on their presence in the array, followed by their position within the array, and lastly by title.

var data = [{"id":"9","title":"B"},{"id":"63","title":"Z"},{"id":"433","title":"D"},{"id":"50","title":"A"},{"id":"2","title":"G"}]

var order = [3,9,50,7].reduce(function(r, e, i) {
 return r[e] = i, r
}, {})

var result = data.sort(function(a, b) {
 return ((order[b.id] != undefined) - (order[a.id] != undefined) || (order[a.id] - order[b.id])) ||
  a.title.localeCompare(b.title)
})

console.log(result)

Answer 7

Answer №4

Give this a shot:

let order = [3,9,50,7];
let data = [
    {
        "id": "9",
        "title": "B"
    },
    {
        "id": "63",
        "title": "Z"
    },
    {
        "id": "433",
        "title": "D"
    },
    {
        "id": "50",
        "title": "A"
    },
    {
        "id": "2",
        "title": "G"
    }
]
     let sortedData =  data.sort((a, b) => {
          return ((order.indexOf(a.id) || Number.Max_VALUE) - (order.indexOf(b.id) || Number.MAX_VALUE) || a.title.localeCompare(b.title) )
        })
      console.log(sortedData)

Answer 8

Give this a shot:

let order = [3,9,50,7];
let data = [
    {
        "id": "9",
        "title": "B"
    },
    {
        "id": "63",
        "title": "Z"
    },
    {
        "id": "433",
        "title": "D"
    },
    {
        "id": "50",
        "title": "A"
    },
    {
        "id": "2",
        "title": "G"
    }
]
     let sortedData =  data.sort((a, b) => {
          return ((order.indexOf(a.id) || Number.Max_VALUE) - (order.indexOf(b.id) || Number.MAX_VALUE) || a.title.localeCompare(b.title) )
        })
      console.log(sortedData)

Answer 9

Answer №5

Sorting can be accomplished with a single function by utilizing Array.indexOf to determine the order in which elements should be sorted. When there is only one item in the order array, it will always be prioritized first. In all other cases, sorting will be done alphabetically.

var order = [3,9,50,7];

var data = [
    {id: "9", title: "B"},
    {id: "63", title: "Z"},
    {id: "433", title: "D"},
    {id: "50", title: "A"},
    {id: "2",title: "G"},
    {id: "9",title: "F"},
    {id: "7",title: "D"},
    {id: "3",title: "E"},
    {id: "2",title: "F"},
]
// the sort function 
function sortFunc(a,b){
    var iA = order.indexOf(Number(a.id))+1; // get index of A
    var iB = order.indexOf(Number(b.id))+1; // get index of B
    if(iA && iB){  // if both in the order array
        return iA === iB ? // if the same in order array then sort alphabet
            a.title.localeCompare(b.title) :
            iA - iB;
    }
    // if A or B in order array move up else sort alphabet
    return iA ? -1 : iB ? 1 : a.title.localeCompare(b.title);
}
// sort data
data.sort(sortFunc);
// dispay result
data.forEach(obj=>console.log(obj.id + ":" + obj.title))

Answer 10

Sorting can be accomplished with a single function by utilizing Array.indexOf to determine the order in which elements should be sorted. When there is only one item in the order array, it will always be prioritized first. In all other cases, sorting will be done alphabetically.

var order = [3,9,50,7];

var data = [
    {id: "9", title: "B"},
    {id: "63", title: "Z"},
    {id: "433", title: "D"},
    {id: "50", title: "A"},
    {id: "2",title: "G"},
    {id: "9",title: "F"},
    {id: "7",title: "D"},
    {id: "3",title: "E"},
    {id: "2",title: "F"},
]
// the sort function 
function sortFunc(a,b){
    var iA = order.indexOf(Number(a.id))+1; // get index of A
    var iB = order.indexOf(Number(b.id))+1; // get index of B
    if(iA && iB){  // if both in the order array
        return iA === iB ? // if the same in order array then sort alphabet
            a.title.localeCompare(b.title) :
            iA - iB;
    }
    // if A or B in order array move up else sort alphabet
    return iA ? -1 : iB ? 1 : a.title.localeCompare(b.title);
}
// sort data
data.sort(sortFunc);
// dispay result
data.forEach(obj=>console.log(obj.id + ":" + obj.title))

Arrange JSON using JavaScript based on an alternative array order and the remaining items alphabetically

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Discover the most helpful keyboard shortcuts for Next.js 13!

encountering an issue: file or directory does not exist, unable to open 'rds-combined-ca-bundle.pem'

What is the best way to display a date picker from a different page as a pop-up when a button is clicked on the current

Incorporating React.js into HTML DOM Elements

Ways to filter out specific fields when returning query results using Mongoose

Is it possible to have both Node.js and browser code in the same file using webpack, while ensuring that only the browser code is accessible and the Node.js code remains hidden?

Discovering relevant information in a JSON file using user-input in Python

Sorting by two fields with varying value types in AngularJS

Positioning a Three.js static CSS2DObject with respect to the camera's perspective

Repair the masthead background during overscroll

Creating a layered effect by overlaying one image on top of another in an HTML5

Buttons fail to function properly when inserted into Popover

Ways to select a single checkbox when other checkboxes are selected in JavaScript

Implementing a Unique Approach to Showcase the Initial PDF Page as Cover through Django and JS

The closing tag for the "body" element was excluded even though OMITTAG NO was specified

Guide to generating an array entry for every line of a text file in node.js

Embed fashion and graph elements into a CSV document (generated from <script>)

Tips for ensuring that your website can recall which call-to-action (CTA) has been selected for redirection

Issue with getBytes not triggering .OnSuccess or .OnFailure events when using a onDataChange listener in Firebase

Tips for blocking submissions when a user tries to input a hyperlink