Guide to organizing an array of objects based on the month and year they belong to?

I currently have an array of objects structured as follows:

entries: [  
   {  
      id:1,
      text: "Lorem ipsum",
      timeStamp:"Thu, 01 Jun 2018"
   },
   {  
      id:3,
      text:"Lorem ipsum",
      timeStamp:"Thu, 24 May 2018"
   },
   {  
      id:4,
      text: "Lorem ipsum",
      timeStamp:"Thu, 24 May 2018"
   }
]

My goal is to organize these objects into an 'archive' array that looks like this:

archive: [
   {
      monthyear: May 2018,
      entries: 2
   },
   {
      monthyear: June 2018,
      entries: 5
   }
]

I'm seeking advice on which array functions would be best suited to achieve this desired outcome.

javascriptarraysgroupingjavascript-objects

Answer №1

To organize array elements by date, you can utilize the reduce method and extract month and year using the toLocaleString function.

const data = [{"id":1,"text":"Lorem ipsum","timeStamp":"Thu, 01 Jun 2018"},{"id":3,"text":"Lorem ipsum","timeStamp":"Thu, 24 May 2018"},{"id":4,"text":"Lorem ipsum","timeStamp":"Thu, 24 May 2018"}]

const result = data.reduce((r, {timeStamp}) => {
  let dateObj = new Date(timeStamp);
  let monthyear = dateObj.toLocaleString("en-us", { month: "long", year: 'numeric' });
  if(!r[monthyear]) r[monthyear] = {monthyear, entries: 1}
  else r[monthyear].entries++;
  return r;
}, {})

console.log(Object.values(result))

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Synchronizing Trackball Control with Directional Lighting in ThreeJS

In my current project, I am utilizing three.js to render objects. The setup includes directional lighting and trackball controls. I understand that the light is static while the camera moves with the controls. However, I want the light to move along with ...

javascriptgraphicsthree.jslighting

Disable other actions during jquery change event validation

Is there an answer for this question already? If so, I apologize! Here is my situation: I have an edit field that is validated when the .change() event occurs. What I am trying to achieve is this: if a user types something and then immediately clicks the s ...

javascriptjquery

The tooltip feature in jQuery is experiencing some stuttering issues

Sometimes, images can convey messages better than words. I encountered a strange issue with my self-made jQuery tooltip. I prefer not to use any libraries because my needs are simple and I don't want unnecessary bloat. When I move my mouse from righ ...

javascriptjquery

Understanding how to access a variable outside of a function in Node.js can be crucial for successfully passing

I am trying to figure out how to access the TRADE_OUT variable outside of a specific function in my application. Despite my efforts, I haven't been successful so far. I need the value of TRADE_OUT to be globally accessible within the entire applicatio ...

javascriptnode.jsvariables

Can I send an AJAX request to JavaScript rather than ASP?

Currently, I am in the process of developing a content delivery network (CDN), and I am exploring the idea of using a jQuery AJAX call to a JavaScript file instead of an ASP file. The JavaScript file would be responsible for processing the input and then s ...

javascriptajaxjquery

Invoking a JavaScript function to retrieve an array of integers from a C# method for organizing columns in datatables.net

I have to admit that my JavaScript skills are not very strong. Currently, I am working on creating a table using datatables.net. The table is being populated by calling a generic handler, which in turn fetches data from the database using C#. This functio ...

c#javascriptjqueryasp.netdatatable

What could be causing the issue of undefined component props in Vue Router?

Recently diving into the world of Vue, I've been eager to master the art of utilizing Vue router. Smooth sailing with normal routing, I decided to spice things up by experimenting with dynamic routing. To my surprise, everything ran smoothly until I a ...

javascriptvue.jsvuejs2vue-componentvue-router

What is the best way to merge all project modules into a single file using the r.js optimizer?

While working with the r.js optimizer, I noticed that the final index.html file doesn't seem to allow for referencing just a single script without making any async calls to other scripts during a user's session. It appears to generate multiple gr ...

javascriptnode.jsbuildrequirejsr.js

Is the size of the array significant in the context of JavaScript here?

Whenever a button is clicked on the page, I am dynamically creating an array in javascript using item id's fetched from the database. Each entry in the array will hold a custom object. The id's retrieved from the database can range from numbers ...

javascriptarraysmemory-management

An inquiry regarding props in JavaScript with ReactJS

Check out the following code snippet from App.js: import React from 'react' import Member from './Member' function App () { const members = [ { name: 'Andy', age: 22 }, { name: 'Bruce', age: 33 }, { n ...

javascriptreactjs

Use a swipe gesture to move through the slideshow on a touchscreen device

I am currently working on a slideshow that allows users to navigate through images by clicking either the next or previous buttons. When a user clicks on one of these buttons, the next or previous image is loaded into the img src, as shown below. In addit ...

javascriptandroidjqueryiphonejquery-mobile

Utilizing Vanilla JavaScript to retrieve information from a HTML table

I am currently running my website on XAMPP and I have a database connection set up that I can use. In my database, I have three drop-down menus labeled Translations, Books, and Chapters where the data for each is stored. My goal is to utilize Vanilla JS ...

javascriptmysqlexpress

Exploring the wonders of looping through arrays in Vue

Double-checking my approach here. In my Vuex store, I have an array of objects that I want to iterate over and render a component for each object. This array is named projects. This is how the loop is structured: <project-item v-for="project in projec ...

javascriptvue.js

How can MessagePorts be effectively utilized in electron Js?

What are some real-world applications of using MessagePorts in Electron JS? Why is it necessary instead of just using ipcRenderer.invoke? I haven't been able to identify any practical scenarios where MessagePorts are indispensable. It seems like it&ap ...

javascriptnode.jselectrondesktop-applicationwebapi

Concealed HTML element or generated on-the-fly using JavaScript

What is considered the best practice? I have multiple windows on a page: Auth, Execution Result, and Popups. I can display them in two ways: Create them in pure HTML with CSS, set to display: none, and then fadeIn using jQuery. Create the elements ...

javascripthtmljquery

struggling to retain data within scope when utilizing localstorage in angular

Currently, I am utilizing the fileReader to read a file, save the image in localStorage, and then display it on the view. In the controller: angular.module('App')controller('publsherProfileEditCtrl', ['$rootScope', '$sc ...

javascriptangularjs

React.js mouse and touch events do not function properly when on a mobile device's screen

View React, javascript, CSS codes for this issue I encountered some problems with my codepen codes. The code is too long to paste here, so I have included a snippet below. You can view the full code and output screen by clicking on the link below: View O ...

javascriptreactjsreact-hookstouch-event

What is the proper way to retrieve a specific element within a multidimensional array?

Here is an example of the array structure I am working with: $arr [0] [code]='a code' [number]='a number' [1] [code]='a code' [number]='a number' [2] [code]='a code' ...

phparrays

What methods can I use to prevent VueJS S3 Deploy from repeatedly uploading static files?

In the process of developing a new VueJS application with Vue's CLI tool, I have been including several images and fonts in the "assets" directory within "src". However, each time I run the vue-cli-service s3-deploy command, it ends up re-uploading al ...

javascriptvue.jswebpackfrontendweb-deployment

Ways to display certain JSON elements

I'm attempting to retrieve a specific part of a JSON file through AJAX and display it in an HTML div. I only want to show a certain object, like the temperature. Here is the AJAX code: $(function () { $.ajax({ 'url': 'http://ap ...

javascripthtmljqueryjsonajax