Javascript: transforming an array from another

Question

Javascript: transforming an array from another

In my Firebase array-snapshot, I have entries for my application that include a "referenceDate" timestamp:

entry [0] { referenceDate: 2017-08-03,...
entry [1] { referenceDate: 2017-08-02,...
entry [2] { referenceDate: 2017-08-01,...
entry [3] { referenceDate: 2017-07-03,...
entry [4] { referenceDate: 2017-07-02,...

I am looking to group these entries by month and year with the following format:

My approach is to create a nested array structure like this:

{"monthYear": "08.2017":[
    {"referenzDatum": 2017-08-03},... },
    {"referenzDatum": 2017-08-02},... },
    {"referenzDatum": 2017-08-01},... },]},
 {"monthYear": "07.2017":[
    {"referenzDatum": 2017-07-03},... },
    {"referenzDatum": 2017-07.02},... }, ...]}

I then plan to loop over this structure using two ngFor loops to generate the HTML output.

Does anyone have a more efficient way to achieve this? The code snippet I tried doesn't scale well beyond a few different months and looks messy.

javascript arrays

Answer 1

Answer №1

If you're looking to achieve this sort of functionality, one common approach is to use the groupBy method. While Javascript's Arrays don't have a built-in groupBy function, third-party libraries like underscore.js offer solutions. Alternatively, you can create your own implementation using reduce:

let getMonthYear = (obj) => obj.date.split('-').reverse().slice(1).join('.');

let groupBy = (array, fn) => array.reduce(function(groups, item) {
       let key = fn(item)
       if (!groups[key]) groups[key]=[]
       groups[key].push(item)
       return groups;
   }, {});

let entries = [ { date: '2017-08-03' },
                { date: '2017-08-02' },
                { date: '2017-08-01' },
                { date: '2017-07-03' },
                { date: '2017-07-02' } ]
let groups = groupBy(entries, getMonthYear);
console.log(groups)

This code snippet will yield the following result:

{ '08.2017': 
   [ { date: '2017-08-03' },
     { date: '2017-08-02' },
     { date: '2017-08-01' } ],
  '07.2017': 
   [ { date: '2017-07-03' },
     { date: '2017-07-02' } ] }

For more information on similar topics, check out this related question.

Answer 2

If you're looking to achieve this sort of functionality, one common approach is to use the groupBy method. While Javascript's Arrays don't have a built-in groupBy function, third-party libraries like underscore.js offer solutions. Alternatively, you can create your own implementation using reduce:

let getMonthYear = (obj) => obj.date.split('-').reverse().slice(1).join('.');

let groupBy = (array, fn) => array.reduce(function(groups, item) {
       let key = fn(item)
       if (!groups[key]) groups[key]=[]
       groups[key].push(item)
       return groups;
   }, {});

let entries = [ { date: '2017-08-03' },
                { date: '2017-08-02' },
                { date: '2017-08-01' },
                { date: '2017-07-03' },
                { date: '2017-07-02' } ]
let groups = groupBy(entries, getMonthYear);
console.log(groups)

This code snippet will yield the following result:

{ '08.2017': 
   [ { date: '2017-08-03' },
     { date: '2017-08-02' },
     { date: '2017-08-01' } ],
  '07.2017': 
   [ { date: '2017-07-03' },
     { date: '2017-07-02' } ] }

For more information on similar topics, check out this related question.

Answer 3

Answer №2

 const dateArray = [
      {'referenceDate':'2018-10-01'},
      {'referenceDate':'2018-09-30'},
      {'referenceDate':'2018-09-29'},
      {'referenceDate':'2018-08-31'},
      {'referenceDate':'2018-08-30'}
   ];
  const finalResult = [];

dateArray.forEach(function(record) {
    const newDate = new Date(record.referenceDate);

    const dayValue = newDate.getDate();
    const monthIdx = newDate.getMonth() + 1;
    const yearValue = newDate.getFullYear();

    const customDateFormat = monthIdx+'.'+yearValue;

    if(!(customDateFormat in finalResult)) {
        finalResult[customDateFormat] = [];
    }
    finalResult[customDateFormat].push(record);
});

Answer 4

 const dateArray = [
      {'referenceDate':'2018-10-01'},
      {'referenceDate':'2018-09-30'},
      {'referenceDate':'2018-09-29'},
      {'referenceDate':'2018-08-31'},
      {'referenceDate':'2018-08-30'}
   ];
  const finalResult = [];

dateArray.forEach(function(record) {
    const newDate = new Date(record.referenceDate);

    const dayValue = newDate.getDate();
    const monthIdx = newDate.getMonth() + 1;
    const yearValue = newDate.getFullYear();

    const customDateFormat = monthIdx+'.'+yearValue;

    if(!(customDateFormat in finalResult)) {
        finalResult[customDateFormat] = [];
    }
    finalResult[customDateFormat].push(record);
});

Answer 5

Answer №3

Check out the Lodash documentation, especially the groupBy function

In my opinion, Lodash trumps Underscore.js as a better choice for web development, you can find more information in this informative blog post

Answer 6

Check out the Lodash documentation, especially the groupBy function

In my opinion, Lodash trumps Underscore.js as a better choice for web development, you can find more information in this informative blog post

Answer 7

Answer №4

One approach could be to utilize a hash table:

let schedule = {};

data.forEach((element) => {
  let date = new Date(element.referenceDate),
  year = date.getFullYear(),
  month = date.getMonths() + 1;

  if (!schedule[year]) schedule[year] = [];
  if (!schedule[year][month]) schedule[year][month] = [];

  schedule[year][month].push(element);
});

Subsequently, you can retrieve all available years, arrange them in order, and present them:

Object.values(schedule).sort((x, y) => x - y).forEach((year) => {
  console.log(year);
  for (let [month, entries] of schedule[year].entries()) {
     console.log(month, entries.join("\n"));
  }
});

Answer 8

One approach could be to utilize a hash table:

let schedule = {};

data.forEach((element) => {
  let date = new Date(element.referenceDate),
  year = date.getFullYear(),
  month = date.getMonths() + 1;

  if (!schedule[year]) schedule[year] = [];
  if (!schedule[year][month]) schedule[year][month] = [];

  schedule[year][month].push(element);
});

Subsequently, you can retrieve all available years, arrange them in order, and present them:

Object.values(schedule).sort((x, y) => x - y).forEach((year) => {
  console.log(year);
  for (let [month, entries] of schedule[year].entries()) {
     console.log(month, entries.join("\n"));
  }
});

Answer 9

Answer №5

Give this a shot:

const data = [{ date: '2017-08-03'}, { date: '2017-08-02'}, { date: '2017-08-01'}, { date: '2017-07-03'}, { date: '2017-07-02'}]; 
const finalData = {};

for (var i = 0; i < data.length; i++) {
  const month = data[i].date.substring(0, 7).split('-').reverse().join('.');
  if (!finalData[month]) {
    finalData[month] = [];
  }
  finalData[month].push(data[i]);
}

const outputElement = document.getElementsByClassName('json')[0];
outputElement.innerHTML = JSON.stringify(finalData, undefined, 2);

<pre class="json"></pre>

Answer 10

Give this a shot:

const data = [{ date: '2017-08-03'}, { date: '2017-08-02'}, { date: '2017-08-01'}, { date: '2017-07-03'}, { date: '2017-07-02'}]; 
const finalData = {};

for (var i = 0; i < data.length; i++) {
  const month = data[i].date.substring(0, 7).split('-').reverse().join('.');
  if (!finalData[month]) {
    finalData[month] = [];
  }
  finalData[month].push(data[i]);
}

const outputElement = document.getElementsByClassName('json')[0];
outputElement.innerHTML = JSON.stringify(finalData, undefined, 2);

<pre class="json"></pre>

Javascript: transforming an array from another

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Rotate the image using the handler, not by directly manipulating the image itself

How can we eliminate special characters from arrays stored in a PostgreSQL table?

Arranging particular components within jstree

Form a triangle in order to prevent the inner content from spilling out

Modify the style of a webpage through JavaScript

Images on web pages are automatically resized to fit into a smaller preview window

Exploring the keyof operator in Typescript for object types

What is the best way to fetch all the orders from my product schema using response.send?

Preserve present condition following a jQuery click event

Developing a feature to organize content by categories and implement a functionality to load more data efficiently using NodeJS routes

Having difficulty accessing the API response accurately

Difficulty with Nuxt + Vuex: Retrieving data from state using getter

When applying Bucket Sort to an array sorted in reverse order, the program encounters an ArrayIndexOutOfBoundsException

Struggling to eliminate placeholders using regular expressions in JavaScript

Incorporating a different moment locale may disrupt the original date format

Mixing together an array of colors, experimenting with adding a touch of transparency

Disabling the Annoying Video Popup Ad that's Blocking my "Load More" Feature in Selenium

The length of the HTTP response in Angular is not defined

When selecting an input within a div, the Angular onblur function is behaving erratically

Developing an SQL table for a website using JavaScript