JavaScript: Insert a new key and value at a designated index within an array of objects

Question

JavaScript: Insert a new key and value at a designated index within an array of objects

I currently possess an array of Objects similar to this one.

let arr =  [{name:"abc",age:26},{name:"xyz",age:23},{name:"pqr",age:10}]

let newVal  = arr.map(function(el) {

                

                if(el.age > 25){
                    var o = Object.assign({}, el);
                    o.gender = 'male';
                    return o;

                }
              })

              console.log("New Val : " , newVal)

I am interested in appending {gender:'male'} to objects where the age exceeds 25.

However, it shows undefined for other objects.

I would greatly appreciate any assistance.

Thank you.

javascript arrays object

Answer 1

Answer №1

If the object does not meet the specified condition, make sure to return the value. If nothing is returned from within the map function when the condition is not met, it will result in undefined for the other objects.

let arr = [{
  name: "abc",
  age: 26
}, {
  name: "xyz",
  age: 23
}, {
  name: "pqr",
  age: 10
}]

let newVal = arr.map(function(el) {
  if (el.age > 25) {
    var o = Object.assign({}, el);
    o.gender = 'male';
    return o;

  }
  return el; // make sure to return a value here
})

console.log("New Val : ", newVal)

Answer 2

If the object does not meet the specified condition, make sure to return the value. If nothing is returned from within the map function when the condition is not met, it will result in undefined for the other objects.

let arr = [{
  name: "abc",
  age: 26
}, {
  name: "xyz",
  age: 23
}, {
  name: "pqr",
  age: 10
}]

let newVal = arr.map(function(el) {
  if (el.age > 25) {
    var o = Object.assign({}, el);
    o.gender = 'male';
    return o;

  }
  return el; // make sure to return a value here
})

console.log("New Val : ", newVal)

Answer 3

Answer №2

The problem in your code has already been resolved in another answer by Shubham. For example, when the if clause is not executed, nothing is returned.

However, I believe using forEach might make the code cleaner in this case.

If you wish to preserve the original array, you can make a copy of it using copyArr = [...arr]

let arr =  [{name:"abc",age:26},{name:"xyz",age:23},{name:"pqr",age:10}]
arr.forEach(function(el) {
                if(el.age > 25)
                    el.gender = 'male';
              })

console.log("New Val : " , arr)

Answer 4

The problem in your code has already been resolved in another answer by Shubham. For example, when the if clause is not executed, nothing is returned.

However, I believe using forEach might make the code cleaner in this case.

If you wish to preserve the original array, you can make a copy of it using copyArr = [...arr]

let arr =  [{name:"abc",age:26},{name:"xyz",age:23},{name:"pqr",age:10}]
arr.forEach(function(el) {
                if(el.age > 25)
                    el.gender = 'male';
              })

console.log("New Val : " , arr)

Answer 5

Answer №3

The issue arises from the absence of a return statement when the condition is evaluated as false.

A more concise solution involves using an arrow function in a single line:

let arr =  [{name:"abc",age:26},{name:"xyz",age:23},{name:"pqr",age:10}],
    newVal = arr.map((el) => Object.assign({}, el, el.age > 25 ? {gender: "male"} : {}));

console.log("New Val:", newVal);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 6

The issue arises from the absence of a return statement when the condition is evaluated as false.

A more concise solution involves using an arrow function in a single line:

let arr =  [{name:"abc",age:26},{name:"xyz",age:23},{name:"pqr",age:10}],
    newVal = arr.map((el) => Object.assign({}, el, el.age > 25 ? {gender: "male"} : {}));

console.log("New Val:", newVal);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 7

Answer №4

By using the map function, you can create a new array. Within the function, you can choose to either create a copy of the object with an added property or keep the original object as it is.

let array =  [{ name: "abc", age: 26 }, { name: "xyz", age: 23 }, { name: "pqr", age: 10 }],
    result = array.map(object => object.age > 25 
        ? { ... object, gender: 'male' }
        : object
    );

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 8

By using the map function, you can create a new array. Within the function, you can choose to either create a copy of the object with an added property or keep the original object as it is.

let array =  [{ name: "abc", age: 26 }, { name: "xyz", age: 23 }, { name: "pqr", age: 10 }],
    result = array.map(object => object.age > 25 
        ? { ... object, gender: 'male' }
        : object
    );

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

JavaScript: Insert a new key and value at a designated index within an array of objects

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Creating a custom table layout with JavaScript and jQuery

What are the steps for creating personalized sliders with WordPress?

What sets apart the method of assigning event handlers using bind() versus each() in jQuery?

Ways to access elements and their associated values in a JavaScript Array

What is the best way to set a value for a variable within a UI component in React?

JavaScript - utilizing a confirmation dialog box within a function

When the user clicks on a specific element, ensure that it is the main focus and generate an overlay

How to break down JSON into individual elements using JavaScript

Ways to update the div's appearance depending on the current website's domain

Ways to showcase logs on the user interface

Cease the execution of processes once a Promise has been rejected

``There seems to be an issue with the redirect header function in the PHP

Problem with implementing swipeable tabs using Material-UI in React

Dynamically populating checkboxes and dynamically setting their checked state

Uploading CouchDB document attachments using an HTML form and jQuery functionality

The webpage continues to refresh after executing a JavaScript function triggered by the AJAX response

ReactJS - run a JavaScript snippet once the Ajax call has successfully fetched and displayed the data

Extracting information from ul li div elements and saving it in JSON format

tips for recognizing the selected element

What is the best way to transfer a variable from a node server to a javascript client when the page is first