Javascript Sorting a table by the first item [duplicate]

Question

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...
    ]

Why an array? An object or map makes more sense if you have keys. — Dave Newton
– Dave Newton, Commented Oct 2, 2024 at 11:06
@Dave Newton A map instead of an array when producing the data or once the array is produced? — Wolden
– Wolden, Commented Oct 2, 2024 at 11:12

Sash Sinha · Accepted Answer · 2024-10-02 11:11:46Z

2

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; }

edited Oct 2, 2024 at 11:11

answered Oct 2, 2024 at 11:06

Sash Sinha

22.8k4 gold badges27 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Wolden Over a year ago

Uncaught SyntaxError: expected expression, got '='

Sash Sinha Over a year ago

Not sure, seems to work if you click the "Run code snippet" button.

user27425627 · Accepted Answer · 2024-10-02 11:30:27Z

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.

connexo · Accepted Answer · 2024-10-02 11:26:02Z

1

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);

answered Oct 2, 2024 at 11:26

connexo

57.3k15 gold badges112 silver badges150 bronze badges

Collectives™ on Stack Overflow

Javascript Sorting a table by the first item [duplicate]

3 Answers 3

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Linked

Related