Arranging arrays within an array

Question

Arranging arrays within an array

I currently have an array of arrays that I need to sort based on the date value within one of the arrays. Here is the example:

This is the initial array:

arrayOfArray = [
  ["Date", "01/02/2017", "02/02/2016"],
  ["Temperature", "19", "16"],
  ["Humidity", "80%", "86%"]
]

I want to sort it like this:

newArrayOfArray = [
  ["Date", "02/02/2016", "01/02/2017"],
  ["Temperature", "16", "19"],
  ["Humidity", "86%", "80%"]
]

The sorting should be done based on the date array in descending order. How can I achieve this? Thank you in advance.

javascript arrays sorting

Answer 1

Answer №1

One way to approach this is by utilizing the concept of sorting with map, where you can specify a particular array as a reference for sorting and then reconstruct the array based on this pattern.

var array = [["Date", "01/02/2017", "02/02/2016"], ["Temperature", "19", "16"], ["Humidity", "80%", "86%"]],
    selected = array[0],
    temp = selected.slice(1).map(function (_, i) { return i + 1; });
    
temp.sort(function (a, b) {
    function getISO(d) { return d.replace(/(..)\/(..)\/(....)/, '$3-$2-$1'); }
    return getISO(selected[a]).localeCompare(getISO(selected[b]));
});

temp.unshift(0);
array = array.map(function (a, i) {
    return temp.map(function(index){
       return array[i][index];
    });
})

console.log(array);

Answer 2

One way to approach this is by utilizing the concept of sorting with map, where you can specify a particular array as a reference for sorting and then reconstruct the array based on this pattern.

var array = [["Date", "01/02/2017", "02/02/2016"], ["Temperature", "19", "16"], ["Humidity", "80%", "86%"]],
    selected = array[0],
    temp = selected.slice(1).map(function (_, i) { return i + 1; });
    
temp.sort(function (a, b) {
    function getISO(d) { return d.replace(/(..)\/(..)\/(....)/, '$3-$2-$1'); }
    return getISO(selected[a]).localeCompare(getISO(selected[b]));
});

temp.unshift(0);
array = array.map(function (a, i) {
    return temp.map(function(index){
       return array[i][index];
    });
})

console.log(array);

Answer 3

Answer №2

To simplify the process, you can condense it into another array by adding elements while organizing the values from the first index.

let arr = [
  ["Date", "01/02/2017", "02/02/2016"],
  ["Temperature", "19", "16"],
  ["Humidity", "80%", "86%"]
];

function getISO(d) {
  return d.replace(/(..)\/(..)\/(....)/, '$3-$2-$1');
}
let m = arr.reduce((a, b) => {
  let [n, ...rest] = b;
  if (n === 'Date') {
    rest.sort((x, y) => Date.parse(getISO(x)) - Date.parse(getISO(y)));
  } else {
    rest.sort((x, y) => parseInt(x) - parseInt(y));
  }
  a.push([n, ...rest]);
  return a;
}, []);
console.log(m);

I utilized Nina's getISO function to ensure that the Date.parse properly functions in all settings.

Answer 4

To simplify the process, you can condense it into another array by adding elements while organizing the values from the first index.

let arr = [
  ["Date", "01/02/2017", "02/02/2016"],
  ["Temperature", "19", "16"],
  ["Humidity", "80%", "86%"]
];

function getISO(d) {
  return d.replace(/(..)\/(..)\/(....)/, '$3-$2-$1');
}
let m = arr.reduce((a, b) => {
  let [n, ...rest] = b;
  if (n === 'Date') {
    rest.sort((x, y) => Date.parse(getISO(x)) - Date.parse(getISO(y)));
  } else {
    rest.sort((x, y) => parseInt(x) - parseInt(y));
  }
  a.push([n, ...rest]);
  return a;
}, []);
console.log(m);

I utilized Nina's getISO function to ensure that the Date.parse properly functions in all settings.

Answer 5

Answer №3

Your current data structure may not be the most efficient when it comes to sorting. Consider restructuring it to a data per date format:

var dataPerDate = [];
var [dates,temp,humidity] = arrayOfArrays;
dates.forEach((date,i)=>{
  if(!i) return;
  dataPerDate.push({
    date,
    temp:temp[i],
    humidity:humidity[i]
  };
});

With this new structure, sorting becomes much simpler:

dataPerDate.sort(
 (a,b)=>new Date(a.date) - new Date(b.date)
);

Answer 6

Your current data structure may not be the most efficient when it comes to sorting. Consider restructuring it to a data per date format:

var dataPerDate = [];
var [dates,temp,humidity] = arrayOfArrays;
dates.forEach((date,i)=>{
  if(!i) return;
  dataPerDate.push({
    date,
    temp:temp[i],
    humidity:humidity[i]
  };
});

With this new structure, sorting becomes much simpler:

dataPerDate.sort(
 (a,b)=>new Date(a.date) - new Date(b.date)
);

Answer 7

Answer №4

One approach that incorporates MDN's suggested method for utilizing map() within sort():

let arrayOfArrays = [
  ["Date", "01/02/2017", "02/02/2016"],
  ["Temperature", "19", "16"],
  ["Humidity", "80%", "86%"]
]

function sortByDate(outer) {
  const [ [label, ...values], ...rest ] = outer
  const dates = values.map((value, index) => {
    // convert date string to number
    const time = Date.parse(value.replace(/(..)\/(..)\/(....)/, '$3-$2-$1'))
    
    // create an object to store original index and value
    return { time, index, value }
  }).sort((a, b) => a.time - b.time)
  
  // return sorted dates with other subarrays re-ordered accordingly
  return [
    [
      label,
      ...dates.map(date => date.value)
    ],
    ...rest.map(([label, ...inner]) => [
      label,
      ...inner.map((value, index) => inner[dates[index].index])
    ])
  ]
}

console.log(sortByDate(arrayOfArrays))

Answer 8

One approach that incorporates MDN's suggested method for utilizing map() within sort():

let arrayOfArrays = [
  ["Date", "01/02/2017", "02/02/2016"],
  ["Temperature", "19", "16"],
  ["Humidity", "80%", "86%"]
]

function sortByDate(outer) {
  const [ [label, ...values], ...rest ] = outer
  const dates = values.map((value, index) => {
    // convert date string to number
    const time = Date.parse(value.replace(/(..)\/(..)\/(....)/, '$3-$2-$1'))
    
    // create an object to store original index and value
    return { time, index, value }
  }).sort((a, b) => a.time - b.time)
  
  // return sorted dates with other subarrays re-ordered accordingly
  return [
    [
      label,
      ...dates.map(date => date.value)
    ],
    ...rest.map(([label, ...inner]) => [
      label,
      ...inner.map((value, index) => inner[dates[index].index])
    ])
  ]
}

console.log(sortByDate(arrayOfArrays))

Answer 9

Answer №5

If you're looking to improve your code, one suggestion is to utilize an object for storing the data and then create a custom sort function based on the date of that object. Here's an example:

var Datapoint = function (date, temp, humidity) {
  this.date = date;
  this.temp = temp;
  this.humidity = humidity;
};

var array = [
  new Datapoint(new Date(2017, 1, 1), 19, 80),
  new Datapoint(new Date(2016, 1, 2), 16, 86),
  new Datapoint(new Date(2017, 0, 2), 13, 88),
  new Datapoint(new Date(2017, 1, 1), 21, 76)
];

array.sort(function (a, b) {
  return a.date > b.date ? 1 : a.date < b.date ? -1 : 0;
});

// Just for representation
Datapoint.prototype.toString = function () {
  var dateString = this.date.getDate() + "/" + (this.date.getMonth() + 1) + "/" + this.date.getFullYear();
  return "Date: " + dateString + ", temperature: " + this.temp + "&deg;, humidity: " + this.humidity + "%";
};

document.getElementById("result").innerHTML = array[0].toString() + "<br/>" + array[1].toString() + "<br/>" + array[2].toString() + "<br/>" + array[3].toString();

<div id="result"></div>

Answer 10

If you're looking to improve your code, one suggestion is to utilize an object for storing the data and then create a custom sort function based on the date of that object. Here's an example:

var Datapoint = function (date, temp, humidity) {
  this.date = date;
  this.temp = temp;
  this.humidity = humidity;
};

var array = [
  new Datapoint(new Date(2017, 1, 1), 19, 80),
  new Datapoint(new Date(2016, 1, 2), 16, 86),
  new Datapoint(new Date(2017, 0, 2), 13, 88),
  new Datapoint(new Date(2017, 1, 1), 21, 76)
];

array.sort(function (a, b) {
  return a.date > b.date ? 1 : a.date < b.date ? -1 : 0;
});

// Just for representation
Datapoint.prototype.toString = function () {
  var dateString = this.date.getDate() + "/" + (this.date.getMonth() + 1) + "/" + this.date.getFullYear();
  return "Date: " + dateString + ", temperature: " + this.temp + "&deg;, humidity: " + this.humidity + "%";
};

document.getElementById("result").innerHTML = array[0].toString() + "<br/>" + array[1].toString() + "<br/>" + array[2].toString() + "<br/>" + array[3].toString();

<div id="result"></div>

Arranging arrays within an array

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Configure gulp tasks based on the environment variable NODE_ENV

The total number of items in the cart is experiencing an issue with updating

Updating a marker's latitude and longitude using Laravel, Google API, and Ajax: A step-by-step guide

Guide on setting up a React project using a customized version of create-react-app

Challenges arise when using ui-select with both multiple selection and asynchronous options

Unable to retrieve observable modifications

Typescript headaches: Conflicting property types with restrictions

Grabbing data using @RequestParam and $http.post in angularjs I will

HTML textarea content will update automatically whenever there is an input change in JavaScript

Having trouble with the Document.createElement function not functioning properly when trying to download a

Tips for eliminating blank rows from _POST following a PHP and JQuery post

Skip ahead button for fast forwarding html5 video

Methods for extracting the result of a promise

Looking for a more efficient method to pass components with hooks? Look no further, as I have a solution ready for

What is the best way to merge shared information within a JSON object while utilizing the Map()

Encountering NaN values in JavaScript arrays

Distinguishing each unique JavaScript property within an array of objects

Issue with NPM's manual review process following recent package updates

Is the JavaScript progress bar dysfunctional when used with object-oriented JavaScript code, but functions properly with arrow functions?

Spring Security does not generate an error if the authorization header is missing following a login using AngularJS