Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript Sorting a table by the first item

Given the array

    [
      [Spain , Madrid , 10-12-2024]
      [Spain , Barcelona , 10-15-2024]
      [Suisse , Berne , 10-18-2024]
      [France , Paris , 10-22-2024]
      [France , Lyon , 10-24-2024]
    ]

How to easily get a new array ordered by countries

    [
      [Spain , 
         [ Madrid , 10-12-2024], 
         [ Barcelona , 10-15-2024]
      ],
      [Suisse , 
         [ Berne , 10-18-2024]
      ],
      [France , 
         [ Paris , 10-22-2024],
         [ Lyon , 10-24-2024]
      ]
    ]

When User clicks 1. the country, 2.the city, 3. defines a date he may do this in different ways, so the initial array may look like this

    [
      [Spain , Madrid , 10-12-2024]
      [Suisse , Berne , 10-18-2024]
      [France , Paris , 10-22-2024]
      [France , Lyon , 10-24-2024]
      [Spain , Barcelona , 10-15-2024]   // ooops, I've forgotten this date...
    ]
Tags:

3

Answers


  1. 0

    Consider first sorting the data based on date and then utilizing reduce and the Nullish coalescing operator ??=:

    const data = [
  ['Spain', 'Madrid', '10-12-2024'],
  ['Suisse', 'Berne', '10-18-2024'],
  ['France', 'Paris', '10-22-2024'],
  ['France', 'Lyon', '10-24-2024'],
  ['Spain', 'Barcelona', '10-15-2024'],
];
const sortedData = data.sort((a, b) => new Date(a[2]) - new Date(b[2]));
const result = Object.values(
  sortedData.reduce((acc, [country, city, date]) => {
    acc[country] ??= [country, []];
    acc[country][1].push([city, date]);
    return acc;
  }, {})
);
console.log(result);
    .as-console-wrapper { max-height: 100% !important; top: 0; }
    Login or Signup to reply.
  2. 0

    Focusing on what you could do differently, I too suggest to rather use an object-based structure:

    const data = [
  {country: 'Spain', city: 'Madrid', date: '10-12-2024'},
  {country: 'Suisse', city: 'Berne', date: '10-18-2024'},
  {country: 'France', city: 'Paris', date: '10-22-2024'},
  {country: 'France', city: 'Lyon', date: '10-24-2024'},
  {country: 'Spain', city: 'Barcelona', date: '10-15-2024'},
];

let groupedData = Object.groupBy(data, ({country}) => country);
console.log(groupedData);

    Advantages:

    • simpler;
    • easier to access to properties;
    • you don’t rely on the order of your values in your array;
    • your won’t need to refactor your whole code if you change something in the input.

    Note: you can also use the Object.groupBy method on an array if you really want to stick with that structure.

    Login or Signup to reply.
  3. 0

    For a similar result, Object.groupBy might be an approach:

    const data = [
  ['Spain', 'Madrid', '10-12-2024'],
  ['Suisse', 'Berne', '10-18-2024'],
  ['France', 'Paris', '10-22-2024'],
  ['France', 'Lyon', '10-24-2024'],
  ['Spain', 'Barcelona', '10-15-2024'],
];

const groupedData = Object.groupBy(data, ([c]) => c);

console.log(groupedData);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search