We Keep Coding

How to convert the code used with dictionary to ES5?

The code below works well in new browsers with dictionaries like
var CRAFT_DB = {
6: {
id: "6",
type: "blockC",
name: "local name",
recipes: [{
type: "new",
count: "2",
input: [
[{
index: "4",
count: "1"
}],
[{
index: "21",
count: "1"
}]
]
}]
}
}
var input = CRAFT_DB[6].recipes[0].input;
var ingredients = {};
for (var key in input)
ingredients[input[key][0].index] = void 0 === ingredients[input[key][0].index] ? parseInt(input[key][0].count) : ingredients[input[key][0].index] + parseInt(input[key][0].count);
But I should support ES5. But I get the error TypeError: Cannot read property "index" from undefined with ES5-enabled browser.
I tried to convert the code to ES5 with https://babeljs.io/repl, but it didn't help.
How could I fix it?

In earlier versions of JS a lot of the built-in properties on arrays are enumerable.
When you loop over them with in you get those as well as the integer indexes.
input['length'] is going to be undefined, as is input['push'].
Use a regular for (var i = 0; i < index.length; i++) loop.

The following verification helped me -
for (var key in input) {
if (typeof input[key][0] !== 'undefined') {
...
}
}

How to save initial statement of object?

I have object of type:
export interface IGroupLanguage {
name: string;
languages?: Language[];
}
let data = [ { "name": "Automation", "languages": [ { "Name": "English", "Lcid": 1, "RightToLeft": true, "Code": "EN", "Mapped": true } ] }, { "name": "Monitors", "languages": [ { "Name": "Russian", "Lcid": 2, "RightToLeft": true, "Code": "RU", "Mapped": true } ] } ];
Then I tried to filter object and return a new object:
this.filteredObject = [...this.groups];
this.filteredObject.map(item => {
item.languages = item.languages.filter(
lg =>
lg.Name.toLocaleLowerCase().indexOf(searchQuery) != -1 ||
lg.Code.toLocaleLowerCase().indexOf(searchQuery) != -1
);
});
Problem is that initial object this.groups is changed also. How to save initial statement of object?
In result I need to have not modified object this.groups and filtered object this.filteredObject.
I know problem because JS copy objects by reference, but I dont know how to solve it.
Full code is:
search(searchQuery: string) {
this.filteredObject = [...this.groups];
this.filteredObject.map(item => {
let tempLang = [...item.languages];
item.languages = tempLang.filter(
lg =>
lg.Name.toLocaleLowerCase().indexOf(searchQuery) != -1 ||
lg.Code.toLocaleLowerCase().indexOf(searchQuery) != -1
);
});
console.log(this.groups);
}
ngOnInit() {
this.filteredObject = [...this.groups];
}
As result initial object console.log(this.groups); is also was modified

Because you have deep copied parent array of data not nested one, can you give it a try to below way -
this.filteredObject = [...this.groups];
this.filteredObject.map(item => {
let tempLang = [...item.languages];
item.languages = tempLang.filter(lg =>
lg.Name.toLocaleLowerCase().indexOf(searchQuery) != -1 ||
lg.Code.toLocaleLowerCase().indexOf(searchQuery) != -1
);
});

Spread syntax performs a shallow copy of the object.
MDN documentation on copying an array with spread syntax:
Spread syntax effectively goes one level deep while copying an array. Therefore, it may be unsuitable for copying multidimensional arrays as the following example shows (it's the same with Object.assign() and spread syntax).
This means that if there are any objects at the top level, their reference will be copied. That is the reason for this problem.
You can use JSON.parse(JSON.stringify()) to deep clone an object. But there will be data loss if the object has Dates, functions, undefined, Infinity, or other complex types. More info in this answer.
Also, when you are not returning any values use forEach() instead of a map().
this.filteredObject = JSON.parse(JSON.stringify(this.groups));
filteredObject.forEach(item => {
item.languages = item.languages.filter(lg =>
lg.Name.toLocaleLowerCase().indexOf(searchQuery.toLocaleLowerCase()) != -1 ||
lg.Code.toLocaleLowerCase().indexOf(searchQuery.toLocaleLowerCase()) != -1
);
});
This works for properties containing objects at any nested level.
Live Example:
let data = [ { "name": "Automation", "languages": [ { "Name": "English", "Lcid": 1, "RightToLeft": true, "Code": "EN", "Mapped": true } ] }, { "name": "Monitors", "languages": [ { "Name": "Russian", "Lcid": 2, "RightToLeft": true, "Code": "RU", "Mapped": true } ] } ];
let searchQuery = "English";
let filteredObject = JSON.parse(JSON.stringify(data));
filteredObject.forEach(item => {
item.languages = item.languages.filter(lg =>
lg.Name.toLocaleLowerCase().indexOf(searchQuery.toLocaleLowerCase()) != -1 ||
lg.Code.toLocaleLowerCase().indexOf(searchQuery.toLocaleLowerCase()) != -1
);
});
console.log(data);
console.log(filteredObject);

You need to deep clone your object. If you know the structure of your object, you can create a custom deep clone function with recursiveness. Otherwise, you can use the library lodash

how to design better efficient looping using underscore + ES 6

Below are my two arrays.
let clientCollection = ["1","ABC","X12","OE2","PQ$"];
let serverCollection = [{
"Id": "1",
"Name": "Ram",
"Other": "Other properties"
},
{
"Id": "ABC",
"Name": "Shyam",
"Other": "Other properties"
},
{
"Id": "OE2",
"Name": "Mohan",
"Other": "Other properties"
}]
Now I am in need to compare the above two collections & create two sub arrays
let matchedIds = [];
let unMatchedIds = [];
Now this is what I am doing currently.
for(let i =0 ; i < clientsCollection.length;i++)
{
if(_.indexOf(serverCollection, clientCollection[i]) >= 0)
{
matchedIds.push(clientCollection[i]);
}
else
{
unMatchedIds.push(clientCollection[i]);
}
}
In my application, the size of these arrays can increase to 1000 or more. This could be have efficieny issues
I am using underscore & tried if I can get some better solution but couldn't find yet.
Can someone please suggest if I can do the same in better efficient way using underscore + ES6??

I think, this would be a good way for matchedIds population:
for(let i = serverCollection.length - 1; i >= 0; i--) {
const id = serverCollection[i]['Id'];
if(clientCollection.indexOf(id) !== -1) {
matchedIds.push(id);
}
}
And this one is for unMatchedIds after the matchedIds is done:
for (var i = clientCollection.length - 1; i >= 0; i--) {
if (matchedIds.indexOf(clientCollection[i]) === -1) {
unMatchedIds.push(clientCollection[i]);
}
}
None of filter, reduce etc is faster than basic indexOf!
UPD
I created a plunker: https://plnkr.co/edit/UcOv6SquUgC7Szgfn8Wk?p=preview. He says that for 10000 items this solution is up to 5 times faster than other 2 solutions suggested here.

I would make a Set from all the server ids. Then just loop through and see if the id is in the Set and add it to the two arrays:
let serverCollection = [
{
Id: '1',
Name: 'Ram',
Other: 'Other properties'
},
{
Id: 'ABC',
Name: 'Shyam',
Other: 'Other properties'
},
{
Id: 'OE2',
Name: 'Mohan',
Other: 'Other properties'
}
];
let clientCollection = ['1', 'ABC', 'X12', 'OE2', 'PQ$'];
const serverIds = new Set(serverCollection.map((server) => server.Id));
let matchedIds = [];
let unmatchedIds = [];
for (let id of clientCollection) {
if (serverIds.has(id)) {
matchedIds.push(id);
} else {
unmatchedIds.push(id);
}
}
console.log('matched', matchedIds);
console.log('unmatched', unmatchedIds);
As the length of clientCollection and serverCollection increases, the cost of looping through each item becomes more and more apparent.
See a plunkr measuring performance

Create a Set of server ids. Use Array#reduce to iterate the clients, and assign the id to a sub array according to it's existence in the server's set. Extract the sub arrays to variables using destructuring assignment.
const clientCollection = ["1","ABC","X12","OE2","PQ$"];
const serverCollection = [{"Id":"1","Name":"Ram","Other":"Other properties"},{"Id":"ABC","Name":"Shyam","Other":"Other properties"},{"Id":"OE2","Name":"Mohan","Other":"Other properties"}];
// create a set of Ids. You can use underscore's pluck instead of map
const serverSet = new Set(serverCollection.map(({ Id }) => Id));
// reduce the ids to an array of two arrays (matchedIds, unMatchedIds), and then get assign to variables using destructuring assignment
const [matchedIds, unMatchedIds] = clientCollection.reduce((r, id) => {
r[serverSet.has(id) ? 0 : 1].push(id); // push to a sub array according to existence in the set
return r;
}, [[], []])
console.log(matchedIds);
console.log(unMatchedIds);

Merge Arrays Combining Matching Objects in Angular Javascript

I have 2 array objects in Angular JS that I wish to merge (overlap/combine) the matching ones.
For example, the Array 1 is like this:
[
{"id":1,"name":"Adam"},
{"id":2,"name":"Smith"},
{"id":3,"name":"Eve"},
{"id":4,"name":"Gary"},
]
Array 2 is like this:
[
{"id":1,"name":"Adam", "checked":true},
{"id":3,"name":"Eve", "checked":true},
]
I want the resulting array after merging to become this:
[
{"id":1,"name":"Adam", "checked":true},
{"id":2,"name":"Smith"},
{"id":3,"name":"Eve", "checked":true},
{"id":4,"name":"Gary"},
]
Is that possible? I have tried angular's array_merge and array_extend like this:
angular.merge([], $scope.array1, $scope.array2);
angular.extend([], $scope.array1, $scope.array2);
But the above method overlap the first 2 objects in array and doesn't merge them based on matching data. Is having a foreach loop the only solution for this?
Can someone guide me here please?

Not sure if this find of merge is supported by AngularJS. I've made a snippet which does exactly the same:
function merge(array1, array2) {
var ids = [];
var merge_obj = [];
array1.map(function(ele) {
if (!(ids.indexOf(ele.id) > -1)) {
ids.push(ele.id);
merge_obj.push(ele);
}
});
array2.map(function(ele) {
var index = ids.indexOf(ele.id);
if (!( index > -1)) {
ids.push(ele.id);
merge_obj.push(ele);
}else{
merge_obj[index] = ele;
}
});
console.log(merge_obj);
}
var array1 = [{
"id": 1,
"name": "Adam"
}, {
"id": 2,
"name": "Smith"
}, {
"id": 3,
"name": "Eve"
}, {
"id": 4,
"name": "Gary"
}, ]
var array2 = [{
"id": 1,
"name": "Adam",
"checked": true
}, {
"id": 3,
"name": "Eve",
"checked": true
}, ];
merge(array1, array2);

Genuinely, extend in Angular works with object instead of array. But we can do small trick in your case. Here is another solution.
// a1, a2 is your arrays
// This is to convert array to object with key is id and value is the array item itself
var a1_ = a1.reduce(function(obj, value) {
obj[value.id] = value;
return obj;
}, {});
var a2_ = a2.reduce(function(obj, value) {
obj[value.id] = value;
return obj;
}, {});
// Then use extend with those two converted objects
var result = angular.extend([], a1_, a2_).splice(1)
Notes:
For compatibility, reduce may not work.
The after array will replace the previous one. This is because of implementation of extend in Angular.

Search through multidimensional array JavaScript

I got stuck trying to retrive array items. So here is the deal. I have a two dimentional array which has value and key so example of my data is:
[
Object { css="SS", title="Apple"},
Object { css="SS", title="Orange"},
Object { css="SS", title="Banana"}
]
I want to see if an object exists in the array above. And I have no idea why its not working, here is my code to find the object:
jQuery.inArray("Apple", fruits["title"]); //this returns -1 why?
Any ideas how to search two dimensional array?

This is not a 2D array, this is an array of objects, so this should work:
for (var i = 0; i < array.length; i++) {
console.log(array[i].title); //Log the title of each object.
if (array[i].title == "Apple") {
console.log("Found apple!");
}
}
Also, objects are key/val pairs, denoted by key : val, not key = val. Your array has syntax errors and shouldn't run.

To be pedantic, you have an array of objects, not a 2d array. Also your syntax for the object parameters is incorrect.
You can use filter() on the array to find the values:
var array = [
{ css: "SS", title: "Apple"},
{ css: "SS", title: "Orange"},
{ css: "SS", title: "Banana"}
];
var matches = array.filter(function (obj) { return obj.title == "Apple" });
if (matches.length) {
// Apple was in the array...
}

If you have an object like this
var peoples = [
{ "name": "bob", "dinner": "pizza" },
{ "name": "john", "dinner": "sushi" },
{ "name": "larry", "dinner": "hummus" }
];
Ignore what's below. Use the filter method!
peoples.filter(function (person) { return person.dinner == "sushi" });
// => [{ "name": "john", "dinner": "sushi" }]
You can search for people who have "dinner": "sushi" using a map
peoples.map(function (person) {
if (person.dinner == "sushi") {
return person
} else {
return null
}
}); // => [null, { "name": "john", "dinner": "sushi" }, null]
or a reduce
peoples.reduce(function (sushiPeople, person) {
if (person.dinner == "sushi") {
return sushiPeople.concat(person);
} else {
return sushiPeople
}
}, []); // => [{ "name": "john", "dinner": "sushi" }]
I'm sure you are able to generalize this to arbitrary keys and values!

fruits probably is a array, fruits["title"] therefor doesn't exist.
You might want to transform your data:
var fruitTitles = fruits.map(function(f) { return f.title; });
jQuery.inArray("Apple", fruitTitles);

From the jQuery docs:
jQuery.inArray( value, array [, fromIndex ] )
I've never used this method, but a quick guess:
var hasIt = jQuery.inArray({css:"SS",title:"Apple"}, myArray);

As the $.inArray() documentation explains, the first argument to the function is the value to search for. Your array does not have any elements that are equal to the string "Apple" that you have supplied in the first argument because none of your array elements are strings (they're all objects).
The second argument to $.inArray() is supposed to be the array itself, but (assuming fruits is the array you show) fruits["title"] is undefined because your array has no property called "title", only the objects in the array have that property.
Try this instead:
var index = $.inArray("Apple", $.map(fruits, function(el) { return el.title; }));

try this code
var fruits = [
{ css:"SS", title:"Apple"},
{ css:"SS", title:"Orange"},
{ css:"SS", title:"Banana"}
];
jQuery.grep(fruits,function(fruit){return fruit.title == 'Apple'});