Incorporate fresh data into an array organized by groups using Javascript

I am looking to update my grouped array with new records. For example:

var cars = [{ make: 'audi', model: 'r8', year: '2012' }, { make: 'audi', model: 'rs5', year: '2013' }, { make: 'ford', model: 'mustang', year: '2012' }, { make: 'ford', model: 'fusion', year: '2015' }, { make: 'kia', model: 'optima', year: '2012' }];

var result = cars.reduce(function (r, a) {
    r[a.make] = r[a.make] || [];
    r[a.make].push(a);
    return r;
}, Object.create(null));

console.log(result);

I would greatly appreciate any assistance with this.

Answer №1

Here is a potential solution:

const cars = {"audi":[{"make":"audi","model":"r8","year":"2012"},{"make":"audi","model":"rs5","year":"2013"}],"ford":[{"make":"ford","model":"mustang","year":"2012"},{"make":"ford","model":"fusion","year":"2015"}],"kia":[{"make":"kia","model":"optima","year":"2012"}]};

const addCar = (cars, newCar) =>
    Object.keys(cars).some((key) => key === newCar.make)//check if car already exists
        ? { ...cars, [newCar.make]: cars[newCar.make].concat(newCar) }//car exists
        : { ...cars, [newCar.make]: [newCar] };//car does not exist

console.log(addCar(cars, { make: 'kia', model: 'hello world' }).kia);

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

Instructions on incorporating domains into next.config.js for the "next/image" function with the help of a plugin

Here is the configuration I am currently using. // next.config.js const withImages = require("next-images"); module.exports = withImages({ webpack(config, options) { return config; }, }); I need to include this code in order to allow images from ...

How come props do not get updated along with state changes?

I've encountered an issue where the state of a component being passed into another component as a prop is not updating correspondingly. Various attempts have been made to resolve this, including placing it in the return function and updating the "low ...

javascript create smooth transitions when navigating between different pages

As a newcomer to JS, I am currently working on creating a website with an introduction animation. My goal is to have this animation displayed on a separate page and once it reaches the end, automatically redirect to the next webpage. <body onload="setT ...

Ways to conceal the scroll bar upon the initial loading of a webpage

Recently, I created a single-page website consisting of 4 sections. The client has specific requirements that need to be fulfilled: The scrollbar should not be visible when the page loads. Once the user starts scrolling past the second section, the scrol ...

How to deactivate the <a> tag with Ant Design UI Library

Is there a method in the antd UI library to disable a link? The disabled attribute is not supported by the a tag according to MDN. This code snippet works in React but the link remains clickable when using Next.js. <Tooltip title={tooltip}> <a ...

The logout confirmation message functionality in Laravel 8 is malfunctioning

In my Laravel project, I am attempting to implement a logout confirmation message that will pop up when a user clicks on the logout button. Here is the code I have added to my navbar.blade.php: <a class="dropdown-item" id="logout" hr ...

Can you please explain how to indicate a modification in a JSON object with Polymer, transferring information from Javascript, and subsequently displaying child elements?

Currently, I am creating a JSON file that contains a random assortment of X's and O's. My goal is to display these elements in a grid format using a custom Polymer element. Initially, everything works fine as I can see a new grid generated each t ...

Executing PHP scripts using Ajax

Check out the code snippet below: <?php //echo $this->Html->css(array('bootstrap', 'mark', 'style')); echo $this->Html->script(array('timer','swfobject','bootstrap.min.js')); // ...

Issues with the Diagonal HTML Map functionality

I'm seeking assistance to implement a unique Google Maps Map on my webpage. I have a particular vision in mind - a diagonal map (as pictured below). My initial approach was to create a div, skew it with CSS, place the map inside, and then skew the ma ...

An issue with Ajax's syntax

Help needed with my ajax code. I'm encountering an error while trying to send data in Ajax - specifically with the data syntax. Despite several attempts, I have not been able to successfully resolve this issue. Here is the portion of code causing tro ...

Navigate to the anchor element within the webpage that contains adaptive images

My Bootstrap 4 page contains responsive images and anchor tags within the text. .img-fluid { max-width: 100%; height: auto; } Once I navigate to this page by clicking a link (e.g., 'mypage#section-one'), the page initially loads on the ...

Analyzing file names stored in an array against files existing in a directory structure

$folder = filestructure # Retrieving a list of all directories underneath the specified folder $AllFolders = Get-ChildItem -Recurse -Path $Folder |? {$_.psIsContainer -eq $True} # Obtaining a list of all files directly located at the root of the specified ...

I have a task to execute an Ajax request to retrieve and display data from my database table. My approach involves utilizing Perl CGI and attempting to invoke a Perl script using JavaScript

Encountering an issue in the web console with an error in the document.ready function showing an uncaught syntax error unidentified identifier. This CGI script contains JavaScript that calls a Perl script (TestAj.pl) which returns JSON data. I'm atte ...

get a duplicate of an object

Is this the proper method for creating a duplicate of an object? class ObjectWrapper { private _obj; /*** * Copy object passed as argument to this._obj */ constructor (_obj: Object) { this._obj = _obj; } /** Return copy of this._ ...

Best practices for executing an asynchronous forEachOf function within a waterfall function

I've been working with the async library in express js and I'm encountering an issue when using two of the methods alongside callbacks. The variable result3 prints perfectly at the end of the waterfall within its scope. However, when attempting t ...

An issue arises when trying to group and sum an array of objects due to difficulty converting strings to arrays in TypeScript

Below is the provided code snippet: Definition of Interface - interface IWEXInterface { readonly Date?: string; "Exec Qty"?: string; readonly Expiry?: string; } Data Collection - let data: IWEXInterface[] = [ { Date: &qu ...

Seeking the method to obtain the response URL using XMLHttpRequest?

I'm having trouble with a page (url) that I request via XMLHttpRequest. Instead of getting a response from the requested url, the request is being directed to another page. requesting --- > page.php getting response from > directedpage.php ...

Encountering difficulties while trying to integrate a material view in Angular 6, facing the following error

After creating a page using angular 6, I attempted to implement material view for the UI. However, during the implementation process, I encountered the following error: Despite trying to add the material.js lib, I was unable to resolve the issue. An er ...

Looking for assistance with my MEAN stack To Do App project development

For a test at an enterprise, I have been tasked with creating a "to do APP" using Node js, Express, MongoDB & Angular Js. This is new territory for me as I have never worked with the MEAN Stack before but I am excited to explore it! The base project has al ...

AngularJS checkbox ng-repeat directive not displaying controller data

I am facing an issue with rendering checkbox data from the Controller file in my HTML. Here is the code snippet: HTML: <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script& ...