Eliminate nested object properties using an attribute in JavaScript

I am working with a nested object structured like this

const data = [
  { id: '1', description: 'desc 1', 
   data : [
  { id: '5', description: 'desc',  number :1 },
  { id: '4', description: 'descip',  number :2 } ],
  { id: '2', description: 'desc 2', 
   data: [
  { id: '5', description: 'desc', number: 3 },
  { id: '4', description: 'descip', number: 4 },
  { id: '2', description: 'descipr', number: 6 }
   ]},
];

I aim to transform this object using the reduce method and then feed the transformed data into chartjs

data =[
 desc :  { id: '5', description: { 'desc1' ,'desc2'},  number :{1,3}  },
 descip: { id: '4', description: { 'desc1' ,'desc2'},  number :{2,4} },
 descipr: { id: '2', description: { 'desc2'},  number :{6} }

]

Your assistance on this matter would be greatly appreciated

javascriptangulartypescriptchart.js

Answer №1

Is this essentially a simple groupBy function?

const data = [
  { id: '1', description: 'desc 1', number: 1 },
  { id: '2', description: 'desc 2', number: 2 },
  { id: '3', description: 'desc 2', number: 3 },
  { id: '4', description: 'desc 1', number: 4 },
  { id: '5', description: 'desc 4', number: 5 },
];

const grouped = data.reduce((prev, next) => ({
  ...prev,
  [[next.description]]: (prev[next.description] ?? []).concat(next)
}), {});

console.log(grouped);

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

Trouble with formatting a HTML form

I have been working on dynamically creating HTML forms using a function called makeInput(). However, I am facing an issue where the text input boxes are appearing next to each other when I click the "Add Course" button, instead of one per line. Below is ...

javascripthtml

Updating the index page with AJAX in Rails 4: Step-by-step guide

It's surprising that I haven't found answers to my specific questions despite searching extensively. I have an Expenses page where I want to display all expenses for a given month in a table. Currently, I achieve this by adding month and year par ...

javascriptjqueryruby-on-railsajaxjson

The complete Angular 2 application fails to load when accessed using a custom domain name

I've been struggling for the past few days trying to solve a strange issue. When I try to access my Angular 2 app using a domain name (example.com), it gets stuck on the loading screen. However, if I try accessing the same app without nginx, it loads ...

angularnginxweb-applicationsdns

unable to display loading image prior to upload

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html lang="en"> <head> <title>Unique Prints</title> <meta charset="utf-8"> <meta name="viewport" conte ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Creating an embedded link to a website that adjusts to different screen sizes while also dynamically changing

I've been developing a personalized site builder that includes an iframe for previewing responsive websites. In order to make the site 'zoomed out' and not appear in mobile size, I'm utilizing CSS scale and transform origin as shown bel ...

javascriptjqueryiframeiframe-resizer

What methods can be employed to execute a intricate substitution utilizing both javascript and jQuery?

Within the source code of my web pages, I have elements that resemble the following: <div id="opt_3" >A)</div> <div id="opt_2" >B)</div> <div id="opt_4" >C)</div> <div id="opt_5" >D)</div> <div id="op ...

javascriptjquery

You can obtain the values of multiple div selections using jQuery

In a display with two columns, I want to be able to perform a common operation (such as delete) based on the selection of certain div IDs. If a user selects the div IDs participant_1, participant_4, participant_6 at the same time, I need to collect these ...

javascriptjquery

Issues with executing the intended task for a jQuery onclick function

I have a unique jQuery script set up where when #block4 is clicked, the .maincontent div will show. Initially it works perfectly by showing and then hiding the div. However, after the first two clicks, the .maincontent div shows and immediately disappears. ...

javascriptjqueryclick

Client.on facing issue with receiving data upon initial connection

Currently, I am utilizing the net module in order to establish a connection between my client and server. Below is the code snippet: const Net = require('net'); client = Net.connect(parseInt(port), host, function() { co ...

javascriptnode.jstcpsocket.io

Encountering problem with JSON in the bodyParser function

I've encountered an issue while sending data from my React component using the Fetch API and receiving it as JSON on my Express server. When I try to parse the data using the jsonParser method from bodyParser, I only get back an empty object. Strangel ...

javascriptjsonexpressfetch-apibody-parser

Adjust the size of an iFrame's content according to the dimensions of the iFrame

I am looking to use an iFrame for embedding a map, and my goal is to resize the map according to the values in the iFrame tag. Most tutorials I have found focus on auto-sizing the iFrame based on content, which is not what I need. Just to make it clear, I ...

javascripthtmliframe

Router Express, parsing the body, and submitting a POST request

I have been experimenting with express.Router to organize my routes and testing post requests using Postman. I noticed that when I make a post request to /test without using router body-parser, everything works fine and I can view the body content. However ...

javascriptnode.jsapiexpressexpress-router

Using AJAX to upload an image and passing multiple parameters

I'm facing an issue when trying to upload an image along with other input text in a form and send it to ajax_php_file.php. Whenever I upload the image, all my input text fields appear empty. Any assistance would be greatly appreciated. Thank you very ...

javascriptphpjqueryhtmlajax

How can Angular CLI prevent the submission of an HTML form unless a previous option has been selected

I am currently working on a form that contains select fields with various options pre-populated. <form [formGroup]="selectVehicleForm"> <select formControlName="Manufacturer"> <option *ngFor='let ...

htmlangulartypescriptformsselect

Can you explain the distinction between angular input and native HTML attributes when used with HTML tags?

Take the input tag as an example, where you have two options to specify a maximum length: <input [maxLength]="20" type="text"> <input maxLength="20" type="text"> Are there any real-world distinctions between using one approach over the othe ...

htmlangular

Utilizing client extension for Postgres with Prisma to activate RLS: A step-by-step guide

Recently, I attempted to implement client extension as advised on Github. My approach involved defining row level security policies in my migration.sql file: -- Enabling Row Level Security ALTER TABLE "User" ENABLE ROW LEVEL SECURITY; ALTER TABLE ...

typescriptpostgresqlprisma

When the button onClick event is not functioning as expected in NextJS with TypeScript

After creating a login page with a button to sign in and hit an API, I encountered an issue where clicking the button does not trigger any action. I have checked the console log and no errors or responses are showing up. Could there be a mistake in my code ...

javascripttypescriptnext.js

Changes in React BrowserRouter URLs are not reflected on the page or components, requiring a manual refresh for them to

Greetings, fellow developers! I have developed an app using React with a remote menu component. Despite trying numerous techniques, I am facing an issue where my URL changes but the components are not rendering on the screen. You can check out the code h ...

javascriptreactjsnavigationreact-router

Exploring cross-browser compatibility with the use of CSS3 and JavaScript

Starting a new project to create a fresh website. It seems like many people are leaning towards CSS3 and AJAX, neglecting browsers without JavaScript support. They resort to workarounds like enabling CSS3 through JavaScript in older browsers. Is this the ...

javascriptcssbrowsercompatibility

Is there a way to send a variable to PHP and execute it on the current page?

I need to integrate an inventory search feature on a local clothing store's website. The challenge lies in setting up the PHP script that pulls and organizes the data to run on the same page as the search form itself. Given my limited experience with ...

javascriptphpjqueryajax