Order JSON data by arranging ArrayList using JavaScript/jQuery

Question

Order JSON data by arranging ArrayList using JavaScript/jQuery

In the realm of JavaScript, I am working with data retrieved through AJAX that looks something like this:

data:{site: ["abc", "def", "gfr"], month: ["3", "2", "6"], value: ["10", "21", "1"]}

My task is to organize this data in ascending order based on the month key.

The desired outcome should look like this:

data: {site: ["def", "abc", "gfr"], month: ["2", "3", "6"], value: ["21", "10", "1"]}

I understand that I can sort an array using data.month.sort(), but this method only sorts the month array. Is there a way to sort all values based on the value of one particular key?

javascript arrays sorting

Answer 1

Answer №1

One common approach is to utilize the indices of a key array for sorting purposes, arranging the indices in a pattern that can then be applied to organize other arrays based on both the index and corresponding value from the key array.

Finally, the sorted array can be mapped back to its respective properties.

var data = { site: ["abc", "def", "gfr"], month: ["3", "2", "6"], value: ["10", "21", "1"] },
    array = data.month,
    indices = [...array.keys()].sort((a, b) => array[a] - array[b]);

Object.keys(data).forEach(k => data[k] = indices.map(i => data[k][i]));

console.log(data);

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

Answer 2

One common approach is to utilize the indices of a key array for sorting purposes, arranging the indices in a pattern that can then be applied to organize other arrays based on both the index and corresponding value from the key array.

Finally, the sorted array can be mapped back to its respective properties.

var data = { site: ["abc", "def", "gfr"], month: ["3", "2", "6"], value: ["10", "21", "1"] },
    array = data.month,
    indices = [...array.keys()].sort((a, b) => array[a] - array[b]);

Object.keys(data).forEach(k => data[k] = indices.map(i => data[k][i]));

console.log(data);

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

Answer 3

Answer №2

To organize the month's keys (indices) based on their numerical value, you can use the sort method first. Then, utilize map to retrieve the data at each specific index in the array:

This arrangement sorts the months by their numerical value

const data = {site: ["abc", "def", "gfr"], month: ["3", "2", "6"], value: ["10", "21", "1"]}

const { site, month, value } = data;

const keys = [...month.keys()].sort((a,b) => month[a] - month[b])

const output = {
  site: keys.map(k => site[k]),
  month: keys.map(k => month[k]),
  value: keys.map(k => value[k]),
}

console.log(output)

Answer 4

To organize the month's keys (indices) based on their numerical value, you can use the sort method first. Then, utilize map to retrieve the data at each specific index in the array:

This arrangement sorts the months by their numerical value

const data = {site: ["abc", "def", "gfr"], month: ["3", "2", "6"], value: ["10", "21", "1"]}

const { site, month, value } = data;

const keys = [...month.keys()].sort((a,b) => month[a] - month[b])

const output = {
  site: keys.map(k => site[k]),
  month: keys.map(k => month[k]),
  value: keys.map(k => value[k]),
}

console.log(output)

Answer 5

Answer №3

Here is an alternative approach to achieve the same result (assuming site is the main focus):

const data = {site: ["xyz", "uvw", "mno"], month: ["9", "7", "4"], value: ["50", "15", "32"]}

const output = data.site
   .map((s, i) => ({site: s, month: data.month[i], value: data.value[i]}))
   .sort((a, b) => b.value - a.value)
   .reduce((acc, cur) => ({
         site: [...acc.site, cur.site],
         month: [...acc.month, cur.month], 
         value: [...acc.value, cur.value]
      }),
      {site: [], month: [], value: []});

console.log(output)

Answer 6

Here is an alternative approach to achieve the same result (assuming site is the main focus):

const data = {site: ["xyz", "uvw", "mno"], month: ["9", "7", "4"], value: ["50", "15", "32"]}

const output = data.site
   .map((s, i) => ({site: s, month: data.month[i], value: data.value[i]}))
   .sort((a, b) => b.value - a.value)
   .reduce((acc, cur) => ({
         site: [...acc.site, cur.site],
         month: [...acc.month, cur.month], 
         value: [...acc.value, cur.value]
      }),
      {site: [], month: [], value: []});

console.log(output)

Order JSON data by arranging ArrayList using JavaScript/jQuery

Answer №1

Answer №2

Answer №3

Similar questions

Iterate over JSON dates in JavaScript

Instead of properly addressing the issue, the error message "Cannot read property 'password' of undefined" is being displayed

Having trouble with Vue and Vuex not returning the correct value in HTML?

Navbar collapse not functioning properly on HTML, CSS, and JavaScript

When array elements are assigned to an object's attribute, they are not preserved

Issue encountered while configuring 'innerHTML' in xmlHttp.onreadystatechange function

Incorporating TypeScript with jQuery for efficient AJAX operations

jQuery with various onClick event listeners

Implementing features similar to Facebook comments using ASP.NET

Conceal button divider on pager in Jqgrid

The radio button that disables other inputs only functions correctly for a single element when using Query Selector, but does not work with Query

Choose an option from a dropdown menu and assign it to a JavaScript variable

Filtering arrays using Vue.js

The interactivity of data-ng-click in HTML is not functioning as expected

What techniques can be employed to create a fully operational web application using AngularJS?

Implement an event listener on the final element of a webpage utilizing querySelector

Passing a Scope to ES6 Template Literals: How to Ensure they are Interpreted Correctly?

instructions on invoking a function within the knockout $.getJSON() operation

"Using Node.js to create a simulated mobile environment: a step-by-step guide

What is the process of transferring information from a form to mongodb?