Updating multiple array elements at once Javascript

Question

I am trying to update multiple elements at once in a multidimensional array/object and having errors with .push and other options I have tried.

 var FEtypes= {
    textTemplate: {
       type :"Text",
       size : 50,
       required : "no",
       FEadd : '<input>', 
       label : 'Label',
       top : 0, 
       left : 0
    }, 
    textareaTemplate: {
       type : "Textarea",
       cols : 30,
       rows : 5,
       FEadd :'<textarea>' 
    }
 }

This works, but trying to do in one line.

 FEtypes[1].left = someVariable1;
 FEtypes[1].top = someVariable2;

I have been unsuccessful with:

 FEtypes[1].push( {left:someVariable1, top:someVariable2} );

I keep getting an error that this is not a function or it does nothing.

I'm not seeing the multidimensional array here. FETypes looks like an object with two properties, textTemplate and textareaTemplate, each of which is in turn an object. — wrschneider
– wrschneider, Commented Nov 28, 2011 at 2:15
You can't use push on a object like that. push is used to add elements to an array. Not overwrite object properties. Whats wrong with your first example? — Ben
– Ben, Commented Nov 28, 2011 at 2:15
Array is not the same as object. .push is a function used for arrays (ex. ["this", "is", "an", "array"]) and not objects. — JCOC611
– JCOC611, Commented Nov 28, 2011 at 2:15
Note that even if you had an array (and not a "plain" object) .push() would still be the wrong choice because it adds a new element to the end of an array, it doesn't update an existing element. — nnnnnn
– nnnnnn, Commented Nov 28, 2011 at 3:19

Adam Rackis · Accepted Answer · 2011-11-28 02:24:41Z

6

FEtypes is an object, not an array. Push is only available on arrays.

If you want to store this structure in an array, it would look something like:

var FEtypes= [
      {type :"Text", size : 50,  required : "no", FEadd  :'<input>', label : 'Label', top : 0, left : 0}, 
      {type : "Textarea", cols : 30,  rows : 5,FEadd :'<textarea>' }
];

Then

FEtypes[1].left = someVariable1;
FEtypes[1].top = someVariable2;

If you want to modify multiple properties at once, the jQuery extend function will get you what you want:

$.extend(FEtypes[1], {left:someVariable1, top:someVariable2});

But I think your original structure is more suitable. Just ditch arrays, and do this:

FEtypes.textareaTemplate.left = someVariable1;
FEtypes.textareaTemplate.top = someVariable2;

Or, again, with just one line with jQuery:

$.extend(FEtypes.textareaTemplate, {left:someVariable1, top:someVariable2});

edited Nov 28, 2011 at 2:24

answered Nov 28, 2011 at 2:13

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

PointedEars Over a year ago

Object instances and non-Array instances do not have elements. They have only properties. var o = FEtypes[1]; o.left = someVariable1, o.top = someVariable2; works, of course, but is not recommended. You could equally use the semicolon instead of the comma; less error-prone. Why only one line?

user1009749 Over a year ago

Thank you. This worked but it seems to have wiped out the rest of the items in the array. So instead of updating the items it only has these two elements.

PointedEars Over a year ago

You should not be using jQuery for this anyway, it is so overkill. If you want to do this so that it works everywhere, you need a function like extend() that iterates with a for-in loop over the enumerable properties of the object referred by the passed reference. Only Mozilla.org JavaScript 1.7+ (Firefox 2.0+, Gecko 1.8.1+) also supports destructuring assignments: var template = FEtypes.textTemplates; [template.left, template.top] = [someVariable1, someVariable2];

Adam Rackis Over a year ago

@PointedEars - I never meant that OP should drop jQuery into his project just for this. I gave him a non-jQuery way to do what he wanted, then I gave him a jQuery shortcut if it was already in his project, though I should have been more specific about that. And from his comment, it looks like it already was in his project

user1009749 Over a year ago

Using JQuery quite a bit. The project is much more complicated then the sample code I added. I appreciate the input.

jfriend00 · Accepted Answer · 2011-11-28 02:20:49Z

FEtypes is an object and it has two properties textTemplate and textareaTemplate. It is not an array and does not have a property [1]. As such, you can't use .push() or [1].

The proper way to access the .left and .top parameters or the textareaTemplate property is this:

FETypes.textareaTemplate.left = someVariable1;
FETypes.textareaTemplate.top = someVariable2;

or for textTemplate, it would be this:

FETypes.textTemplate.left = someVariable1;
FETypes.textTemplate.top = someVariable2;

Both the textareaTemplate and textTemplate properties are objects. If you wanted to replace the entire object (thus replacing all other properties on the object), you could do this:

FETypes.textTemplate = {left: someVariable1, top: someVariable1};

But, when doing that, you would be replacing the entire textTemplate property so it would have no other properties besides left and top. Any prior properties like size or required would be wiped out by the new assignment.

If you want to update just the left and top properties leaving the others in place, you have to assign to them individually - there is no shortcut unless you write a function to do so like this:

function updatePosition(obj, leftPos, topPos) {
    obj.left = leftPos;
    obj.top = topPos;
}

and then call that function like this:

updatePosition(FETypes.textareaTemplate, someVariable1, someVariable2);

PointedEars · Accepted Answer · 2011-11-28 02:15:51Z

0

FEtypes does not refer to an Array instance. As a result, it has no 1 property, and undefined, which is the result of FEtypes[1] has no properties at all. Your code does not, cannot work. Check the error console.

answered Nov 28, 2011 at 2:15

PointedEars

15k4 gold badges36 silver badges33 bronze badges

Comments

abhisekpaul · Accepted Answer · 2016-05-04 23:16:52Z

0

try this using lodash or underscore:

_.chain(FEtypes).map(item => {
      item.left = item.type === "Text" ? someVariable1 : item.left;
      item.top = item.type === "Text" ? someVariable2 : item.top;
      return item;
    });

answered May 4, 2016 at 23:16

abhisekpaul

5157 silver badges5 bronze badges

Comments

milahu · Accepted Answer · 2020-01-20 16:05:52Z

0

in modern javascript

Object.assign(FEtypes[1], {
  left: someVariable1,
  top: someVariable2
})

// FEtypes[1].left = someVariable1;
// FEtypes[1].top = someVariable2;

answered Jan 20, 2020 at 16:05

milahu

3,7621 gold badge31 silver badges36 bronze badges

Collectives™ on Stack Overflow

Updating multiple array elements at once Javascript

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related