We Keep Coding

Mapping data from two arrays which have different lengths and creating another array

I have two arrays which have two different lengths.
For example:
var array1 = [{name: 'Yuri', age: 2, gender: 'Male'}, {name: 'Akit', age: 19, gender: 'Male'}, {name: 'Kean', age: 14, gender: 'Female'}, {name: 'Jan', age: 29, gender: 'Male'}, {name: 'Max', age: 25, gender: 'Male'}, {name: 'Suzy', age: 20, gender: 'Female'}];
var array2 = [{name: 'Jan', gender: 'Male', occupation: 'Designer'}, {name: 'Max', gender: 'Male', occupation: 'Developer'}, {name: 'Suzy', gender: 'Female', occupation: 'Tester'}];
array1's length is 5 and array2's length is 3. I want to run a loop on both arrays and match the name. If the name matches then I want to extract the that particular object from 2nd array. As they have different lengths loop is breaking at the first array length and not reaching 2nd array's last element. I am running the for loop based on array2 length. Please help me with this.
Expected result:
Name of both arrays should be matched and create another array as below
var array3 = [{name: 'Jan',age: 29, gender: 'Male', occupation: 'Designer'},
same for other objects]

You could take a Set for one array's names and filter the second array.
var array1 = [{name: 'Yuri', age: 9, gender: 'Male'}, {name: 'Akit', age: 19, gender: 'Male'}, {name: 'Kean', age: 14, gender: 'Female'}, {name: 'Jan', gender: 'Male'}, {name: 'Max', gender: 'Female'}],
array2 = [{name: 'Jan', age: 9, gender: 'Male'}, {name: 'Max', age: 19, gender: 'Male'}, {name: 'Suzy', age: 14, gender: 'Female'}],
set2 = new Set(array2.map(({ name }) => name)),
result = array1.filter(o => set2.has(o.name));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

var arr1 = [{name: 'Jan', age: 19}, {name: 'Suzy', age: 29}, {name: 'Peter', age: 39}, {name: 'Bart', age: 49}, {name: 'John', age: 59}];
var arr2 = [{name:'Kean', job: 'Technician'},{name:'Nick', job:'Mathematics'},{name: 'Jan', job: 'Tester'}, {name: 'Suzy', job:'Developer'}, {name: 'Peter', job: 'Scrum master'}];
result = arr1.map(x=> {
y = arr2.find(z=> x.name == z.name);
x.job = y ? y.job : undefined;
return x;
});

What is smallest way to split object into array of object based on key/value pairs in Javascript?

I've got this object:
var obj = {
family : [{name: 'will', age: 30}, {name: 'husain', age: 12}],
friends : [{name: 'cody', age: 31}, {name: 'jeff', age: 11}],
school : [{name: 'daniel', age: 20}, {name: 'carl', age: 15}]
}
convert it into this
var obj = [
{family : [{name: 'will', age: 30}, {name: 'husain', age: 12}]},
{friends : [{name: 'cody', age: 31}, {name: 'jeff', age: 11}]},
{school : [{name: 'daniel', age: 20}, {name: 'carl', age: 15}]}
];
Write now I am using for..in to build a new array and create object with key as key for new object and so on.
I'm doing this right now
var arr = [];
for (let key in obj) {
arr.push({key: obj[key]})
}

I think Object.keys is your best option:
var obj = {
family : [{name: 'will', age: 30}, {name: 'husain', age: 12}],
friends : [{name: 'cody', age: 31}, {name: 'jeff', age: 11}],
school : [{name: 'daniel', age: 20}, {name: 'carl', age: 15}]
}
var r = Object.keys(obj).map(x => ({[x]: obj[x]}) )
console.log(r)

Javascript merge array values belonging to different keys in object

I have an object like this:
data = {
0: [{name: 'ABC', age: '43'}, {name: 'DEF', age: '20'}],
1: [{name: 'GHI', age: '41'}, {name: 'JKL', age: '25'}],
2: [{name: 'MNO', age: '19'}, {name: 'PQR', age: '24'}]
};
I want to merge the array values of the keys, and make a single array of objects like this:
[ {name: 'ABC', age: '43'}, {name: 'DEF', age: '20'}, {name: 'GHI', age: '41'}, {name: 'JKL', age: '25'}, {name: 'MNO', age: '19'}, {name: 'PQR', age: '24'} ]
I went through the Lodash docs to find something, but cannot come up with the right combination. Does anyone know how to do this in a concise way, with Lodash (preferably), or something else? Thanks in advance!!

Extract the arrays using _.values(), and apply concat to the arrays:
var data = {
0: [{name: 'ABC', age: '43'}, {name: 'DEF', age: '20'}],
1: [{name: 'GHI', age: '41'}, {name: 'JKL', age: '25'}],
2: [{name: 'MNO', age: '19'}, {name: 'PQR', age: '24'}]
};
var result = Array.prototype.concat.apply([], _.values(data));
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js"></script>

You just need to convert the array like object to an array, then flatten it.
data = {
0: [{name: 'ABC', age: '43'}, {name: 'DEF', age: '20'}],
1: [{name: 'GHI', age: '41'}, {name: 'JKL', age: '25'}],
2: [{name: 'MNO', age: '19'}, {name: 'PQR', age: '24'}]
};
console.log(
_.flatten(_.toArray(data))
)
<script src="https://cdn.jsdelivr.net/lodash/4.16.4/lodash.min.js"></script>

Without lodash, just plain old JS:
var data = {
0: [{name: 'ABC', age: '43'}, {name: 'DEF', age: '20'}],
1: [{name: 'GHI', age: '41'}, {name: 'JKL', age: '25'}],
2: [{name: 'MNO', age: '19'}, {name: 'PQR', age: '24'}]
};
var result = [];
for (var key in data) {
if (data.hasOwnProperty(key)) {
result = result.concat(data[key]);
}
}
console.log(result);

With the new Object.values() you may do as follows in pure JS ES6;
var data = { 0: [{name: 'ABC', age: '43'}, {name: 'DEF', age: '20'}],
1: [{name: 'GHI', age: '41'}, {name: 'JKL', age: '25'}],
2: [{name: 'MNO', age: '19'}, {name: 'PQR', age: '24'}]
},
newData = [].concat(...Object.values(data));
console.log(newData);

Here is another pure javascript version.
var data = {
0: [{name: 'ABC', age: '43'}, {name: 'DEF', age: '20'}],
1: [{name: 'GHI', age: '41'}, {name: 'JKL', age: '25'}],
2: [{name: 'MNO', age: '19'}, {name: 'PQR', age: '24'}]
};
var newdata = Object.keys(data).reduce(function (a,b) {
return a.concat(data[b]);
}, []);
console.log(newdata);

JavaScript - sort array of objects, by a property based on a special order

I have an array of objects with multiple properties. Given the following array:
var people = [
{name: "allen", age: 33, color:"green"},
{name: "jon", age: 23, color:"blonde"},
{name: "silver", age: 54, color:"yellow"},
{name: "james", age: 52, color:"grey"},
{name: "flint", age: 25, color:"pink"},
{name: "beilly", age: 31, color:"blonde"},
{name: "bwones", age: 47, color:"grey"},
{name: "sas", age: 35, color:"green"},
{name: "jackson", age: 234, color:"yellow"},
{name: "leonsardo", age: 12, color:"brown"},
{name: "dicaeprio", age: 73, color:"pink"},
{name: "sylvfester", age: 35, color:"blonde"},
{name: "alleen2", age: 33, color:"green"},
{name: "jofn2", age: 23, color:"blonde"},
{name: "sdilver2", age: 54, color:"yellow"},
{name: "jamaes2", age: 52, color:"grey"}
];
I need to sort this array by color property, but in a special manner, first by green, then by yellow, then by brown then by pink, then grey and lastly by blonde. I read here and here, but having hard time to generate a compactor based upon my needs. Since this is just a demo array and my real data will be a much larger arrays, the sorting mechanism should be quicker than n^2.

Here is your comparator
var sortOrder = {green: 0, yellow: 1, brown: 2, pink: 3, grey: 4, blonde: 5};
people.sort(function (p1, p2) {
return sortOrder[p1.color] - sortOrder[p2.color];
});

I suggest to use a default value as well for sorting, depending where the non listed color should be sorted.
In this case the properties of the sort order object have to start with a value above zero.
colorOrder = { green: 1, yellow: 2, brown: 3, pink: 4, grey: 5, blonde: 6 };
people.sort(function (a, b) {
return (colorOrder[a.color] || 0) - (colorOrder[b.color] || 0);
});

Use Andrey method, add just one param in your object :
var sortOrder = {green: 0, yellow: 1, brown: 2, pink: 3, grey: 4, blonde: 5};
people.sort(function (p1, p2) {
return sortOrder[p1.color] - sortOrder[p2.color];
});
Or if you really can't use that, create your sort function :
var people =
[
{name: "allen", age: 33, color:"green"},
{name: "jon", age: 23, color:"blonde"},
{name: "silver", age: 54, color:"yellow"},
{name: "james", age: 52, color:"grey"},
{name: "flint", age: 25, color:"pink"},
{name: "beilly", age: 31, color:"blonde"},
{name: "bwones", age: 47, color:"grey"},
{name: "sas", age: 35, color:"green"},
{name: "jackson", age: 234, color:"yellow"},
{name: "leonsardo", age: 12, color:"brown"},
{name: "dicaeprio", age: 73, color:"pink"},
{name: "sylvfester", age: 35, color:"blonde"},
{name: "alleen2", age: 33, color:"green"},
{name: "jofn2", age: 23, color:"blonde"},
{name: "sdilver2", age: 54, color:"yellow"},
{name: "jamaes2", age: 52, color:"grey"}
];
var order = ['green','yellow','brown','pink','grey','blonde'];
function mySort(array)
{
var list = [];
function getElem(array,id)
{
for(var i in array) if(array[i].color == id) list.push(array[i])
}
for(var i in order) getElem(array,order[i]);
return list;
}
mySort(people);

I guess the proper way of doing this job is by a hash and sort but without using sort the following code might as well turn out to be pretty efficient.
var people = [
{name: "allen", age: 33, color:"green"},
{name: "jon", age: 23, color:"blonde"},
{name: "silver", age: 54, color:"yellow"},
{name: "james", age: 52, color:"grey"},
{name: "flint", age: 25, color:"pink"},
{name: "beilly", age: 31, color:"blonde"},
{name: "bwones", age: 47, color:"grey"},
{name: "sas", age: 35, color:"green"},
{name: "jackson", age: 234, color:"yellow"},
{name: "leonsardo", age: 12, color:"brown"},
{name: "dicaeprio", age: 73, color:"pink"},
{name: "sylvfester", age: 35, color:"blonde"},
{name: "alleen2", age: 33, color:"green"},
{name: "jofn2", age: 23, color:"blonde"},
{name: "sdilver2", age: 54, color:"yellow"},
{name: "jamaes2", age: 52, color:"grey"}
],
arrays = [green, yellow, brown, pink, grey, blonde] = [[],[],[],[],[],[]],
result = [];
Object.keys(people).forEach(k => this[people[k].color].push(people[k]));
result = arrays.reduce((p,c) => p.concat(c));
console.log(result);
For an improved performance you might replace the last line with
result = arrays.reduce((p,c) => (Array.prototype.push.apply(p,c),p));

Using select filter in ngTable

I was trying this ngTable example of filtering columns using select values.
HTML code (table part)
<table ng-table="tableParams" class="table" show-filter="true">
<tbody>
<tr ng-repeat="row in $data">
<td data-title="'Name'" filter="{name: 'select'}" filter-data="names" sortable="'name'">{{ row.name }}</td>
<td data-title="'Age'" filter="{age: 'text'}" sortable="'age'">{{ row.age }}</td>
</tr>
</tbody>
</table>
Javascript code
var app = angular.module('ngTableApp', ['ngTable'])
.controller('selectFilterController', function($scope, $filter, $q, NgTableParams) {
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}
];
$scope.names = ['Moroni', 'Enos', 'Nephi'];
$scope.tableParams = new NgTableParams({page: 1, count: 10}, {dataset: data});
})
When I run this code plunker, the select values for column 'Name' are blank.
The example says
The select filter will fetch its data by calling the fetchData function defined for the column.
But, there is no fetchData function called in the code in that example. I am confused as what is the issue here?

From example I figured out that the format used by ng-table for filter-data attribute in HTML(for select values) is array of objects in the following form.
$scope.names = [{id: "", title: ""}, {id: 'Moroni', title: 'Moroni'}, {id: 'Enos', title: 'Enos'}, {id: 'Nephi', title: 'Nephi'}];
Updated plunker.

Should be written like:
$scope.names = [{"id": "", "title": ""}, {"id": "Moroni", "title": "Moroni"}];