adding another key and value to an object inside an array with JS

Question

So I currently have a bunch of objects inside an array like below. However, I'm now trying to write a function that allows me to add another key|value into the object that was added last.

My current idea is using the arrayname.length - 1 to work out the position of the object within the array.

Would I need to create a temporary array to store the new object and then set (tempArray = oldArray) at the end of the function or would I concatinate them both?

const state = [
{
    userId: 1,
},
{
    Name: name,
},
{
    age: 52,
},
{
    title: "et porro tempora",

}]

this is the current code


let objects = [];


const addParent = (ev) =>{
  ev.preventDefault();
  // getting the length of the objects array
  let arrayLength = objects.length;
  // if the length of the array is zero - empty or one then set it to default zero
  // else if there is objects stored in the array minus 1 to get the array position
  if(arrayLength <= 0){
    arrayLength = 0;
  }else{
        arrayLength = objects.length - 1;
    }
  //make a temporary array to be able to push new parent into an existing object
  var tempObjects =  []
  for (var index=0; index<objects.length; index++){

  }
  //create a new parent object key : value
  let parent = {
    key: document.getElementById('key').value,
    value: document.getElementById('value').value
    }

//push parent object key and value into object
    //objects.push(parent);

}

document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('btn1').addEventListener('click', addParent);
});

Does this answer your question? [Javascript ES6/ES5 find in array and change](https://stackoverflow.com/questions/35206125/javascript-es6-es5-find-in-array-and-change) — Matt U, Jun 09 '21 at 13:10
Your code doesn't do anything. It instantiates a couple variables, `arrayLength`, `tempObjects`, and `parent` but doesn't do anything with them, and has a for loop with nothing in the execution block. Please update your code so it's clear what you are trying to do. — rook218, Jun 09 '21 at 13:14

score 0 · Answer 1 · answered Jun 09 '21 at 13:21

0

I think You want to add new value to last object of the array

Method 1

const state = [
{
    userId: 1,
},
{
    Name: name,
},
{
    age: 52,
},
{
    title: "et porro tempora",

}]


state[state.length - 1].newKey = "value"

console.log(state)

Method 2

const state = [
{
    userId: 1,
},
{
    Name: name,
},
{
    age: 52,
},
{
    title: "et porro tempora",

}]

// 1st method 

state[state.length - 1] = {
 ...state[state.length - 1] ,
   newKey : "value"
 }
 console.log(state)

answered Jun 09 '21 at 13:21

S B RAKESH RATH

443
3
10

How does this work with taking two user input on a form for example: let infoBoxOne = document.getElementById('key').value let infoBoxTwo = document.getElementById('value').value – iambinaarycode Jun 09 '21 at 14:05
I can't understand what you are trying to say – S B RAKESH RATH Jun 09 '21 at 14:07

score 0 · Answer 2 · answered Jun 09 '21 at 13:27

You can probably use something like this:

const a = [
  { "a" : "a" },
  { "b" : "b" }
  ]
  
const c = a.map((obj, index) => {
  if (index === a.length -1) {
    return { ...obj, newProp: "newProp" }
    }
    return obj;
  });
  
console.log(c)

This will add property on the last object using spread operator, you can look it up if you are new to JS but basically it will retain all the existing property and add the newProp to the object

score 0 · Accepted Answer · answered Jun 09 '21 at 13:31

There are multiple ways to do this. Try this one

var objects = [{
  name: "1"
}];
const addParent = (ev) => {


  let parent = {
    key: "some value",
    value: "some value"
  }

  objects = Array.isArray(objects) ? objects : [];
  let lastObjectIndex = objects.length - 1;
  lastObjectIndex = lastObjectIndex > -1 ? lastObjectIndex : 0
  objects[lastObjectIndex] = { ...objects[lastObjectIndex],
    ...parent
  }



}

adding another key and value to an object inside an array with JS

3 Answers3

Method 1

Method 2