Set variable to an object array with javascript - javascript

I have an array of objects called objectArray1. I would like to set a second variable, objectArray2, to the value of this first array, and then be able to change it independently.
Here is the code I tried:
var objectArray1 = [
{number:1, color:'red'},
{number:4, color:'blue'}
];
var objectArray2 = objectArray1;
objectArray2[0].number = 7;
console.log(objectArray1);
However, as you can see from the above snippet, changing a value in objectArray2 also changes the same value in objectArray1 (the 1 changes to a 7).
I found some other questions on stackoverflow about this, such as Setting one object equal to another object with the assignment operator in Javascript, but they are all just about objects and not arrays of objects, so I haven't been able to apply them to my case.
To try and fix my issue, I tried some new code which I hoped would work better:
var objectArray1 = [
{number:1, color:'red'},
{number:4, color:'blue'}
];
var objectArray2 = [];
for (i = 0; i < objectArray1.length; i++) {
objectArray2.push(objectArray1[i]);
}
objectArray2[0].number = 7;
console.log(objectArray1);
However, the same thing still happens (the 1 still changes to a 7). How do I solve this?

To do a clone of this you just need to do
var objectArray1 = [
{number:1, color:'red'},
{number:4, color:'blue'}
];
var objectArray2 = JSON.parse(JSON.stringify(objectArray1));
And this will actually create a new copy of the objects and not just reference them and you should be able to work on the separately like you want.

U just need to use a spread operator.
var objectArray1 = [
{number:1, color:'red'},
{number:4, color:'blue'}
];
var objectArray2 = JSON.parse(JSON.stringify(objectArray1 ));
objectArray2[0].number = 7;
console.log(objectArray1);

Related

pushing variables to array returns undefined

SOLVED, Thank you! I needed to specify the index.
I am trying to push a set of variables into an array from user input.
Without using push it is working fine;
var inputStart = addAppointment.inputStart.value;
var inputEnd = addAppointment.inputEnd.value;
var appointmentArr = [];
appointmentArr = {start:inputStart, end:inputEnd};
document.write(appointmentArr.start);
document.write(appointmentArr.end);
however, when I try to push the variables it returns undefined;
var inputStart = addAppointment.inputStart.value;
var inputEnd = addAppointment.inputEnd.value;
var appointmentArr = [];
appointmentArr.push({start:inputStart, end:inputEnd});
document.write(appointmentArr.start);
document.write(appointmentArr.end);
Can anyone explain why this is happening?
As far as I am aware I need to use push because I eventually want to create a new, populated index number every time the user inputs data, so any help is greatly appreciated.
Thanks in advance
You are accessing array.
So, the document.write part should be like this
document.write(appointmentArr[0].start);
document.write(appointmentArr[0].end);
Since appointmentArr is an array, you should fisrt take appointmentArr[0] to access the first element of the array.
After you push the value, the appointmentArr becomes, [{start:inputStart, end:inputEnd}]
Since, it is an array you cannot access object keys directly, you have to take specific index element and then can access them using appointmentArr[index]
var inputStart = 'inputStart';
var inputEnd = 'inputEnd';
var appointmentArr = [];
appointmentArr.push({start:inputStart, end:inputEnd});
document.write(appointmentArr[0].start + ' ');
document.write(appointmentArr[0].end);
Please run the above snippet
You re-assigned your variable as Object.
var appointmentArr = [];
appointmentArr = {start:inputStart, end:inputEnd};
This code overwrite appointmentArr from Array [] to Object { start:inputStart, end:inputEnd }
And in the second code:
var appointmentArr = [];
appointmentArr.push({start:inputStart, end:inputEnd});
You modify appointmentArr from Array [] to Array [ {start:inputStart, end:inputEnd} ].
So, following code will work as you want.
document.write(appointmentArr[0].start);
document.write(appointmentArr[0].end);

JavaScript Array with multiple items

I am trying to create a array with multiple fields in it.
For Example:
var person1 = {firstname:"Bob", lastname:"Smith", middlename:"happy"};
The problem I have is that I have 5000 variables I want to create so it would become:
var person1 = {firstname:"Bob", lastname:"Smith", middlename:"happy"};
var person2 = {firstname:"John", lastname:"Jones", middlename:"Long"};
..
var person5000 = {firstname:"Jim", lastname:"Cook", middlename:"Shorty"};
I think it would be silly to have 5000 lines of code to declare the variables.
So I want to be able to declare the variables on page load and then later assign the values to each.
I was trying to do this using the following code but I am guessing I am doing something wrong.
(I am loading some dummy data into the variables for testing)
<!DOCTYPE html>
<html>
<body>
<script>
var person = new Array (firstName:"", lastName:"", middleName:"");
for (var i = 0; i < 5000; ++i) {
person[i] = {firstName:"First"+i, lastName:"Last"+i, middlename:"Middle"+i};
}
alert(person1["firstName"]); // should alert First1
alert(person6["lastname"]); // should alert Last6
</script>
</body>
</html>
I was hoping to later in my code set the value using:
(I am pretty sure this code should work, but can't test it since I can't declare the variables correctly)
person1[firstname] = "Terry"; // should replace First1 with Terry
And then to receive a value using:
alert(person1[firstname]); // should alert Terry since it was changed
Anyone know what is wrong with my code since it's not returning the value ?
I am guessing I am declaring the variables wrong? If so how should I declare them ?
You appear to be confused about the difference between arrays and objects in Javascript. Arrays have numeric indexes, objects have named properties. So the initialization
new Array(firstName:"", lastName:"", middleName:"");
makes no sense. Not to mention, it's not valid Javascript syntax; property: value pairs can only be used in object literals, not in argument lists. If you use new Array(...), the argument should either be a single number, which is the size of the array to allocate, or a list of initial array element (with no property: prefixes. But the preferred way to create a new array is simply with the [] literal for an empty array; it will grow as necessary when you assign to it.
When you create an array, you don't get separate variables for each element. You access them using array[n] notation.
// Create an empty array
var person = [];
// Fill up the array
for (var i = 0; i < 5000; ++i) {
person[i] = {firstName:"First"+i, lastName:"Last"+i, middlename:"Middle"+i};
}
// Access elements
alert(person[1].firstName);
alert(person[6].middleName);
// Change elements
person[1].firstName = "Terry";
I believe this should work as you intended:
var person = new Array();
for (var i = 0; i < 5000; ++i) {
person[i] = {firstName:"First"+i, lastName:"Last"+i, middleName:"Middle"+i};
}
alert(person[1]["firstName"]);
alert(person[6]["lastName"]);
As pointed out by others, the person array is filled with objects, not arrays. You can use either property or associative array syntax with them.

cannot iterate through array and change value in JS

I have to iterate through an array, change one of its values, and create another array refelecting the changes.
this is what I have so far:
JS:
var arr = new Array();
arr['t1'] = "sdfsdf";
arr['t2'] = "sdfsdf";
arr['t3'] = "sdfsdf";
arr['t4'] = "sdfsdf";
arr['t5'] = "sdfsdf";
var last = new Array();
for (var i = 0; i <= 5; i++) {
arr['t2'] = i;
last.push(arr);
}
console.log(last);
Unfortunately, these are my results
As you can see, I am not getting the results needed as 0,1,2.. instead I am getting 2, 2, 2..
This is what i would like my results to be:
How can I fix this?
You have to make a copy, otherwise you are dealing with reference to the same object all the time. As it was said before - javascript does not have associate arrays, only objects with properties.
var arr = {}; // empty object
arr['t1'] = "sdfsdf";
arr['t2'] = "sdfsdf";
arr['t3'] = "sdfsdf";
arr['t4'] = "sdfsdf";
arr['t5'] = "sdfsdf";
var last = new Array();
for (var i = 0; i <= 5; i++) {
var copy = JSON.parse(JSON.stringify(arr)); //create a copy, one of the ways
copy['t2'] = i; // set value of its element
last.push(copy); // push copy into last
}
console.log(last);
ps: you can use dot notation arr.t1 instead of arr['t1']
The array access with ['t2'] is not the problem. This is a regular JavaScript feature.
The problem is: You are adding the SAME array to "last" (5 times in code, 3 times in the screenshot).
Every time you set ['t2'] = i, you will change the values in "last" also, because they are actually just references to the same array-instance.
You must create a copy/clone of the array before you add it to "last".
This is what will happen in all languages where arrays are references to objects (Java, C#...). It would work with C++ STL though.

very simple, javascript arrays syntax

I have a very simple JS Arrays question, my simple canvas game has been behaving differently when I replaced one block of code with another. Could you look them over and see why they are functionally different from one another, and maybe provide a suggestion? I may need these arrays to have 20+ items so I'm looking for a more condensed style.
There's this one, which is short enough for me to work with, but doesn't run well:
var srd=new Array(1,1,1);
var sw=new Array(0,0,0);
var sang=new Array(0,0,0);
var sHealth=new Array(20,20,20);
And then there's the original one, which is longer but works fine:
var srd = new Array();
srd[1] = 1;
srd[2] = 1;
srd[3] = 1;
var sw = new Array();
sw[1] =0;
sw[2] =0;
sw[3] =0;
var sang = new Array();
sang[1] = 0;
sang[2] = 0;
sang[3] = 0;
var sHealth = new Array();
sHealth[1] = 20;
sHealth[2] = 20;
sHealth[3] = 20;
Arrays are zero-indexed in JavaScript. The first element is 0, not 1:
var srd = new Array();
srd[0] = 1;
srd[1] = 1;
srd[2] = 1;
Also, you may want to use the more common array constructor:
var srd = [1, 1, 1];
I have a feeling that you may be assuming that the first element is 1 instead of 0, which is why the first version doesn't work while the second one does.
You should do this....in Arrays values are stored as such that first one is at 0 and so on.
so 1st value will be accessed as this...
var x = abc[0]; //first value of array abc being assigned to x.
Do this (you see i actually read your question and this is what you like)
var srd=['',1,1,1];
var sw=['',0,0,0];
var sang=['',0,0,0];
var sHealth=['',20,20,20];
you can declare an array(object) in javascript like this
var x = []; -------------Literal - its a shortcut provided by JS to quickly declare something as an Array.
var x = new Array; --Array constructor
Things to look up regarding
literal
object literal
proto
word new
function object
function property prototype
You can also do these:
var x=1,y=2,
z=3,
f;
var b = something || {}; \\become a copy of object called something if it's not there then become an empty object.
It looks like one starts the arrays at index 0 and the other one starts at index 1
It depends on your implementation, but it's likely because of arrays being 0-indexed. In your first block of code, each number is offset by one index spot from the second block. The first one is equivalent to:
var srd = new Array();
srd[0] = 1;
srd[1] = 1;
srd[2] = 1;
in the way you wrote it for the second block.

Global var in JavaScript

This is annoying me.
I'm setting an array in beginning of the doc:
var idPartner;
var myar = new Array();
myar[0] = "http://example.com/"+idPartner;
And I'm getting a number over the address, which is the id of partner. Great. But I'm trying to set it without success:
$.address.change(function(event) {
idPartner = 3;
alert(idPartner);
}
Ok. The alert is giving me the right number, but isn't setting it.
What's wrong?
Changing the value of the variable does not re-set the values within the array. That is just something javascript can't do automatically. You would have to re-generate the array for it to have the new id. Could you add the id to the value where you use the array instead of pre-setting the values in the array containing the id?
Edit: For example, you would do:
var myArray = [];
var myId = 0;
myArray[0] = "http://foo.com/id/";
and when you need to use a value from the array, you would do this:
var theVal = myArray[0] + myId;
Try this:
var myvar = ["http://site.com/"];
$.address.change(function(event) {
myvar[1] = 3;
}
then use myvar.join () where you need the full url.
The problem here is that at the line
myar[0] = "http://site.com/"+idPartner;
..you perform a string concatenation, meaning you copy the resulting string into the array at index position 0.
Hence, when later setting idPartnerit won't have any effect on the previously copied string. To avoid such effect you can either always construct the string again when the idPartnervariable updates or you create an object and you evaluate it when you need it like...
var MyObject = function(){
this.idPartner = 0; //default value
};
MyObject.prototype.getUrl = function(){
return "http://site.com/" + this.idPartner;
};
In this way you could use it like
var myGlblUrlObj = new MyObject();
$.address.change(function(event){
myGlblUrlObj.idPartner = ... /setting it here
});
at some later point you can then always get the correct url using
myGlblUrlObj.getUrl();
Now obviously it depends on the complexity of your situation. Maybe the suggested array solution might work as well, although I prefer having it encapsulated somewhere in an object for better reusability.
myar[0] = "http://site.com/" + idPartner;
After this line, myar[0] = "http://site.com/undefined" and it has nothing to do with the variable idPartner no more.
So, after that changing the value of idPartner will affect the value of myar[0].
You need to change the value of myar[0] itself.

Categories