Merge objects in arrays in Javascript - javascript

I have three objects in two arrays:
var tab1 = [{"foo":"bar"}, {"foo2":"bar2"}, {"foo3":"bar3"} ];
var tab2 = [ {"2foo":"2bar"}, {"2foo2":"2bar2"}, {"2foo3":"2bar3"} ];
My goal is merge that arrays like this:
var tab3 = [ {"foo":"bar", "2foo":"2bar"}, {"foo2":"bar2",
"2foo2":"2bar2"}, {"foo3":"bar3", "2foo3":"2bar3"} ];
How can I do this?

If you're using jQuery, you can use jQuery.extend().
It does exactly what you want.
Example:
for (var i = 0; i < tab1.length; i++) {
tab1[i] = $.extend(tab1[i], tab2[i]);
}
Here's a fiddle: http://jsfiddle.net/fCx9C/2/
If you don't want to use jQuery, you can see how they implement jQuery.extend() here.
If you do want to use jQuery, here's the jQuerified loop:
$.each(tab1, function (i, t) {
t = $.extend(t, tab2[i]);
});

Demo
function merge(obj1, obj2) {
var tmp = {};
for (var key in obj1) {
tmp[key] = obj1[key];
};
for (key in obj2) {
tmp[key] = obj2[key];
};
return tmp;
};
function zip(arr1, arr2) {
var tmp = [];
for (var i = 0, len = arr1.length; i < len; i++) {
tmp[i] = merge(arr1[i], arr2[i]);
};
return tmp;
};
var tab1 = [{"foo":"bar"}, {"foo2":"bar2"}, {"foo3":"bar3"} ];
var tab2 = [ {"2foo":"2bar"}, {"2foo2":"2bar2"}, {"2foo3":"2bar3"} ];
console.log(zip(tab1, tab2));

This should do what you want:
var merge = function(t1, t2) {
var arr = [];
for(i=0; i<t1.length; i++) {
for(var prop in t2[i]) {
arr.push(t1[i]);
arr[i][prop] = t2[i][prop];
}
}
return arr;
}
var tab3 = merge(tab1, tab2);

This can be done in vanilla JavaScript quite nicely:
var tab1 = [{"foo":"bar"}, {"foo2":"bar2"}, {"foo3":"bar3"} ];
var tab2 = [ {"2foo":"2bar"}, {"2foo2":"2bar2"}, {"2foo3":"2bar3"} ];
var tab3 = [];
for(var i = 0; i < 3; i++) {
for(var j in tab2[i]) {
tab1[i][j] = tab2[i][j];
}
tab3.push(tab1[i]);
}
console.log(tab3);
However, you don't even have to create a tab3 array as it puts everything nicely into tab1 already.

Related

How could I iterate with a for loop to create many objects with Object.create on the fly in javascript?

I am trying to create a function that will dynamically create objects on the fly based on the input number arguments, but I'm running into an issue with iterating over the Object.create() part. I don't know where to play my i in the for loop, but ideally I would have all the sportsCar objects stored in the sportArray. That is the target at least.
function car(doors, capacity, storage) {
this.doors = doors;
this.capacity = capacity;
this.storage = storage;
};
var van = Object.create(car);
van.doors = 4;
van.storage = "rear storage";
var miniVan = Object.create(van);
miniVan.capacity = "200 LB";
var cargoVan = Object.create(van);
cargoVan.capacity = "800 LB";
var truck = Object.create(car);
truck.doors = 2;
truck.storage = "bed";
truck.capacity = "1500 LB";
var familyCar = Object.create(car);
familyCar.doors = 4;
familyCar.storage = "large trunk";
familyCar.capacity = "300 LB";
var sportsCar = Object.create(car);
sportsCar.doors = 2;
sportsCar.storage = "small trunk";
sportsCar.capacity = '100 LB';
function tally(n1, n2, n3, n4, n5) {
var sportArray = [];
var familyArray = [];
var truckArray = [];
var miniArray = [];
var cargoArray = [];
sportsObjs = for(var i = 0; i < n1; i++){
Object.create(sportsCar);
}
sportArray.push(sportsObjs);
for (var i = 0; i < n2; i++){
Object.create(familyCar);
}
for(var i = 0; i < n3; i++){
Object.create(truck)
}
for(var i = 0; i < n4; i++){
Object.create(miniVan)
}
for(var i = 0; i < n5; i++){
Object.create(cargoVan)
}
return console.log(sportsArray);
}
sportsObjs = for(var i = 0; i < n1; i++){
Object.create(sportsCar);
}
sportArray.push(sportsObjs);
That's a plain syntax error. A loop is a statement in JavaScript, not an expression - it doesn't yield a value. You can't assign it to a variable. What you actually want is to assign each newly created object to the variable, and then push that particular new object to the array:
for (var i = 0; i < n1; i++){
var sportsObj = Object.create(sportsCar);
sportArray.push(sportsObj);
}
You need only to push objects in the array inside the loop:
function tally(n1, n2, n3, n4, n5) {
var sportArray = [];
var familyArray = [];
var truckArray = [];
var miniArray = [];
var cargoArray = [];
for(var i = 0; i < n1; i++){
sportArray.push(Object.create(sportsCar)); // To create a generic Object sportArray.push({});
}
.... // And so on for all the arrays
}
The problem is that you declared the different arrays as var so they are not visible outside the body of the function.
You need to return an object containg all the arrays, something like that:
function tally(n1, n2, n3, n4, n5) {
var sportArray = [];
var familyArray = [];
var truckArray = [];
var miniArray = [];
var cargoArray = [];
...
return {
sportArray: sportArray,
familyArray : familyArray,
truckArray: truckArray,
miniArray: miniArray,
cargoArray: cargoArray
}
}
So you can do something like:
var result = tally(3, 4, 5, 6, 7);
console.log(result.sportArray.length);
To be more succint with parameters:
function tally(parameters) {
...
for (var i = 0; i < parameters.n1; i++) {
...
}
...
}
Calling tally in this manner:
var result = tally({n1: 3, n2:4, n3:5, n4:6, n5:7});

Push elements of an array to different keys using Javascript & Angular JS

I'm having an array [0,1,2]. I'm trying to assign the array values to an JSON Object as image1:0, image2:1, image3:2, using Javascript but I'm getting confused. Please find my code here
var app = angular.module('app',[]);
app.controller('EventController',function EventController($scope) {
$scope.count = 0;
$scope.next = function() {
var arr = [0,1,2];
var result = {};
for(var i = 0; i < arr.length; i++) {
result.image1 = arr[i];
result.image2 = arr[i];
result.image3 = arr[i];
}
console.log(result)
}
});
My expected result is Object {image1: 0, image2: 1, image3: 2}
But actual result coming is Object {image1: 2, image2: 2, image3: 2}
My fiddle http://jsfiddle.net/Zvy2c/67/
You may use the bracket operator for accessing the property
for (var i = 0; i < arr.length; i++) {
result['image' + (i + 1)] = arr[i];
}
You are looping through arr and assigning the same value to all your properties. You set everything to 0, then 1, then 2.
Forget about the for loop and just set the properties to whichever entry in the array you want:
var arr = [0,1,2];
var result = {
image1: arr[0],
image2: arr[1],
image3: arr[2]
};
var app = angular.module('app',[]);
app.controller('EventController',function EventController($scope) {
$scope.count = 0;
$scope.next = function() {
var arr = [0,1,2];
var result = {};
for(var i = 0; i < arr.length; i++) {
result['image' + (i+1)] = arr[i];
}
console.log(result)
}
});
You need to change your for loop as
for(var i = 0; i < arr.length; i++) {
result['image'+i] = arr[i];
}

Javascript - count and remove from an object

I have an object with duplicate values and I want to count all those which have the same value and remove them.
var myArray = [{nr: 'bbc',}, {nr: 'bbc'}, {nr: 'bbc'}, {nr: ccc}];
from this array I want to create another array but remove the duplicated values and count them to be like this.
var myArray = [{nr: 'bbc',amount: 3}}, {nr: ccc,amount: 1}];
You could probably use a better format
var count = {};
for(var i = 0; i < myArray.length; ++i) {
if(typeof count[myArray[i].nr] == 'undefined') {
count[myArray[i].nr] = 0;
}
++count[myArray[i].nr];
}
and this wound yield somehing like:
count = {
bcc: 3,
ccc: 1
};
if you still need it with the structure you specified, then:
var newArray = [];
for(var k in count) {
newArray.push({
nr: k,
amount: count[k]
});
}
If you want the same structure, this will work for you
var newArray = [];
for (var i = 0; i < myArray.length; i++) {
var matched = false;
for (var j = 0; j < newArray.length; j++) {
if(myArray[i].nr === newArray[j].nr){
matched = true;
newArray[j].amount++;
break;
}
};
if(!matched)
newArray.push({nr:myArray[i].nr,amount:1});
};
console.log(newArray);

rearrange Array according to values order of another Array

I have two arrays like below
var arr = ["x", "y", "z", "a", "b", "c"];
var tgtArr = [{val:"a"}, {val:"b"}]; It does not need to be as lengthy as Array `arr`
This is what I have tried
var dest = new Array(arr.length);
for(var i = 0; i < arr.length; i++){
for(var k = 0; k < tgtArr.length; k++){
dest[i] = dest[i] || [];
if(tgtArr[k].val == arr[i]){
dest[i] = arr[i];
}
}
}
console.log(dest);
My Expected output is (for above tgtArr value)
[{}, {}, {}, {val:"a"}, {val:"b"}, {}];
if tgtArr is empty Array
[{},{},{},{},{},{}]
Here is the fiddle. Any alternative for this, it seems not a good way to me as I am iterating through the entire array everytime.
Short:
var result = arr.map(function(x) {
return tgtArr.some(function(o) { return o.val == x; }) ? {val:x} : {};
});
This is more efficient:
var set = {};
tgtArr.forEach(function(obj, i) {
set[obj.val] = true;
});
var result = arr.map(function(x) {
return x in set ? {val:x} : {};
});
This is the same as Paul's answer, but with a loop instead of map. It collects the keys first based on the val property, then creates a new array either with empty objects if the key isn't in tgtArr, or copies a reference to the object from tgtArr if it is:
function newArray(arr, tgtArr) {
var keys = {},
i = tgtArr.length,
j = arr.length,
newArr = [];
// Get keys
while (i--) keys[tgtArr[i].val] = tgtArr[i];
// Make new array
while (j--) newArr[j] = arr[j] in keys? keys[arr[j]] : {};
return newArr;
}
It should be efficient as it only traverses each array once.
var dest = new Array(arr.length);
for(var i = 0; i < arr.length; i++){
dest[i] = {}
for(var k = 0; k < tgtArr.length; k++){
if(tgtArr[k].val == arr[i]){
dest[i] = tgtArr[k];
}
}
}
console.log(dest);
I like using map rather than loops for this kind of thing (Fiddle):
var result = arr.map(function(x) {
var match = tgtArr.filter(function(y) {
return y.val == x;
});
if (match.length == 1) return match[0];
else return {};
});
This is a possibly inefficient, in that it traverses tgtArr for every item in arr, so O(n*m). If needed, you could fix that by pre-processing tgtArr and converting it to a hash map (Fiddle). This way you've got an O(n+m) algorithm (traverse each array once):
var tgtMap = {};
tgtArr.forEach(function(x) { tgtMap[x.val] = x; })
var result = arr.map(function(x) {
var match = tgtMap[x];
return match || {};
});
var tmp = {};
for (var i = 0; i < tgtArr.length; i++) {
tmp[tgtArr[i].val] = i;
}
var dest = [];
for (var i = 0; i < arr.length; i++) {
var obj= tmp[arr[i]] === undefined ? {} : tgtArr[tmp[arr[i]]];
dest.push(obj);
}
DEMO

How to merging javascript arrays and order by position?

Is there anyway to merge arrays in javascript by ordering by index/position. I'm try to accomplish this and haven't been able to find any examples of this.
var array1 = [1,2,3,4]
var array2 = [a,b,c,d]
var array3 = [!,#,#,$]
var merged array = [1,a,!,2,b,#,3,c,#,4,d,$]
I know you can use concat() to put one after the other.
As long as the arrays are all the same length you could just do:
var mergedArray = [];
for (var i = 0, il = array1.length; i < il; i++) {
mergedArray.push(array1[i]);
mergedArray.push(array2[i]);
mergedArray.push(array3[i]);
}
EDIT:
For arrays of varying lengths you could do:
var mergedArray = [];
for (var i = 0, il = Math.max(array1.length, array2.length, array3.length);
i < il; i++) {
if (array1[i]) { mergedArray.push(array1[i]); }
if (array2[i]) { mergedArray.push(array2[i]); }
if (array3[i]) { mergedArray.push(array3[i]); }
}
This should work for arrays of ANY length:
var mergeArrays = function () {
var arr = [],
args = arr.slice.call(arguments),
length = 0;
for (var i = 0, len = args.length; i < len; i++) {
length = args[i].length > length ? args[i].length : length;
}
for (i = 0; i < length; i++) {
for (var j = 0; j < len; j++) {
var value = args[j][i];
if (value) {
arr.push(value);
}
}
}
return arr;
};
Example:
var array1 = [1,2,3,4];
var array2 = ['a','b','c','d','e','f','g','h','i','j','k','l'];
var array3 = ['!','#','#','$','%','^','&','*','('];
mergeArrays(array1, array2, array3);
// outputs: [1, "a", "!", 2, "b", "#", 3, "c", "#", 4, "d", "$", "e", "%", "f", "^", "g", "&", "h", "*", "i", "(", "j", "k", "l"]
This would work also (a little more terse syntax):
var mergeArrays = function () {
var arr = [],
args = arr.slice.call(arguments),
length = Math.max.apply(null, args.map(function (a) { return a.length; }));
for (i = 0; i < length; i++) {
for (var j = 0, len = args.length; j < len; j++) {
var value = args[j][i];
if (value) {
arr.push(value);
}
}
}
return arr;
};
For arrays that are all the same size, where you pass one or more arrays as parameters to merge:
function merge()
{
var result = [];
for (var i=0; i<arguments[0].length; i++)
{
for (var j=0; j<arguments.length; j++)
{
result.push(arguments[j][i]);
}
}
return result;
}
var array1 = ['1','2','3','4'];
var array2 = ['a','b','c','d'];
var array3 = ['!','#','#','$'];
var merged = merge(array1, array2, array3);
Nothing built in, but it wouldn't be hard to manage:
var maxLength = Math.max(array1.length, array2.length, array3.length),
output = [];
for (var i = 0; i < maxLength; i++) {
if (array1[i] != undefined) output.push(array1[i]);
if (array2[i] != undefined) output.push(array2[i]);
if (array3[i] != undefined) output.push(array3[i]);
}
try this...
var masterList = new Array();
var array1 = [1,2,3,4];
var array2 = [a,b,c,d];
var array3 = [!,#,#,$];
for(i = 0; i < array1.length; i++) {
masterList.push(array1[i]);
masterList.push(array2[i]);
masterList.push(array3[i]);
}
It looks like you want to "zip" some number of same-length arrays into a single array:
var zip = function() {
var numArrays=arguments.length
, len=arguments[0].length
, arr=[], i, j;
for (i=0; i<len; i++) {
for (j=0; j<numArrays; j++) {
arr.push(arguments[j][i]);
}
}
return arr;
};
zip([1,2], ['a', 'b']); // => [1, 'a', 2, 'b']
zip([1,2,3], ['a','b','c'], ['!','#','#']); // => [1,'a','#',...,3,'c','#']
If the input arrays could be of different length then you've got to figure out how to deal with that case...
Yes, there is some way to do that. Just:
loop through the larger array,
until at the currently processed position both arrays have elements, assign them one-by-one to the new array,
after the shorter array ends, assign only elements from the longer array,
The resulting array will have the elements ordered by the index from the original arrays. From your decision depends, position in which one of these arrays will have higher priority.
This works for any number of array and with arrays of any length.
function myMerge() {
var result = [],
maxLength = 0;
for (var i = 0; i < arguments.length; i++) {
if (arguments[i].length > maxLength) { maxLength = arguments[i].length; }
}
for (var i = 0; i < maxLength; i++) {
for (var j = 0; j < arguments.length; j++) {
if (arguments[j].length > i) {
result.push(arguments[j][i]);
}
}
}
return result;
}
Eli beat me to the punch up there.
var posConcat = function() {
var arrays = Array.prototype.slice.call(arguments, 0),
newArray = [];
while(arrays.some(notEmpty)) {
for(var i = 0; i < arrays.length; i++) {
if(arguments[i].length > 0)
newArray.push(arguments[i].shift());
}
}
return newArray;
},
notEmpty = function() { return arguments[0].length > 0; };
Usage:
var orderedArray = posConcat(array1,array2,array3);
Sample: http://jsfiddle.net/HH9SR/

Categories