Arranging Arrays in an Object by Date Using Vue and JavaScript

Question

Arranging Arrays in an Object by Date Using Vue and JavaScript

I am currently working with an Object Structure similar to this:

{
  1000: [{AnnouncementCode: 1000, Name: 'foo', created_at: "2022-02-01T19:52:01.000000Z"},{AnnouncementCode: 1000, Name: 'foo', created_at: "2022-02-01T19:52:01.000000Z"},{AnnouncementCode: 1000, Name: 'foo', created_at: "2022-02-01T19:52:01.000000Z"}],
  2000: [{AnnouncementCode: 2000, Name: 'foo', created_at: "2022-02-01T19:52:01.000000Z"},{AnnouncementCode: 2000, Name: 'foo', created_at: "2022-02-01T19:52:01.000000Z"},{AnnouncementCode: 2000, Name: 'foo', created_at: "2022-02-01T19:52:01.000000Z"}],
  3000: [{AnnouncementCode: 3000, Name: 'foo', created_at: "2022-02-01T19:52:01.000000Z"},{AnnouncementCode: 3000, Name: 'foo', created_at: "2022-02-01T19:52:01.000000Z"},{AnnouncementCode: 3000, Name: 'foo', created_at: "2022-02-01T19:52:01.000000Z"}],
  4000: [{AnnouncementCode: 4000, Name: 'foo', created_at: "2022-02-01T19:52:01.000000Z"},{AnnouncementCode: 4000, Name: 'foo', created_at: "2022-02-01T19:52:01.000000Z"},{AnnouncementCode: 4000, Name: 'foo', created_at: "2022-02-01T19:52:01.000000Z"}]
}

Currently I have displayed all the values in the frontend, but they are sorted within each array separately and not globally.

I am looking for suggestions on how to efficiently sort all values from every key based on the 'created_at' date field.

javascript arrays vue.js sorting object

Answer 1

Answer №1

In my opinion, sorting data like this may not be necessary, especially if it will mainly be used for mapping purposes. Instead of sorting, you can simply have an array of objects structured like this:

const array = [
  {AnnouncementCode: 4000, Name: 'foo', created_at: "2022-04-01T19:52:01.000000Z"},
  {AnnouncementCode: 4000, Name: 'foo', created_at: "2022-07-01T19:52:01.000000Z"},
  {AnnouncementCode: 3000, Name: 'foo', created_at: "2022-05-01T19:52:01.000000Z"},
  {AnnouncementCode: 1000, Name: 'foo', created_at: "2022-09-01T19:52:01.000000Z"},
  {AnnouncementCode: 2000, Name: 'foo', created_at: "2022-01-01T19:52:01.000000Z"},
  {AnnouncementCode: 1000, Name: 'foo', created_at: "2022-02-01T19:52:01.000000Z"},
]

// Sorting options
const sortedByDate = array.sort((a,b) => {
  if (a.created_at > b.created_at) return 1
  if (a.created_at < b.created_at) return -1
  if (a.created_at == b.created_at) return 0
})

const sortByAnnouncementCode = array.sort((a,b) => {
  if (a.AnnouncementCode > b.AnnouncementCode) return 1
  if (a.AnnouncementCode < b.AnnouncementCode) return -1
  if (a.AnnouncementCode == b.AnnouncementCode) return 0
})

const sortByCodeThanDate = 
  array
  .filter((data) => data.AnnouncementCode === 1000)
  .sort((a,b) => {
    if (a.created_at > b.created_at) return 1
    if (a.created_at < b.created_at) return -1
    if (a.created_at == b.created_at) return 0
  })

console.log(sortByCodeThanDate)

If sorting is absolutely necessary for the specific data you have provided, it might require more effort. The complexity of the task depends on whether the data is dynamic or not.

Answer 2

In my opinion, sorting data like this may not be necessary, especially if it will mainly be used for mapping purposes. Instead of sorting, you can simply have an array of objects structured like this:

const array = [
  {AnnouncementCode: 4000, Name: 'foo', created_at: "2022-04-01T19:52:01.000000Z"},
  {AnnouncementCode: 4000, Name: 'foo', created_at: "2022-07-01T19:52:01.000000Z"},
  {AnnouncementCode: 3000, Name: 'foo', created_at: "2022-05-01T19:52:01.000000Z"},
  {AnnouncementCode: 1000, Name: 'foo', created_at: "2022-09-01T19:52:01.000000Z"},
  {AnnouncementCode: 2000, Name: 'foo', created_at: "2022-01-01T19:52:01.000000Z"},
  {AnnouncementCode: 1000, Name: 'foo', created_at: "2022-02-01T19:52:01.000000Z"},
]

// Sorting options
const sortedByDate = array.sort((a,b) => {
  if (a.created_at > b.created_at) return 1
  if (a.created_at < b.created_at) return -1
  if (a.created_at == b.created_at) return 0
})

const sortByAnnouncementCode = array.sort((a,b) => {
  if (a.AnnouncementCode > b.AnnouncementCode) return 1
  if (a.AnnouncementCode < b.AnnouncementCode) return -1
  if (a.AnnouncementCode == b.AnnouncementCode) return 0
})

const sortByCodeThanDate = 
  array
  .filter((data) => data.AnnouncementCode === 1000)
  .sort((a,b) => {
    if (a.created_at > b.created_at) return 1
    if (a.created_at < b.created_at) return -1
    if (a.created_at == b.created_at) return 0
  })

console.log(sortByCodeThanDate)

If sorting is absolutely necessary for the specific data you have provided, it might require more effort. The complexity of the task depends on whether the data is dynamic or not.

Arranging Arrays in an Object by Date Using Vue and JavaScript

Answer №1

Similar questions

.li click event not triggering after appending to DOM

Incorporating outside content into HTML

Guide to linking audio to MediaStream using Three.JS AudioContext

What is the best way to update input elements within a session using Vue.js?

Sending data twice with jQuery AJAX to PHP

Displaying radio values in an Angular ng-repeat directive

Struggling to figure out how to make Bootstrap toast close or autohide properly

Exploring the realms of software testing with a blend of manual testing and automation using powerful tools such as

Tips for dynamically refreshing a collection of radio buttons using jQuery Mobile?

Utilizing JavaScript to implement an interactive :hover pseudo-class dynamic effect

Using jasmine for mocking jQuery's getJSON callback function is a helpful technique in testing your

What occurs when the update function returned by React.useState() is invoked?

Prevent users from adding or removing any letters

Utilizing Vue3 for Seamless State Persistence Upon Page Reloads

Using ajax to retrieve quotes and authors from online sources

What is the issue with undefined params in Next.js?

I'm curious about the meaning of "!" in pseudo-code. I understand that it represents factorial, but I'm unsure of how to properly interpret it

How can we make the lines in the Highcharts force plot take up all the available width

Having trouble receiving a response when making a request to an API

Determine the difference between dates using Angular 2's array filtering function