We Keep Coding

Grouping by fields after reduce is not working in JavaScript

There is a complex object and based on an array which is given as an input I need to modify its properties. Illustration is shown below. If the "field" is same , add them to "or" array .If its different "field" add them to "and" array along with its "value". I am using Set to get keys from both source and input and using them to group based on its keys. Also whenever there are duplicates .ie., suppose the "filterObj" already has the same (field, value) pair. Be it in "and" or inside "or",Then don't add it in the final object
Sandbox: https://codesandbox.io/s/optimistic-mirzakhani-pogpw-so-dpvis
There is a TestCases file in the sandbox which its needs to pass
let filterObj = {
feature: "test",
filter: {
and: [{ field: "field2" }]
}
};
let obj = [{ field: "field2", value: "3" }];
let all_filters = [];
if (filterObj.filter.and && filterObj.filter.and.hasOwnProperty("or")) {
all_filters = [...filterObj.filter.and.or];
} else if (filterObj.filter.and) {
all_filters = [...filterObj.filter.and];
}
const all_objs = [...obj, ...all_filters];
const uniqKeys = all_objs.reduce(
(acc, curr) => [...new Set([...acc, curr.field])],
[]
);
const updateItems = uniqKeys.map(obj => {
const filter_items = all_objs.filter(item => item.field === obj);
let resultObj = {};
if (filter_items && filter_items.length > 1) {
resultObj.or = [...filter_items];
} else if (filter_items && filter_items.length === 1) {
resultObj = { ...filter_items[0] };
}
return resultObj;
});
var result = { ...filterObj, filter: { and: [...updateItems] } };
console.log(result);

Try it.
I redid the implementation, it happened more universally.
Parses any filters according to your algorithm that it finds.
All test cases are worked.
Sandbox link: https://codesandbox.io/s/optimistic-mirzakhani-pogpw-so-i1u6h
let filterObj = {
feature: "test",
filter: {
and: [
{
field: "field1",
value: "2"
}
]
}
};
let obj = [
{
field: "field1",
value: "2"
},
{
field: "field1",
value: "1"
}
];
var FilterController = function(filter) {
var self = this;
self.filter = filter;
// encapsulated map of objects by fields
var storeMap = {};
// counter of objects
var counter = 0;
var tryPutObjectToMap = function(object) {
if (typeof object === "object") {
// get type for grouping
var objectType = self.getObjectGroupType(object);
if (objectType !== null) {
// cheack have group
if (!storeMap.hasOwnProperty(objectType)) {
storeMap[objectType] = [];
}
var duplicate = storeMap[objectType].find(function(sObject) {
return self.getObjectValue(sObject) === self.getObjectValue(object);
});
// check duplicate
if (duplicate === undefined) {
counter++;
storeMap[objectType].push(object);
} else {
// TODO: Handle duplicates
}
} else {
// TODO: handle incorrect object
}
}
};
// get filter structure from map
var getFilterStructureFromMap = function() {
var result = {};
// check exists root filter and filed if have objects
if (counter > 0) {
result["and"] = [];
}
for (var key in storeMap) {
if (storeMap.hasOwnProperty(key)) {
var array = storeMap[key];
if (array.length > 1) {
result["and"].push({
// clone array
or: array.slice()
});
} else {
result["and"].push(array[0]);
}
}
}
return result;
};
// rewrite and get current filter
// if you need^ create new object for result
self.rewriteAndGetFilter = function() {
self.filter.filter = getFilterStructureFromMap();
return self.filter;
};
// not prototype function for have access to storeMap
self.putObjects = function(objects) {
if (Array.isArray(objects)) {
// recursive push array elements
objects.forEach(element => self.putObjects(element));
// handle array
} else if (typeof objects === "object") {
// handle object
if (objects.hasOwnProperty("and") || objects.hasOwnProperty("or")) {
for (var key in objects) {
//no matter `or` or `and` the same grouping by field
// inner object field
if (objects.hasOwnProperty(key)) {
self.putObjects(objects[key]);
}
}
} else {
// filters props not found, try push to store map
tryPutObjectToMap(objects);
}
} else {
// TODO: Handle errors
}
};
if (self.filter.hasOwnProperty("filter")) {
// put and parse current objects from filter
self.putObjects(self.filter.filter);
}
};
// function for grouping objects.
// for you get filed name from object.
// change if need other ways to compare objects.
FilterController.prototype.getObjectGroupType = function(obj) {
if (typeof obj === "object" && obj.hasOwnProperty("field")) {
return obj.field;
}
return null;
};
// get object value
FilterController.prototype.getObjectValue = function(obj) {
if (typeof obj === "object" && obj.hasOwnProperty("value")) {
return obj.value;
}
return null;
};
var ctrl = new FilterController(filterObj);
ctrl.putObjects(obj);
var totalFilter = ctrl.rewriteAndGetFilter();
console.log(totalFilter);
console.log(JSON.stringify(totalFilter));
EDIT 1
I did not change the logic; I made a function based on it.
let filterObj = {
feature: "test",
filter: {
and: [
{
field: "field1",
value: "2"
}
]
}
};
let obj = [
{
field: "field1",
value: 2
},
{
field: "field1",
value: "1"
}
];
function appendToFilter(filter, inputObjects) {
var storeMap = {};
var counter = 0;
var handlingQueue = [];
// if filter isset the appen to handling queue
if (filter.hasOwnProperty("filter")) {
handlingQueue.push(filter.filter);
}
// append other object to queue
handlingQueue.push(inputObjects);
// get first and remove from queue
var currentObject = handlingQueue.shift();
while (currentObject !== undefined) {
if (Array.isArray(currentObject)) {
currentObject.forEach(element => handlingQueue.push(element));
} else if (typeof currentObject === "object") {
if (currentObject.hasOwnProperty("and") || currentObject.hasOwnProperty("or")) {
for (var key in currentObject) {
if (currentObject.hasOwnProperty(key)) {
handlingQueue.push(currentObject[key]);
}
}
} else {
// TODO: append fild exists check
if (currentObject.field) {
if (!storeMap.hasOwnProperty(currentObject.field)) {
storeMap[currentObject.field] = [];
}
var localValue = currentObject.value;
// check duplicate
if (storeMap[currentObject.field].find(object => object.value === localValue) === undefined) {
counter++;
storeMap[currentObject.field].push(currentObject);
}
}
}
}
currentObject = handlingQueue.shift();
}
// create new filter settings
var newFilter = {};
// check exists root filter and filed if have objects
if (counter > 0) { newFilter["and"] = []; }
for (var storeKey in storeMap) {
if (storeMap.hasOwnProperty(storeKey)) {
var array = storeMap[storeKey];
if (array.length > 1) {
newFilter["and"].push({
// clone array
or: array.slice()
});
} else {
newFilter["and"].push(array[0]);
}
}
}
filter.filter = newFilter;
}
// update filterObj
appendToFilter(filterObj, obj);
console.log(filterObj);
EDIT 2,3 (UPDATED)
With others objects support.
export function appendToFilter(filter, inputObjects) {
var storeMap = {};
var others = [];
var counter = 0;
var handlingQueue = [];
// if filter isset the appen to handling queue
if (filter.hasOwnProperty("filter") && filter.filter.hasOwnProperty("and")) {
handlingQueue.push(filter.filter.and);
}
// append other object to queue
handlingQueue.push(inputObjects);
// get first and remove from queue
var currentObject = handlingQueue.shift();
while (currentObject !== undefined) {
if (Array.isArray(currentObject)) {
currentObject.forEach(element => handlingQueue.push(element));
} else if (typeof currentObject === "object") {
if (
currentObject.hasOwnProperty("and") ||
currentObject.hasOwnProperty("or")
) {
for (var key in currentObject) {
if (currentObject.hasOwnProperty(key)) {
handlingQueue.push(currentObject[key]);
}
}
} else {
// TODO: append fild exists check
if (currentObject.field) {
if (!storeMap.hasOwnProperty(currentObject.field)) {
storeMap[currentObject.field] = [];
}
var localValue = currentObject.value;
// check duplicate
if (
storeMap[currentObject.field].find(
object => object.value === localValue
) === undefined
) {
counter++;
storeMap[currentObject.field].push(currentObject);
}
} else {
// handle others objects^ without field "field"
counter++;
others.push(currentObject);
}
}
}
currentObject = handlingQueue.shift();
}
// create new filter settings
var newFilter = {};
// check exists root filter and filed if have objects
if (counter > 0) {
newFilter["and"] = [];
}
for (var storeKey in storeMap) {
if (storeMap.hasOwnProperty(storeKey)) {
var array = storeMap[storeKey];
if (array.length > 1) {
newFilter["and"].push({
// clone array
or: array.slice()
});
} else {
newFilter["and"].push(array[0]);
}
}
}
// Append others to result filter
others.forEach(other => newFilter["and"].push(other));
filter.filter = newFilter;
}

How to fix my Bookmark local-storage service

My Bookmark Service which stores a result item with JSON structure doesn't work well.
Probably the issue comes from the array that doesn't work with the local storage function.
I've tried to JSON.stringify my items.
var key = 'fud_bookmarks';
var bookmarks = [];
this.addBookmark = function(resultItem) {
var bookmarks = this.getBookmarks();
bookmarks.push(resultItem);
return setBookmarks(bookmarks);
};
this.deleteBookmark = function(resultItem) {
var bookmarks = this.getBookmarks();
var i = bookmarks.indexOf(resultItem);
if (i >= 0) {
bookmarks.splice(i, 1);
console.log(bookmarks)
return setBookmarks(bookmarks);
}
return false;
};
this.getBookmarkCount = function() {
return getBookmarks().length;
};
this.getBookmarks = function() {
var bookmarks = localStorage.getItem(key);
if (!bookmarks) {
bookmarks = [];
}
return bookmarks;
}
function setBookmarks(bookmarks) {
return localStorage.setItem(key, bookmarks);
}
The resulted items look like this.
{
id: "112",
docType: "doctyp117",
title: "Abschließender Bericht über die Arbeit des Kunsts…- September 1944, Exemplar für Tieschowitz, o.D.",
type: "Archivbestand",
description: null,
…
}
$$hashKey: "object:455"
archive: {
id: "24",
title: "Familienarchiv der Grafen Wolff Metternich zur Gracht"
}
right now I get this error in the console =>
bookmarks.push is not a function
at Object.addBookmark (bookmark.js:12)

localStorage store a string values, not an objects.
If you want to store an Array should stringify it.
function setBookmarks(bookmarks) {
return localStorage.setItem(key, JSON.stringify(bookmarks));
}
this.getBookmarks = function () {
var bookmarks = JSON.parse(localStorage.getItem(key));
...
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
If value in starage will be not a valid JSON JSON.parse method throw an error, so you can use a try catch to avoid errors:
this.getBookmarks = function () {
var bookmarks;
try {
bookmarks = JSON.parse(localStorage.getItem(key));
} catch (e) {
bookmarks = [];
}
...
deleteBookmark should looks like:
this.deleteBookmark = function (resultItem) {
var i = 0;
let bookmarks = this.getBookmarks();
​
for (;i < bookmarks.length - 1;i++) {
if (resultItem.id === bookmarks[i].id) {
break;
}
}
if (i >= 0) {
bookmarks.splice(i, 1);
console.log(bookmarks)
return setBookmarks(bookmarks);
}
return false;
}

Try this: Check if typeof bookmarks is not object then return empty array. As Array is also a special type of object in javascript.
this.getBookmarks = function() {
var bookmarks = localStorage.getItem(key);
if (typeof bookmarks !== "object") {
bookmarks = [];
};
return bookmarks;
};

Add dynamic Parameter to Javascript Array Object by condition

I want to add the parameter to the array object url depends on some function value.
Here is what I have tried so far with no luck.
var change_lookup_number = function() {
var type = document.getElementById('type_number').value;
if (type == 1) {
//url should be "/hello/lookup/modelname.js?columns[column_id]=1"
} else if (type == 2) {
//url should be "/hello/lookup/modelname.js?columns[column_id]=2"
} else {
//url should be "/hello/lookup/modelname.js?columns[column_id]=6"
}
};
change_lookup_number();
var sections = [
{
url: "",
}
]
(function(){
$.each(pcdfs, function(i, section) {
console.log(section.url); // It's empty, I want to change this section.url
}
})();
Thanks

Define sections array before accessing it inside your function.
var sections = [
{
url: ""
}
];
var change_lookup_number = function() {
var type = document.getElementById('type_number').value;
if (type == 1) {
sections[0].url = "/hello/lookup/modelname.js?columns[column_id]=1"
} else {
sections[0].url = "/hello/lookup/modelname.js?columns[column_id]=2"
}
};
change_lookup_number();

Knockoutjs: Remove/add element from array nested in viewmodel

I want to remove and add an element from an array which is nested in a ko.observable object. I'm using the ko.mapping utility to map json data to my viewmodel. Inside the json data i have an array and it is this array that i want to remove and add an element from.
The add and remove functions are call from HTML bindings.
See my current code for doing this. It is not elegant at all, i know that, that is why i'm asking for help. How do i do see smarter?
function BaseViewModel() {
var self = this;
self.newItem = null;
self.selectedItem = ko.observable();
self.getNewItem = function () {
return self.newCleanItem(self.newItem);
}
self.read = function (search, callback) {
self.baseService.read(search, callback);
}
self.readCallback = function (data) {
if (self.newItem == null)
self.newItem = data;
self.selectedItem(data);
showInputContainer();
}
self.addLog = function () {
var item = new self.getNewItem();
var newItem = item.tLogs[0];
var currentSelectedItem = ko.mapping.toJS(self.selectedItem);
currentSelectedItem.tLogs.push(newItem);
self.selectedItem(currentSelectedItem);
showInputContainer(activeTab);
};
self.removeLog = function (item) {
var currentSelectedItem = ko.mapping.toJS(self.selectedItem);
currentSelectedItem.tLogs.pop(item);
vm.selectedItem(currentSelectedItem);
showInputContainer();
}
self.newCleanItem = function (data) {
for (var d in data) {
if (Object.prototype.toString.call(data[d]) === '[object Array]') {
var array = data[d];
for (var item in array) {
if (framework.baseFunctions().isNumeric(item)) {
for (var i in array[item]) {
array[i] = "";
}
}
}
data[d] = array;
}
else {
data[d] = "";
}
}
return data;
}
}
My jsondata could look that this:
jsondata = {
caseName: "test",
caseDescription: "This is a test",
tLogs: [
{
name: "log1",
date: "2013-03-19"
},
{
name: "log2",
date: "2013-02-02"
}
]
}

Find an element in an array recursively

I have an array of objects. Every object in the array has an id and an item property that is an array containing other object. I need to be able to find an element in an array by id. Here is a sample of what I have done so far, but the recursive function is always returning undefined.
How can I quit the function and return the item when I have called the function recursively several times?
$(function () {
var treeDataSource = [{
id: 1,
Name: "Test1",
items: [{
id: 2,
Name: "Test2",
items: [{
id: 3,
Name: "Test3"
}]
}]
}];
var getSubMenuItem = function (subMenuItems, id) {
if (subMenuItems && subMenuItems.length > 0) {
for (var i = 0; i < subMenuItems.length; i++) {
var item;
if (subMenuItems[i].Id == id) {
item = subMenuItems[i];
return item;
};
getSubMenuItem(subMenuItems[i].items, id);
};
};
};
var searchedItem = getSubMenuItem(treeDataSource, 3);
alert(searchedItem.id);
});
jsFiddle

You should replace
getSubMenuItem(subMenuItems[i].items, id);
with
var found = getSubMenuItem(subMenuItems[i].items, id);
if (found) return found;
in order to return the element when it is found.
And be careful with the name of the properties, javascript is case sensitive, so you must also replace
if (subMenuItems[i].Id == id) {
with
if (subMenuItems[i].id == id) {
Demonstration
Final (cleaned) code :
var getSubMenuItem = function (subMenuItems, id) {
if (subMenuItems) {
for (var i = 0; i < subMenuItems.length; i++) {
if (subMenuItems[i].id == id) {
return subMenuItems[i];
}
var found = getSubMenuItem(subMenuItems[i].items, id);
if (found) return found;
}
}
};

I know its late but here is a more generic approach
Array.prototype.findRecursive = function(predicate, childrenPropertyName){
if(!childrenPropertyName){
throw "findRecursive requires parameter `childrenPropertyName`";
}
let array = [];
array = this;
let initialFind = array.find(predicate);
let elementsWithChildren = array.filter(x=>x[childrenPropertyName]);
if(initialFind){
return initialFind;
}else if(elementsWithChildren.length){
let childElements = [];
elementsWithChildren.forEach(x=>{
childElements.push(...x[childrenPropertyName]);
});
return childElements.findRecursive(predicate, childrenPropertyName);
}else{
return undefined;
}
}
to use it:
var array = [<lets say an array of students who has their own students>];
var joe = array.findRecursive(x=>x.Name=="Joe", "students");
and if you want filter instead of find
Array.prototype.filterRecursive = function(predicate, childProperty){
let filterResults = [];
let filterAndPushResults = (arrayToFilter)=>{
let elementsWithChildren = arrayToFilter.filter(x=>x[childProperty]);
let filtered = arrayToFilter.filter(predicate);
filterResults.push(...filtered);
if(elementsWithChildren.length){
let childElements = [];
elementsWithChildren.forEach(x=>{
childElements.push(...x[childProperty]);
});
filterAndPushResults(childElements);
}
};
filterAndPushResults(this);
return filterResults;
}