I need help figuring out how to utilize the Array.find() function in order to modify the name and age properties within a

When it comes to editing properties in an array using the find method, I've been able to do so for a single property like shown in this example. However, I'm struggling to find a syntax that allows me to edit more than one property at a time.

const arr = [
  {
    id: 101,
    name: “Jone”,
    age: 1
  },
  {
    id: 102,
    name: “Jane”,
    age: 2
  },
  {
    id: 103,
    name: “johnny”,
    age: 3
  }
];
console.log(arr);
arr.find(element => element.id == 101).name = “jimmy”
console.log(arr);

Answer №1

For instance, an illustration could involve utilizing the Object.assign method

const exampleArray = [
  {
    id: 101,
    name: 'Jone',
    age: 1
  },
  {
    id: 102,
    name: 'Jane',
    age: 2
  },
  {
    id: 103,
    name: 'johnny',
    age: 3
  }
];

Object.assign(exampleArray.find(element => element.id === 101), {
  name: "Jimmy",
  age: 5,
});

console.log(exampleArray);

Answer №2

To modify the object returned by the find method, you can store it in a variable and make changes to it.

const arr = [
  {
    id: 101,
    name: 'Jone',
    age: 1
  },
  {
    id: 102,
    name: 'Jane',
    age: 2
  },
  {
    id: 103,
    name: 'johnny',
    age: 3
  }
];
console.log(arr);

// ****
const found = arr.find(element => element.id == 101)
found.name = 'jimmy'
found.age = 54
// ****

console.log(arr);

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

Unleashing the Power of Node.js: A Step-by-Step Guide to Crafting

I am developing a console interface that prompts the user with questions and receives input through the console. Some questions require the user to provide a limited number of inputs. I have researched ways to obtain console input in node js, but I haven&a ...

Determine if an element is being hovered over using jQuery

How do I determine if the cursor is hovering over an element using jQuery or JS? I attempted to use $('#id').is(':hover'), but it doesn't seem to be functioning as expected. It's worth mentioning that I am calling this line ...

issue with web worker not sending data to react component

I have incorporated the audio-recorder-polyfill into my React project to enable audio recording for Safari. While the recording seems to initiate successfully, there is an issue with the availability of audio data. The "dataavailable" event does not trig ...

Using JavaScript to merge multiple CSS3 transforms

Is there a way to smoothly combine multiple CSS3 transforms over time? For example, when I first set the scale transform of an element like this: $bgWrapper.css({ '-webkit-transform' : ' scale3d(' + currScale + ', '+ currSca ...

Utilizing the spread operator in React to dynamically populate table data

As I construct a data table, extracting data from the Redux store and organizing it into a useState hook named rowsData and setRowsData for the data table rows. The information obtained from Redux is an array of objects. Subsequently, I introduce the rows ...

Chunk error ECONNREFUSED trigger

Encountered an issue while running through grunt. Getting a proxy error: Econnrefused when trying to run grunt serve. After running --verbose, it seems like the request is being blocked. I suspect it may be due to my organization's network setup, bu ...

Remove the focus from an HTML element when the page loads

After customizing the contents of this theme for my website, I encountered an issue with the login form fragment. Each time the page loads, the focus is automatically directed to the username input field, causing a skewed appearance on the page. Despite at ...

When you use ReactDOM.render inside a <div>, it does not instantly generate HTML code

I am currently working with React version 16.7 and attempting to embed React components into a third-party JavaScript library (specifically, Highcharts) that requires me to output HTML from a function. This is the approach I am taking at the moment: funct ...

Linking two block backgrounds with CSS or JavaScript: A comprehensive guide

I'm working on a website that has a challenging background image. I want to add text at a specific point in the background, but I'm having trouble figuring out how to do it. The page is split into two sections, with each section supposed to disp ...

Guide on effectively incorporating CSS and JS files packaged as an NPM module using gulp

How can I efficiently incorporate CSS and JS files from an NPM package, installed via gulp, into my index.html file? I have used NPM to install the Materialize CSS framework by running: npm install --save-dev materialize-css Now, I need to include the CS ...

Rotating an HTML caret using CSS does not pivot from the center point

Is there a way to adjust my simple caret rotation to make it rotate from the center? What changes should I make? const Wrap = styled.div` width: 100px; background: grey; span { display: block; transform: ${(props) => (props.isOpen ? " ...

Retrieving user information from the database and adding it to the specified element

I've been grappling with what seems like a simple question for the past hour. Below is a script that I have which pulls all active reservations from the reservations table. require("../includes/connect.php"); function dispAllReservations(){ $i= ...

php reload page with included content

I am currently in the process of building a website using php, jquery, Sass, Bootstrap, and more. The setup I have in place involves one main index page that contains all the necessary includes for the header, CSS files, and JavaScript files. Different pa ...

Steps to creating a dynamic transformation of an INPUT field into a TEXTAREA within a Bootstrap4/jQuery web application

I'm curious about a way to have an INPUT field automatically transform into a TEXTAREA in the browser under specific conditions, such as the length of the text within it. Is there a method to achieve this without needing additional logic on the server ...

Having trouble retrieving result data from Google Translate through PhantomJS

In my code, I am attempting to use PhantomJS to get the Google Translate of a word provided in the program. The word "asdasdasd" is being passed to the text area with the ID "source", and then the click event is triggered. After that, I am trying to verify ...

What steps should I take to handle an ArrayIndex out of bound error in JavaScript?

Consider the following array: var john = ['asas','gggg','ggg']; If an attempt is made to access john at index 3, i.e. john[3], it results in an error. Is there a way to show a message or trigger an alert indicating that ther ...

Creating arrays in Python 3: A Beginner's Guide

I am struggling to declare an array in Python3 and keep encountering errors. Python 3.6.7 (default, Oct 22 2018, 11:32:17) [GCC 8.2.0] on linux Type "help", "copyright", "credits" or "license" for more information. >>> numbers=[] >>> num ...

Heroku: Encounter Error 414 (Request-URI Exceeds Length Limit)

EXPECTED OUTCOME: The Post request is successfully completed, saving the poll in the database. CURRENT SITUATION: While my SPA functions properly on my local machine, I encounter a 414 error when attempting to create a Poll after uploading it to Heroku. ...

Three.js fails to display materials

I am currently working on exporting a JSON file from Blender and then rendering it using three.js. As my base code, I have used the following reference: https://github.com/jpetitcolas/webgl-experiments/tree/gh-pages/01-rotating-mesh Initially, when I run ...

Display a JSON encoded array using Jquery

Within an ajax call, I have a single json encoded array set: $var = json_encode($_SESSION['pictures']); The json encoded array is stored in a variable called "array" When I try to display the contents of "array" using alert, I get this respons ...