How can nested json be sorted effectively based on two specific fields?

Question

How can nested json be sorted effectively based on two specific fields?

Example Data:

[{  'ID': objID(abc123), 
    'Department': 'IT',
    'Employees': [ { 'ID': 3, 'StartDate': '24-12-2022T08:30', 'active': true },          
                   { 'ID': 2, 'StartDate': '14-11-2021T08:30', 'active': true },
                   { 'ID': 1, 'StartDate': '22-11-2020T08:30', 'active': false }]
  },
  { 'ID': objID(def456),
    'Department': 'HR',
    'Employees': [ { 'ID': 33, 'StartDate': '24-12-2022T08:30', 'active': false},          
                   { 'ID': 22, 'StartDate': '14-11-2021T08:30', 'active': true },
                   { 'ID': 11, 'StartDate': '22-11-2020T08:30', 'active': false }]
  },
  {  'ID': objID(ghi789),'Department' : 'AC', 'Employees': []}... more than 1000 ]

Table HTML Code:

<tbody>
   <ng-container *ngFor="let dept of Department">
     <tr *ngFor="let emp of dept.Employees" class="card-text">
       <td> {{dept.Department}} </td>
       <td> {{emp.ID}}   </td>
       <td> {{emp.StartDate}}  </td>
       <td> {{emp.active}}  </td>
    </tr>
   </ng-container>
</tbody>

Current Display:

Department      ID        StartDate        active
IT         3     24-12-2022T08:30  true
IT         2     14-11-2021T08:30  true
IT         1     22-11-2020T08:30  false
HR         33    24-12-2022T08:30  false
HR         22    14-11-2021T08:30  true
HR         11    22-11-2020T08:30  false

Expected Output:

Department      ID        StartDate        active
IT         3     24-12-2022T08:30  true
IT         2     14-11-2021T08:30  true
HR         22     14-11-2021T08:30  true
HR         33     24-12-2022T08:30  false
IT         1     22-11-2020T08:30  false 
HR         11     22-11-2020T08:30  false

Attempted Solution:

this.data.forEach(entry => {
        console.log('checking:', entry)
        entry.Employees.sort((a:any, b:any) => { return a.StartDate - b.StartDate })})

In this case, I am aiming to sort the data first by activity status and then by dates from recent to oldest.

I am open to exploring alternative methods to achieve the desired output.

javascript angular typescript

Answer 1

Answer №1

To efficiently sort employees across departments, it is necessary to transform the data structure. Create a flat array of employees with a "Deprt" property.

data.flatMap(({ Deprt, Employees }) => 
  Employees.map(emp => ({ ...emp, Deprt, StartDate: convertToDate(emp.StrtDT) }))
)

In addition, include a new property called "StartDate". The current format of dates needs to be converted using regex to obtain date and time components for proper conversion to Date objects.

function convertToDate(dateStr) {
  const [d, m, y, h, min] = dateStr.match(/\d+/g)
  return new Date(y, m-1, d, h, min)
}

Subsequently, implement sorting based on "flag" and then "StartDate".

array.sort((a, b) => b.flag - a.flag 
    || b.StartDate - a.StartDate
)

An illustrative example:

const data = [
  {
    Deprt: 'IT',
    Employees: [
      { ID: 3, StrtDT: '24-12-2022T08:30', flag: true },
      { ID: 2, StrtDT: '14-11-2021T08:30', flag: true },
      { ID: 1, StrtDT: '22-11-2020T08:30', flag: false },
    ],
  },
  {
    Deprt: 'HR',
    Employees: [
      { ID: 33, StrtDT: '24-12-2022T08:30', flag: false },
      { ID: 22, StrtDT: '14-11-2021T08:30', flag: true },
      { ID: 11, StrtDT: '22-11-2020T08:30', flag: false },
    ],
  },
];

function convertToDate(dateStr) {
  const [d, m, y, h, min] = dateStr.match(/\d+/g)
  return new Date(y, m-1, d, h, min)
}

const sortedEmployees =
  data.flatMap(({ Deprt, Employees}) =>
    Employees.map(emp => ({ ...emp, Deprt, StartDate: convertToDate(emp.StrtDT) }))
  )
  .sort((a, b) => b.flag - a.flag 
  || b.StartDate - a.StartDate
  )

console.log(sortedEmployees)

Answer 2

To efficiently sort employees across departments, it is necessary to transform the data structure. Create a flat array of employees with a "Deprt" property.

data.flatMap(({ Deprt, Employees }) => 
  Employees.map(emp => ({ ...emp, Deprt, StartDate: convertToDate(emp.StrtDT) }))
)

In addition, include a new property called "StartDate". The current format of dates needs to be converted using regex to obtain date and time components for proper conversion to Date objects.

function convertToDate(dateStr) {
  const [d, m, y, h, min] = dateStr.match(/\d+/g)
  return new Date(y, m-1, d, h, min)
}

Subsequently, implement sorting based on "flag" and then "StartDate".

array.sort((a, b) => b.flag - a.flag 
    || b.StartDate - a.StartDate
)

An illustrative example:

const data = [
  {
    Deprt: 'IT',
    Employees: [
      { ID: 3, StrtDT: '24-12-2022T08:30', flag: true },
      { ID: 2, StrtDT: '14-11-2021T08:30', flag: true },
      { ID: 1, StrtDT: '22-11-2020T08:30', flag: false },
    ],
  },
  {
    Deprt: 'HR',
    Employees: [
      { ID: 33, StrtDT: '24-12-2022T08:30', flag: false },
      { ID: 22, StrtDT: '14-11-2021T08:30', flag: true },
      { ID: 11, StrtDT: '22-11-2020T08:30', flag: false },
    ],
  },
];

function convertToDate(dateStr) {
  const [d, m, y, h, min] = dateStr.match(/\d+/g)
  return new Date(y, m-1, d, h, min)
}

const sortedEmployees =
  data.flatMap(({ Deprt, Employees}) =>
    Employees.map(emp => ({ ...emp, Deprt, StartDate: convertToDate(emp.StrtDT) }))
  )
  .sort((a, b) => b.flag - a.flag 
  || b.StartDate - a.StartDate
  )

console.log(sortedEmployees)

Answer 3

Answer №2

Organize an array by various criteria, compare flags, and if they match, analyze dates for a comparison:

Note: To enhance the employee array, incorporate department information. Then streamline the array to obtain a list of employees and proceed with sorting.

let arr = [{  'Deprt': 'IT',
       'Employees': [ { 'ID': 3, 'StrtDT': '24-12-2022T08:30', 'flag': true },
           { 'ID': 2, 'StrtDT': '14-11-2021T08:30' , 'flag': true },
           { 'ID': 1, 'StrtDT': '22-11-2020T08:30', 'flag': false }]
   },
       {  'Deprt': 'HR',
           'Employees': [ { 'ID': 33, 'StrtDT': '24-12-2022T08:30', 'flag': false},
               { 'ID': 22, 'StrtDT': '14-11-2021T08:30',  'flag': true },
               { 'ID': 11, 'StrtDT': '22-11-2020T08:30', 'flag': false }]
       },
       {  'Deprt' : 'AC', 'Employees': []} ];

  arr.forEach(o => o.Employees.forEach(e => e.Deprt = o.Deprt));
  arr = arr.flatMap(o => o.Employees);
  
   arr.sort( (a,b) => {
       if(a.flag !== b.flag) {
           return a.flag ? -1 : 1;
       } else {
           let [d,mon,y,h,min] = a.StrtDT.split(/\D/);
           const d1 = new Date(y, mon-1, d, h, min);

           [d,mon,y,h,min] = b.StrtDT.split(/\D/);
           const d2 = new Date(y, mon-1, d, h, min);

           return d2-d1;
       }
   } );


  console.log(arr);

Answer 4

Organize an array by various criteria, compare flags, and if they match, analyze dates for a comparison:

Note: To enhance the employee array, incorporate department information. Then streamline the array to obtain a list of employees and proceed with sorting.

let arr = [{  'Deprt': 'IT',
       'Employees': [ { 'ID': 3, 'StrtDT': '24-12-2022T08:30', 'flag': true },
           { 'ID': 2, 'StrtDT': '14-11-2021T08:30' , 'flag': true },
           { 'ID': 1, 'StrtDT': '22-11-2020T08:30', 'flag': false }]
   },
       {  'Deprt': 'HR',
           'Employees': [ { 'ID': 33, 'StrtDT': '24-12-2022T08:30', 'flag': false},
               { 'ID': 22, 'StrtDT': '14-11-2021T08:30',  'flag': true },
               { 'ID': 11, 'StrtDT': '22-11-2020T08:30', 'flag': false }]
       },
       {  'Deprt' : 'AC', 'Employees': []} ];

  arr.forEach(o => o.Employees.forEach(e => e.Deprt = o.Deprt));
  arr = arr.flatMap(o => o.Employees);
  
   arr.sort( (a,b) => {
       if(a.flag !== b.flag) {
           return a.flag ? -1 : 1;
       } else {
           let [d,mon,y,h,min] = a.StrtDT.split(/\D/);
           const d1 = new Date(y, mon-1, d, h, min);

           [d,mon,y,h,min] = b.StrtDT.split(/\D/);
           const d2 = new Date(y, mon-1, d, h, min);

           return d2-d1;
       }
   } );


  console.log(arr);

How can nested json be sorted effectively based on two specific fields?

Answer №1

Answer №2

Similar questions

What is the best way to construct a JSON object for React based on the data from a JSON API response?

Enhancing UI design with Vue.js

Sleek transitions for navigating between cells in a data table

Is your website's Google analytics event tracking not giving you the feedback you need

Attempting to fetch JSON information but encountering an error message stating "not a valid function."

Exploring Opencascade.js: Uncovering the Real Text within a TCollection_ExtendedString

Dealing with errors in node.js

Optimal strategies for managing subscriptions in Angular

NodeJS does not support the Array.Push method

"NaN is being caused by the presence of quotation marks within the split property

Tips for executing an asynchronous fetch prior to the first rendering

Is there a way to display the HTML input date by simply clicking on text or an image?

What is the best way to handle reading hefty files using the fs.read method and a buffer in JavaScript?

Using object syntax in React state management

Utilize Moment to retrieve the weekend dates

Depend on a mapping function to assign a value to every option within a discriminated union

Changing the input to uppercase within Vue.js

Exploring the power of jQuery closures and handling events like mouseover and mouseout

What could be causing the Multer error in my Express.js application when attempting to upload a file for the second time, even though the first time was successful?

A tiny blue spot popping up beside the roster of users