Tips for sorting data based on duplicate dates within a single array element

Here is the existing Object Array structure:

[ { "date":"12-09-2019 12:00 PM", "id":"1", "name":"hello1" }, { "date":"12-09-2019 03:00 PM", "id":"2", "name":"hello2" }, { "date":"12-09-2019 07:00 PM", "id":"3", "name":"hello3" }, { "date":"13-09-2019 08:00 AM", "id":"4", "name":"hello4" }, { "date":"14-09-2019 10:00 AM", "id":"5", "name":"hello5" }, { "date":"14-09-2019 11:30 PM", "id":"6", "name":"hello6" } ]

However, I am looking for a new filtered array based on the date as shown below:

[ { "date": "12-09-2019", "data": [ { "id": "1", "name": "hello1" }, { "id": "2", "name": "hello2" }, { "id": "3", "name": "hello3" } ] }, { "date": "13-09-2019", "data": [ { "id": "4", "name": "hello4" } ] }, { "date": "14-09-2019", "data": [ { "id": "5", "name": "hello5" }, { "id": "6", "name": "hello6" } ] } ]

I would appreciate any assistance you can provide in achieving this.

Here is the code snippet of what I have attempted so far:

public data: any;
    public dateGroupArr: any = [];

    this.data.forEach((item, index) => {
      dataArr = item;
      dateGroupArr[item['date']]['date'] = item['date'];
      dataArr.splice(dataArr['date']);
      dateGroupArr[item['date']]['data'] = dataArr;
    });

Thank you for your help.

javascripttypescriptangular6angular8

Answer №1

I trust this information proves to be beneficial to you

var data = [
  {
    date: "12-09-2019 12:00 PM",
    id: "1",
    name: "hello1"
  },
  {
    date: "12-09-2019 03:00 PM",
    id: "2",
    name: "hello2"
  },
  {
    date: "12-09-2019 07:00 PM",
    id: "3",
    name: "hello3"
  },
  {
    date: "13-09-2019 08:00 AM",
    id: "4",
    name: "hello4"
  },
  {
    date: "14-09-2019 10:00 AM",
    id: "5",
    name: "hello5"
  },
  {
    date: "14-09-2019 11:30 PM",
    id: "6",
    name: "hello6"
  }
].map(item => moment(item.updatedAt).format("YYYY-MM-DD"));

var dateList = [...new Set(data.map(item => item.date.split(" ")[0]))]; // please put this

var finalList = dateList.map(item => ({
  date: item,
  data: data.filter(_item => _item.date.includes(item))
}));

console.log(finalList);

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

Rearrange lists by dragging and dropping them according to specific criteria

In my AngularJS project, I am utilizing the angular-drag-and-drop-lists library from here to create two lists with the following functionalities: Dragging items from list A to list B Dragging items from list B to list A Reordering items in list A Reorder ...

javascriptjqueryangularjsdrag-and-drop

Browse through content without displaying the page title on the navigation bar and without the use of frames

When I sign into certain websites, I have noticed that the address displayed is often something like this: https://examplesite.com/access Even though all the links on the landing page are clickable and functional, their corresponding addresses never show ...

javascriptphphtmlcssajax

What is the best way to implement a new search input for my datatable while also enabling the searchHighlight feature?

I'm attempting to implement a search bar for my datatables. I need to hide the default search engine that comes with datatables, so I added a script that I found in a forum. However, when I try to run it in my code, it doesn't work and displays a ...

javascripthtmljquerydatatables

Axios encounters CORS issues, while fetch operates smoothly

After going through various questions on CORS errors to no avail, I am facing a dilemma in my NuxtJS client application. Whenever I try to make a simple POST request using axios, I encounter CORS issues. However, when I switch to using the fetch API, every ...

javascriptrestvue.jscorsnuxt.js

Can we incorporate the typescript map into the object's properties?

I have defined the structure of MenuItem as follows in order to parse the response from the server side rest api: type MenuItem = { id: number; name: string; path: string; tree_id_path: string; children: MenuItem[]; }; The server s ...

typescript

I'm having trouble with my useState in React/NEXTjs because it's not adding onto the result of a socket.io event from the server, it's simply

Frameworks used: Next.js, Socket.io, React I am currently working on a straightforward messaging application. The main concept involves emitting a message typed by a user, sending that message to the server, and then broadcasting it back to all clients th ...

javascriptreactjswebsocketsocket.ionext.js

Manipulating Objects with CSS Transform in Global/Local Coordinates

If we take a closer look at our setup: <div id="outside"> <div id="inside">Foo</div> </div> and apply a rotation to the outer element - let's say turning it 45 degrees clockwise: <div id="outside" style="transform: ro ...

javascripthtmlcss

Ways to reach state / methods outside of a React component

Implementing the strategy design pattern to dynamically change how mouse events are handled in a react component is my current task. Here's what my component looks like: class PathfindingVisualizer extends React.Component { constructor(props) { ...

javascriptreactjs

Implementing Limited Results in Redis FT.SEARCH with TypeScript

Snippet of code: client.ft.SEARCH('license-index-json',"@\\$\\" + ".reservedForApplicationName:GSTest",{ LIMIT: { from: 0, to: 1 } }) Error message: An error occurred when trying t ...

typescriptredis

Is there a way to extract information from an external XML document and incorporate it into an HTML file?

I am attempting to extract information from an XML file that is not stored on my website's server. My goal is to utilize this data for various purposes, such as generating charts. One specific example involves using weather data from an XML file locat ...

javascriptxmlexternal

Accessed a property that is not defined on the instance during rendering

One of the components I'm working on displays data that is defined in the component's state. To access this data, I created a getter: export default createStore({ state: { foo: true, }, getters: { getFoo: state => state.fo ...

javascriptvue.jsvuex

Leveraging AngularJS for a Windows store app

After attempting to integrate AngularJS into my Windows store application, I came across a few recommended solutions: Unfortunately, these solutions did not work as expected. While I didn't encounter the Unable to add dynamic content error, AngularJS ...

javascriptangularjswindows-phone-8

Checking nested arrays recursively in Typescript

I'm facing difficulty in traversing through a nested array which may contain arrays of itself, representing a dynamic menu structure. Below is how the objects are structured: This is the Interface IMenuNode: Interface IMenuNode: export interface IM ...

arraystypescriptrecursionnested

A Promise signature allows for the compilation of function bodies that return undefined

The compiler error that I expected to see when using this function does not actually occur. The function body is capable of returning undefined, yet the type signature does not mention this possibility. async function chat(_: at.ChatLine): Promise<Arr ...

typescript

The Mystery of jQuery Isotope Plugin: Why Can't I Add "display:none" Inline?

I'm currently in the process of integrating Isotope into my latest Wordpress theme. However, I've encountered an issue where it's not appearing on the page due to some external factor adding an inline style (display:none) to the main isotope ...

javascriptjquerycssjquery-pluginsjquery-isotope

The custom validation feature in Angular 4 is failing to function as expected

Currently, my focus is on Angular 4 where I have developed a custom validator for checking CGPA values (to ensure it is between 2.0 and 4.0). Although the predefined `Validators.required` works fine, my custom validator seems to be not triggering as expect ...

angulartypescript

Combining two classes into a single class using ‘this’ in JavaScript

I'm encountering an issue where I am unable to figure out how to extend from the third class. So, I really need guidance on how to call the A class with the parameter 'TYPE', extend it with C, and then be able to call getType() with class C. ...

javascriptoopmultiple-inheritance

React Router Error: Hook call invalid. Remember to only use hooks inside the body of a function component

I am having an issue with my React app that uses react router. In Box.js, I am attempting to access the URL parameters but I am encountering the following error message: Invalid hook call. Hooks can only be called inside of the body of a function component ...

javascriptreactjs

Sequelize.js: Using the Model.build method will create a new empty object

I am currently working with Sequelize.js (version 4.38.0) in conjunction with Typescript (version 3.0.3). Additionally, I have installed the package @types/sequelize at version 4.27.25. The issue I am facing involves the inability to transpile the followi ...

typescriptsequelize.js

Using D3 to create SVG elements in Next.js, the mouseenter event only triggers once

I'm currently developing a React Component that utilizes D3, however, I am facing an issue where the SVG circles are only triggered once. import React, { useEffect, useRef, useState } from 'react'; import * as d3 from 'd3'; import ...

javascriptreactjsd3.jsnext.js