How to add object inside array without reference - javascript

My code is so far
var chartSeriesArray = [{"EnableAnimation": true,"AnimationDuration": 1}];
let refArray = chartSeriesArray;
let clonedArray = [...chartSeriesArray]; // will clone the array
var x = [];
for(i=0;i<2;i++){
x.push(clonedArray);
}
x[0].foo = "bar";
console.log(x);
Console Output is
0:[{…}, foo: "bar"]
1:[{…}, foo: "bar"]
Whether I am trying to loop refArray or clonedArray in both the cases, it's added foo in both item 0 and 1, i want to add only in 0 for example.
Expected output is
0:[{…}, foo: "bar"]
1:[{…}]
I want to access 0 and 1 individually later.
I tried everything but nothing works, Any help is highly appreciated.
Further after all suggestions, when i am trying below code
var metadata =
{
"KPISDetail": [{
"ChartSeriesList": {
"EnableAnimation": true,
"AnimationDuration": 1
}
}, {
"ChartSeriesList": {
"EnableAnimation": true,
"AnimationDuration": 1
}
}]
}
var data = [];
var x = [];
for(var l=0;l<2;l++){
data.push(metadata.KPISDetail[l].ChartSeriesList);
x.push(...data.map(o => Object.assign({}, o)))
}
x[0].foo = "bar";
x[1].foo = "foo";
console.log(x);
Result should be 2 only because my loop is executing 2 times. But i am getting output 3 times, which is wrong. I am getting below output

You are pushing clonedArray into x 2 time but you forgot about both time you are using same variable so memory allocation of both are same so if you want to add something on x element they reflect on both. To achieve desire result that you can use like that -
var chartSeriesArray = [{"EnableAnimation": true,"AnimationDuration": 1}];
let refArray = chartSeriesArray;
let clonedArray = [...chartSeriesArray]; // will clone the array
var x = [];
for(i=0;i<2;i++){
x.push(JSON.parse(JSON.stringify(clonedArray))); // will create magic
}
x[0].foo = "bar";
console.log(x);
Updated Code -
var metadata =
{
"KPISDetail": [{
"ChartSeriesList": {
"EnableAnimation": true,
"AnimationDuration": 1
}
}, {
"ChartSeriesList": {
"EnableAnimation": true,
"AnimationDuration": 1
}
}]
}
var data = [];
var x = [];
for(var l=0;l<2;l++){
x.push(JSON.parse(JSON.stringify(metadata.KPISDetail[1].ChartSeriesList)))
}
x[0].foo = "bar";
x[1].foo = "foo";
console.log(x);

You should create array clone with cloned elements:
let clonedArray = chartSeriesArray.map((item) => Object.assign({}, item))

You can try with the following:
var x = [];
for(i=0;i<2;i++){
let real_clone = clonedArray.slice(0); // if you need to clone an array
let real_clone = JSON.parse(JSON.stringify(clonedArray)); // if you need to clone both array and object
x.push(real_clone);
}

Issue is you create a single cloned array and pushed in multiple time. You need to create a new cloned array for every single push.
var chartSeriesArray = [{"EnableAnimation":true,"AnimationDuration": 1}];
var x = [];
for(i=0;i<2;i++){
x.push([...chartSeriesArray]);
}
x[0].foo = "bar";
console.log(x);

Related

Object value being overwritten in forEach loop

Trying to solve this question and having another question by myself instead.
let arr = [
{"Footprint_Shape":["L-Shape","H-Shape","T-Shape"]},
{"Num_of_Floors":[1,2]}
]
let answer = [];
arr[0]["Footprint_Shape"].forEach(x => {
console.log('x: ',x) //Keeping loop on first array, print the element
let newObj = {};
newObj["Footprint_Shape"] = x;
arr[1]["Num_of_Floors"].forEach(y => {
console.log('y: ',y)
newObj["Num_of_Floors"] = y
answer.push(newObj);
})
});
console.log(answer);
Below is the chrome logging which is what I was expecting.
But when I logging the answer, below is the result instead:
For each of the iteration in arr[1]["Num_of_Floors"], clearly I printed the y value correctly and immediately construct the object and push into array but seems like value 1 has always been overwritten
You are not creating a new object on the second loop. You are just changing the value of newObj in the second loop that you created on the first loop.
You can do something like:
let arr = [{"Footprint_Shape": ["L-Shape", "H-Shape", "T-Shape"]},{"Num_of_Floors": [1, 2]}];
let answer = [];
arr[0]["Footprint_Shape"].forEach(x => {
arr[1]["Num_of_Floors"].forEach(y => {
let newObj = {}; //You have to initate the object inside to create a new object every loop.
newObj["Footprint_Shape"] = x;
newObj["Num_of_Floors"] = y
answer.push(newObj);
});
});
console.log(answer);
Or you can create the object and push at the same time:
let arr = [{"Footprint_Shape": ["L-Shape", "H-Shape", "T-Shape"]},{"Num_of_Floors": [1, 2]}];
let answer = [];
arr[0]["Footprint_Shape"].forEach(x => {
arr[1]["Num_of_Floors"].forEach(y => {
answer.push({Footprint_Shape: x, Num_of_Floors: y}); //Create and push
});
});
console.log(answer);
Here, you're always overwriting the previous value:
arr[1]["Num_of_Floors"].forEach(y => newObj["Num_of_Floors"] = y
So newObj["Num_of_Floors"] will only ever be equal to the last floor in the array after the end of the loop. It sounds like you want to make and push an object on each iteration instead:
let arr = [
{"Footprint_Shape":["L-Shape","H-Shape","T-Shape"]},
{"Num_of_Floors":[1,2]}
]
let answer = [];
arr[0]["Footprint_Shape"].forEach(Footprint_Shape => {
arr[1]["Num_of_Floors"].forEach(Num_of_Floors => {
answer.push({
Footprint_Shape,
Num_of_Floors,
});
})
});
console.log(answer);

Flat array to multi dimensional array (JavaScript)

I have the following array:
var sampleArray = [
"CONTAINER",
"BODY",
"NEWS",
"TITLE"];
I want to have the following output:
var desiredOutput = [{
"CONTAINER": [{
"BODY": [{
"NEWS": [{
"TITLE": []
}]
}]
}]
}];
How can I achieve this in JavaScript?
Already tried with recursive loop, but it does not work, gives me undefined.
dataChange(sampleArray);
function dataChange(data) {
for (var i = 0; i < data.length; i++) {
changeTheArray[data[i]] = data[i + 1];
data.splice(i, 1);
dataChange(changeTheArray[data[i]]);
}
}
Thanks
This does what you're asking for, in one line, and with no additional variables:
let desiredOutput = sampleArray.reduceRight((obj, key) => [ { [key]: obj } ], []);
The reduceRight call, starting from the right hand end of the array, progressively accumulates the current data (seeded with the initial value of []) as the value of the single key in a new object { [key] : _value_ } where that object is itself the single entry in an array [ ... ].
This will do it:
const sampleArray = ["CONTAINER", "BODY", "NEWS", "TITLE"];
const data = []; // Starting element.
let current = data; // Pointer to the current element in the loop
sampleArray.forEach(key => { // For every entry, named `key` in `sampleArray`,
const next = []; // New array
current.push({[key]: next}); // Add `{key: []}` to the current array,
current = next; // Move the pointer to the array we just added.
});
console.log(data);
{[key]: next} is relatively new syntax. They're computed property names.
This:
const a = 'foo';
const b = {[a]: 'bar'};
Is similar to:
const a = 'foo';
const b = {};
b[a] = 'bar';
You could re-write the forEach as a one-liner:
const sampleArray = ["CONTAINER", "BODY", "NEWS", "TITLE"];
const data = []; // Starting element.
let current = data; // Pointer to the current element in the loop
sampleArray.forEach(key => current.push({[key]: current = [] }));
console.log(data);
This current.push works a little counter-intuitively:
Construct a new element to push. This assigns a new value to current.
Push the new element to the reference .push was called on.
That reference is the value of current before current = [].
Hi i made a little demo :
var sampleArray = [
"CONTAINER",
"BODY",
"NEWS",
"TITLE"
],
generateArray = [],
tmp = null;
for(var i = 0; i < sampleArray.length; i++) {
if(tmp===null){
generateArray[sampleArray[i]] = {};
tmp = generateArray[sampleArray[i]];
}else{
tmp[sampleArray[i]] = {};
tmp = tmp[sampleArray[i]];
}
}
console.log(generateArray);

Generating an array with sub-arrays

I realize this is a somewhat off manner of operations, but for the sake of possibility, I'm wondering if anyone can help?
Here array2 is holding the end state I would like array1 to hold (only I want to do it with the for loop. It's fine that each sub_array's have to be initialized as their own variables, I'm just trying to get the array1 to hold N number of sub_arrays via the loop.
Here is the example I've tried, but trying to "compile" it via a string doesn't allow the sub_arrays to be called in a useable manner.
var numberOfSubArrays = 3
var sub_array1 = []
var sub_array2 = []
var sub_array3 = []
var array1 = []
var array2 = [sub_array1,sub_array2,sub_array3]
for (var i = 0; i < numberOfSubArrays; i++) {
array1[i] = "sub_array" + i
}
Any thoughts would be much appreciated!
var numberOfSubArrays = 3
var sub_array1 = [1]
var sub_array2 = [2]
var sub_array3 = [3]
var array1 = []
// we don't need array2 at all
//var array2 = [sub_array1,sub_array2,sub_array3]
// you need to count from 1..n, as you named your sub_arrays like that
for (var i = 1; i <= numberOfSubArrays; i++) {
// you can use eval, but be careful, eval is evil!
array1[i-1] = eval("sub_array" + i)
}
console.log(array1);
Using eval is yucky. This will work in browsers:
var numberOfSubArrays = 3
var sub_array1 = []
var sub_array2 = []
var sub_array3 = []
var array1 = []
var array2 = [sub_array1,sub_array2,sub_array3]
for (var i = 0; i < numberOfSubArrays; i++) {
array1[i] = window["sub_array" + i + 1];
}
In browsers, "global" vars are really objects in "window".
Note: this will not work in tools like jsfiddle, because they put your code inside a function (that you don't see).

clear and undo clear the array

If I do have the following code then empty the arry:
var a1 = [1,2,3];
a1 = [];
//returns []
But I'm trying to make a function to clear and undo clear the array, it's not working as expected:
var foo = ['f','o','o'];
var storeArray;
function clearArray(a){
storeArray = a;
a = [];
}
function undoClearArray(a){
a = storeArray;
}
clearArray(foo);
foo; //still returns ['f','o','o']
//but expected result is: []
Here's the problem:
You assign an array to a variable foo.
Then you pass this object to your function which stores it in another variable a. Now you have one object that two variable are pointing at. In the function you then reassign a to a different object an empty array []. Now a points at the empty object and foo still points at the original object. You didn't change foo by reassigning a.
Here's a concise way to store you're array:
var storeArray = [];
function clearArray(a){
while (a.length>0){
storeArray.push(a.shift()) //now a is empty and storeArray has a copy
}
}
I tried something different. Maybe it's dirty, but the storage itself is on the object.
the fiddle
//define the object to hold the old data
Object.defineProperty(Array.prototype, "storage", {
enumerable: false,
configureable: true,
get: function () {
return bValue;
},
set: function (newValue) {
bValue = newValue;
}
});
//define the prototype function clear to clear the data
Object.defineProperty(Array.prototype, "clear", {
enumerable: false,
writable: false,
value: function () {
this.storage = this.slice(0); //copy the data to the storage
for (var p in this) {
if (this.hasOwnProperty(p)) {
delete this[p]; //delete the data
}
}
return this; //return the object if you want assign the return value
}
});
//define the prototype function restore to reload the data
Object.defineProperty(Array.prototype, "restore", {
enumerable: false,
writable: false,
value: function () {
var a = this.storage.slice(0); //copy the storage to a local var
for (var p in this.storage) {
if (this.storage.hasOwnProperty(p)) {
this[p] = a[p]; //assign the pointer to the new variable
delete this.storage[p]; //delete the storage
}
}
return this;
}
});
var a = ['f','o','o'];
console.log(a); //--> displays ['f','o','o']
a.clear();
console.log(a); //--> displays []
a.restore();
console.log(a); //--> displays ['f','o','o']
You can use splice() method to delete all elements of an array likes below
function clearArray(a){
storeArray = a;
a.splice(0,a.length);
}
var a = [1,2,3,4];
var tempArr ;
clearArray = function() {
tempArr = a.slice(0);
a.length = 0;
}
undoArray = function() {
a = tempArr.slice(0);
}
Here is a small jsfiddle: http://jsfiddle.net/66s2N/
Here's working way of what you want to achieve:
var foo = ['f','o','o'];
var storeArray;
function clearArray(a){
storeArray = a.slice(0);
for (var i=0; i<a.length; i++)
delete a[i];
a.length = 0;
}
function undoClearArray(a){
for (var i=0; i<storeArray.length; i++)
a.push(storeArray[i]);
}
console.log(foo);
clearArray(foo);
console.log(foo); //now foo is []
undoClearArray(foo);
console.log(foo); // now foo is ['f','o','o']
http://jsfiddle.net/44EF5/1/
When you do:
var a1 = [1,2,3];
a1 = [];
it's as if you've written:
var a1 = [1,2,3];
var a1 = [];
You're overwriting variables.
Now, why your approach doesn't work - in JS there's no passing by reference. MarkM response explains what's happening within the function.
Now, why does the above work - while you've got two variables pointing towards the same array, nothing prevents you from modifying that array. As such storeArray = a.slice(0) will create a copy of the array. Then by using delete we're removing all values of the array, and then as length isn't enumerable (so using for (var i in a) wouldn't help) we reassign the length of the array. This has removed the values of original array, while creating a new array assigned to storeArray.
function clearArray(a){
storeArray = a.slice(0);
return a.length = 0;
}
or set foo.length = 0;
Just update your both function with below ones
function clearArray(a){
storeArray = a.slice(0);
a.length = 0;
}
function undoClearArray(a){
a = storeArray;
return a;
}
in undoClearAray() we are returning the variable which have new reference(in your clearArray(), Both the original and new array refer to the same object. If a referenced object changes, the changes are visible to both the new and original arrays). so use it as foo=undoClearArray(foo); for old values.
try
var foo = ['f','o','o'];
var storeArray;
function clearArray(a){
storeArray = a;
a = [];
return a;
}
function undoClearArray(a){
a = storeArray;
}
foo = clearArray(foo);
foo; //returns []
You can use wrappers to do this quite nicely. First create a wrapper function with the additional methods defined, then create your array using that function instead of []. Here is an example (see JSFiddle):
var extendedArray = function() {
var arr = [];
arr.push.apply(arr, arguments);
arr.clearArray = function() {
this.oldValue = this.slice(0);
this.length = 0;
}
arr.undoArray = function() {
this.length = 0;
for (var i = 0; i < this.oldValue.length; i++) {
this.push(this.oldValue[i]);
}
}
return arr;
};
var a = extendedArray('f', 'o', 'o');
alert(a);
a.clearArray();
alert(a);
a.undoArray();
alert(a);

Find duplicates without going through the list twice?

I need to know if one or more duplicates exist in a list. Is there a way to do this without travelling through the list more than once?
Thanks guys for the suggestions. I ended up using this because it was the simplest to implement:
var names = [];
var namesLen = names.length;
for (i=0; i<namesLen; i++) {
for (x=0; x<namesLen; x++) {
if (names[i] === names[x] && (i !== x)) {alert('dupe')}
}
}
Well the usual way to do that would be to put each item in a hashmap dictionary and you could check if it was already inserted. If your list is of objects they you would have to create your own hash function on the object as you would know what makes each one unique. Check out the answer to this question.
JavaScript Hashmap Equivalent
This method uses an object as a lookup table to keep track of how many and which dups were found. It then returns an object with each dup and the dup count.
function findDups(list) {
var uniques = {}, val;
var dups = {};
for (var i = 0, len = list.length; i < len; i++) {
val = list[i];
if (val in uniques) {
uniques[val]++;
dups[val] = uniques[val];
} else {
uniques[val] = 1;
}
}
return(dups);
}
var data = [1,2,3,4,5,2,3,2,6,8,9,9];
findDups(data); // returns {2: 3, 3: 2, 9: 2}
var data2 = [1,2,3,4,5,6,7,8,9];
findDups(data2); // returns {}
var data3 = [1,1,1,1,1,2,3,4];
findDups(data3); // returns {1: 5}
Since we now have ES6 available with the built-in Map object, here's a version of findDups() that uses the Map object:
function findDups(list) {
const uniques = new Set(); // set of items found
const dups = new Map(); // count of items that have dups
for (let val of list) {
if (uniques.has(val)) {
let cnt = dups.get(val) || 1;
dups.set(val, ++cnt);
} else {
uniques.add(val);
}
}
return dups;
}
var data = [1,2,3,4,5,2,3,2,6,8,9,9];
log(findDups(data)); // returns {2 => 3, 3 => 2, 9 => 2}
var data2 = [1,2,3,4,5,6,7,8,9];
log(findDups(data2)); // returns empty map
var data3 = [1,1,1,1,1,2,3,4];
log(findDups(data3)); // returns {1 => 5}
// display resulting Map object (only used for debugging display in snippet)
function log(map) {
let output = [];
for (let [key, value] of map) {
output.push(key + " => " + value);
}
let div = document.createElement("div");
div.innerHTML = "{" + output.join(", ") + "}";
document.body.appendChild(div);
}
If your strings are in an array (A) you can use A.some-
it will return true and quit as soon as it finds a duplicate,
or return false if it has checked them all without any duplicates.
has_duplicates= A.some(function(itm){
return A.indexOf(itm)===A.lastIndexOf(itm);
});
If your list was just words or phrases, you could put them into an associative array.
var list=new Array("foo", "bar", "foobar", "foo", "bar");
var newlist= new Array();
for(i in list){
if(newlist[list[i]])
newlist[list[i]]++;
else
newlist[list[i]]=1;
}
Your final array should look like this:
"foo"=>2, "bar"=>2, "foobar"=>1

Categories

Resources