Choose a duplicate of an element from an array using JavaScript

I have a function that receives an array of items as a parameter. Within this function, I need to locate a specific item and update one of its properties.

const defaultGroup = find(groupedCustomFields, group => group.name === DEFAULT_GROUP); //[find][1] - it's `lodash` function
defaultGroup.fields = defaultGroup.fields.filter(f => !f.isGroupEditable);

This code selects the first matching item from the collection and modifies an object property.

The issue arises when my input collection is also being altered since the found item gets updated within it. To prevent this, I believe I should work with a copy of the item instead.

What would be the most effective approach in achieving this?

const defaultGroup = find(groupedCustomFields, group => group.name === DEFAULT_GROUP),
copyOfDefGroup = Object.assign({}, defaultGroup);

Would using this code be recommended for handling this scenario?

javascripttypescriptcopylodash

Answer №2

Object.assign works well for duplicating objects in my view. Bonus tip - If you need to duplicate an array, use array.slice() as it is the simplest method.

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

The jQuery element selection feature is not functioning

Within my HTML file, there lies a table with an empty tbody that is dynamically filled by jQuery once the document is fully loaded. The content of the table body is generated using a PHP script, where jQuery fetches the data via a simple GET request. Belo ...

phpjavascriptjqueryhtmlajax

Examining the function of a playwright script for testing the capability of downloading files using the window.open

Currently, we are working on a project that uses Vue3 for the frontend and we are writing tests for the application using Playwright. Within our components, there is a download icon that, when clicked, triggers a handler to retrieve a presigned URL from S3 ...

typescriptvuejs3playwrightwebapi

Can you suggest a solution for fixing this error in Angular Js?

I recently started learning Angular JS and encountered some issues while trying to implement routing. Click here for the error message <!DOCTYPE html> Main <a href="#!london">City 1</a> <a href="#!paris">City 2& ...

javascripthtmlangularjs

In JavaScript, the code is designed to recognize and return one specific file type for a group of files that have similar formats (such as 'mp4' or 'm4v' being recognized as 'MOV')

I am working on a populateTable function where I want to merge different file types read from a JSON file into one display type. Specifically, I am trying to combine mp4 and m4v files into MOV format. However, despite not encountering any errors in my code ...

javascriptjson

Tips on incorporating "get_template_directory_uri" into a JavaScript function

I am currently working on my WordPress PHP file code, where I have included a JavaScript snippet to display names and images from a query. While the names are being displayed correctly, I am encountering an issue with the images not showing up. After tryi ...

javascriptphpwordpress

The limitations of String.replace() when it comes to replacing newlines (or any other characters)

I'm currently facing an issue with implementing an "editable" block of text that seems to lose line breaks when edited. My setup involves two elements: a div and a textarea. When the user clicks on Edit, I use the following code to fill the textarea: ...

javascriptjqueryregex

Error message: Cypress Vue component test fails due to the inability to import the Ref type (export named 'Ref' is missing)

Recently, I created a Cypress component test for my Vue component by mounting it and verifying its existence. The component utilizes Vue's Ref type and is structured as a TypeScript component. However, during the test execution, Cypress encountered a ...

typescriptvue.jscypresscypress-component-test-runner

Utilize TypeScript File array within the image tag in HTML with Angular 2

I am in the process of developing a web application that allows users to upload CSV data and images, which are then displayed on the application. However, I have encountered an issue where I am unable to display the imported images. The images are imported ...

htmlangulartypescript

Defining Objects in TypeScript

Within my TypeScript application, I currently have the following code: interface Data { url: string, // more stuff } (...) export class something() { public data: Data; } method(){ this.data.url = "things"; } However, every time I atte ...

typescript

The final piece left in stitching together an array

Issue I have been struggling with this code for some time now and I can't seem to figure out the solution. I am receiving 3 values from inputs and trying to remove all the empty spaces "" in the array, but when I execute the code, it displays the foll ...

javascriptarrays

Why does Selenium's MoveToElement trigger the onmousemove event even when the mouse is stationary?

While conducting some testing with Selenium, I came across an unusual behavior that appears to be causing the window.onmousemove event to fire repeatedly. This occurs even after the mouse movement has ended, which is not the expected behavior. I am seeking ...

javascriptvb.netselenium

Once a React component is wrapped with injectIntl(), the attribute type checking will no longer be effective

If we have a component called Card, it may appear as follows: import * as React from 'react'; interface Props { title: string; } export class Card extends React.Component<Props, null> { public render() { return ( ...

reactjstypescriptreact-intl

How can I perform a mongoose request using express post method?

I need help with querying my MongoDB database using a form in HTML and a post method, it's a bit complicated... Below is the HTML code : <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="interface.css" /> ...

javascriptnode.jsmongodbexpressmongoose

Issues with data binding not being correctly passed to the controller function parameter within the ng-repeat loop

I am in the process of creating a menu that allows users to adjust the CSS on my web application. Within my JavaScript method, I take a string input and then insert it into a URI for a bootswatch CDN. The code functions properly when I manually enter a str ...

javascriptangularjsangularjs-ng-repeatangularjs-ng-click

How to use a self-hosted font in a custom Material-UI theme for ReactJS?

Currently, I am in the process of setting up my initial project utilizing Material-UI for ReactJS. My intention is to personalize the default theme by incorporating a custom font (from the server, not sourced from Google Fonts or anything similar). Despite ...

javascriptreactjsmaterial-ui

AngularJS $location Redirect Error: Property 'path' Undefined

I'm struggling with an issue in my AngularJS code where I am trying to change the URL without reloading the page when a submit button is clicked. However, I keep getting a TypeError: Cannot read property 'path' of undefined in the console. ...

javascriptangularjs

What are some techniques for preventing Null Pointer Exception errors?

Currently, I am working on a project that involves creating a form with a dropdown field for categories. Based on the chosen category, I need to populate a second dropdown called subcaste using AJAX. To achieve this, I have implemented a method that disab ...

javascriptajaxvalidationjspservlets

What is the reason for the allowance of numeric keys in the interface extension of Record<string, ...>

I am currently working on a method to standardize typing for POST bodies and their corresponding responses with API routes in my Next.js application. To achieve this, I have created an interface that enforces the inclusion of a body type and a return type ...

typescriptgenerics

Steps to launching a URL in a new window on Internet Explorer

I want it so that when button1 is clicked, the URL opens in a new window using Internet Explorer. ...

javascripthtml

Navigating through the various levels of organization within Meteor, it is

In my Meteor application, I am dealing with groups and items. Each item is associated with a group. Some groups are part of a larger hierarchy, where a group can contain subgroups. Here is an example of what the hierarchy might look like: Group 1 Su ...

javascriptnode.jsmongodbmeteor