What is the best way to implement a dynamic input in a findIndex callback function using Javascript?

Question

What is the best way to implement a dynamic input in a findIndex callback function using Javascript?

Referenced from :

let myArray = [
  {id: 0, name: "Jhon"},
  {id: 1, name: "Sara"},
  {id: 2, name: "Domnic"},
  {id: 3, name: "Bravo"}
],
    
//Identify the index of a specific object using findIndex method.    
objIndex = myArray.findIndex((obj => obj.id == 1));

//Display object in Console.
console.log("Before update: ", myArray[objIndex])

//Modify object's name property.
myArray[objIndex].name = "Laila"

//Display updated object in console.
console.log("After update: ", myArray[objIndex])

//Identify index of specific object utilizing findIndex method.    
    objIndex = myArray.findIndex((obj => obj.id == 1));

In the snippet above, I'm using obj.id == 1.

I intend to make it dynamic and not rigid. Is there a way to accomplish this?

javascript arrays

Answer 1

Answer №1

Instead of using the number 1 directly in the findIndex callback, you can utilize a variable.

function changeObject() {
  let myArray = [
    {id: 0, name: "Jhon"},
    {id: 1, name: "Sara"},
    {id: 2, name: "Domnic"},
    {id: 3, name: "Bravo"}
  ]
  
  let id = document.getElementById('myInput').value
  

  //Find index of specific object using findIndex method.    
  objIndex = myArray.findIndex((obj => obj.id == id));

  //Log object to Console.
  console.log("Before edit: ", myArray[objIndex])

  //Modify object's name property.
  myArray[objIndex].name = "Laila"

  //Log object to console again.
  console.log("After edit: ", myArray[objIndex])
  
 }

<label>Modify object</label>
<input type="text" id="myInput" value="1">
<input type="button" value="Modify" onClick="changeObject()">

Answer 2

Instead of using the number 1 directly in the findIndex callback, you can utilize a variable.

function changeObject() {
  let myArray = [
    {id: 0, name: "Jhon"},
    {id: 1, name: "Sara"},
    {id: 2, name: "Domnic"},
    {id: 3, name: "Bravo"}
  ]
  
  let id = document.getElementById('myInput').value
  

  //Find index of specific object using findIndex method.    
  objIndex = myArray.findIndex((obj => obj.id == id));

  //Log object to Console.
  console.log("Before edit: ", myArray[objIndex])

  //Modify object's name property.
  myArray[objIndex].name = "Laila"

  //Log object to console again.
  console.log("After edit: ", myArray[objIndex])
  
 }

<label>Modify object</label>
<input type="text" id="myInput" value="1">
<input type="button" value="Modify" onClick="changeObject()">

Answer 3

Answer №2

let employeesArray = [
  {id: 0, name: "John"},
  {id: 1, name: "Sara"},
  {id: 2, name: "Dominic"},
  {id: 3, name: "Bravo"}
]

const id = prompt('Please enter the ID of the employee:')
    
//Use findIndex method to locate the index of a specific object.    
objIndex = employeesArray.findIndex((obj => obj.id == id));

//Display the object before updating.
console.log("Before updating: ", employeesArray[objIndex])

//Update the employee's name property.
employeesArray[objIndex].name = "Laila"

//Display the updated object on the console.
console.log("After updating: ", employeesArray[objIndex])

I utilized the prompt function in this example to create a user input scenario for entering employee IDs. Run the code snippet to view the outcome.

Answer 4

let employeesArray = [
  {id: 0, name: "John"},
  {id: 1, name: "Sara"},
  {id: 2, name: "Dominic"},
  {id: 3, name: "Bravo"}
]

const id = prompt('Please enter the ID of the employee:')
    
//Use findIndex method to locate the index of a specific object.    
objIndex = employeesArray.findIndex((obj => obj.id == id));

//Display the object before updating.
console.log("Before updating: ", employeesArray[objIndex])

//Update the employee's name property.
employeesArray[objIndex].name = "Laila"

//Display the updated object on the console.
console.log("After updating: ", employeesArray[objIndex])

I utilized the prompt function in this example to create a user input scenario for entering employee IDs. Run the code snippet to view the outcome.

What is the best way to implement a dynamic input in a findIndex callback function using Javascript?

Answer №1

Answer №2

Similar questions

Library in JS for accessing or duplicating a repository on GitHub

dojo combobox with data loaded dynamically from JSON

What are the steps for encoding a value using jquery serialize?

Unable to display image source in viewport

Tips for effectively running multiple XMLHttpRequests in a loop

"Is there a way to adjust the range slider to display currency instead of

How to dynamically reference an input textbox ID using javascript or jquery

NodeJS isn't executing the GET method as expected

Tips for generating a numeric whole number input field with Vuetify

Converting an object to an array with the help of jQuery

First Impressions of Datatables

Command is not displaying JavaScript

Having issues with a local image not loading in React?

Guide on testing conditional rendering in components with Jest and Enzyme

What is the most effective method for displaying or concealing a form row when a specific drop-down option is chosen?

Unable to retrieve JSON element using Fetch

Avoiding the unnecessary re-rendering of input fields in React when their values change

Tips for incorporating your personal touch while utilizing Snipcart

What is the most effective way to update the React state based on an if-else condition within a

Tips for effectively integrating data from MongoDB into a React application