Modify a JavaScript Object while iterating its properties - javascript

Can javascript implement pass-by-reference techniques on function call? You see, I have the JSON below and I need to traverse all its node. While traversing, if the current item is an Object and contains key nodes, I must add another property isParent: true to that exact same item. But I'm having difficulty on creating a traversal function with such feature, and I tried to search for traversal functions, but all I found only returns a new JSON object instead of changing the exact JSON that is being processed.
var default_tree = [
{
text: "Applications",
nodes: [
{
text: "Reports Data Entry",
nodes: [
{ text: "Other Banks Remittance Report" },
{ text: "Statement of Payroll Deduction" },
...
]
},
{
text: "Suspense File Maintenance",
nodes: [
{ text: "Banks with Individual Remittances" },
{ text: "Employers / Banks with Employers" },
...
]
}
]
},
{
text: "Unposted Transactions",
nodes: [
{ text: "Unposted Borrower Payments"},
{ text: "Unposted CMP Payments"}
]
},
{ text: "Maintenance" },
{
text: "Reports",
nodes: [
{
text: "Daily Reports",
nodes: [
{
text: "List of Remittance Reports",
nodes: [
{ text: "Banks" },
...
{
text: "Employers-LBP",
nodes: [
{ text: "Employers-Zonal" }
]
},
]
},
...
]
},
...
]
}
]
Considering we have this traversal function:
function traverse(json_object) {
// perform traversal here
}
traverse(default_tree)
After it runs the traverse function, the default_tree's value will remain the same unless we do something like:
default_tree = traverse(default_tree)
Can someone help me create an iterator will really alter the Object being processed while iterating, instead of returning a new Object?


Please check this one
var default_tree = [....] //Array
function traverse(arrDefaultTree){
arrDefaultTree.forEach(function(val,key){
if(val.hasOwnProperty("nodes")){
val.isParent = true;
traverse(val.nodes);
}
})
}
traverse(default_tree);
console.log(default_tree);
Hope this helpful.


With two functions, one that call then self. One find the nodes and the other one loop througgh the arrays.
traverseTree(default_tree);
function traverseTree (tree) {
var i = 0, len = tree.length;
for(;i < len; i++) {
var obj = tree[i];
findNodes(obj);
}
}
function findNodes (obj) {
var keys = Object.keys(obj);
if (keys.indexOf('nodes') > -1) {
obj.isParent = true;
traverseTree(obj.nodes);
}
}

Related

How do I take an array of objects and reduce it so that data at a repeated object key is combined?

I'm working on a react app that mimics a retail website. My main page displays an item, and below has card components of related products. When I click a button on one of the related products, I open a comparison modal that compares features of the current product and the clicked upon product. I figured that to accomplish this, I would create an array of the combined features of the clicked on product and the main page product. I've been struggling to get create an array of objects, where each unique feature has an object with data inside about the features and which product the feature belongs to.
As of right now, I've been able to get an array of all the features that the two products have, but this array has repeats if the products have overlapping features. This makes me unsure of how to render the comparison table because I was planning on mapping over the array and creating a table row for each feature. My current code to format these features is as follows:
formatFeatures: (currentProd, clickedProd) => {
let combinedFeatures = [];
if (clickedProd.features) {
clickedProd.features.forEach(feature => {
let obj = {}
let vals = Object.values(feature);
obj[vals[0]] = [vals[1], clickedProd.id]
combinedFeatures.push(obj)
})
}
currentProd.features.forEach(feature => {
let obj = {}
let vals = Object.values(feature);
obj[vals[0]] = [vals[1], currentProd.id]
combinedFeatures.push(obj)
})
let formattedFeatures = combinedFeatures.reduce((allFeatures, feature) => {
if (Object.keys(feature) in allFeatures) {
allFeatures = [allFeatures[Object.keys(feature)]].concat(feature);
} else {
allFeatures.push(feature);
}
return allFeatures;
}, [])
The result of this is:
[{
"Fabric": ["100% Cotton", 28214]
}, {
"Cut": ["Skinny", 28214]
}, {
"Fabric": ["Canvas", 28212]
}, {
"Buttons": ["Brass", 28212]
}]
This is pretty close to what I am looking for, where I have an array of objects that contain information about the feature and product id of the product, but the repeat in "Fabric" is something I'm struggling to sort out. Ideally, the result would look like this:
[{
"Fabric": ["100% Cotton", 28214],
["Canvas", 28212]
}, {
"Cut": ["Skinny", 28214]
}, {
"Buttons": ["Brass", 28212]
}]
If anyone can help guide me as to how to change my formatting function to accomplish this, I'd be very grateful. Alternatively, if anyone knows a better way to dynamically format a table with a single row for each unique feature given my current result, that would be great too.
The data coming into my helper function is as follows:
CurrentProd:
{
"id": 28212,
"name": "Camo Onesie",
"slogan": "Blend in to your crowd",
"description": "The So Fatigues will wake you up and fit you in. This high energy camo will have you blending in to even the wildest surroundings.",
"category": "Jackets",
"default_price": "140.00",
"created_at": "2021-07-10T17:00:03.509Z",
"updated_at": "2021-07-10T17:00:03.509Z",
"features": [{
"feature": "Fabric",
"value": "Canvas"
}, {
"feature": "Buttons",
"value": "Brass"
}]
}
ClickedProd:
{
"name": "Morning Joggers",
"category": "Pants",
"originalPrice": "40.00",
"salePrice": null,
"photo": "https://images.unsplash.com/photo-1552902865-b72c031ac5ea?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80",
"id": 28214,
"features": [{
"feature": "Fabric",
"value": "100% Cotton"
}, {
"feature": "Cut",
"value": "Skinny"
}]
}

There seems to be a bigger question of how to structure your data. You say that ideally your results would look like:
[
{
"Fabric":
["100% Cotton",28214],
["Canvas",28212]
},
{
"Cut":
["Skinny",28214]
},
{
"Buttons":
["Brass",28212]
}
]
But what you're really trying to get out of this is a combined list of rows and associated values for each item feature, if it exists. All you really need then is an array of keys for each row you want to display, and objects that let you access the needed property by that key.
The array of keys could look like this:
["Fabric", "Cut", "Buttons"]
The objects you want to access the properties using those keys, for example your CurrentProd, could be this (notice that you can access a feature by calling CurrentProd.features["FeatureName"]):
{
"id":28212,
"name":"Camo Onesie",
// ... //
"features": {
"Fabric": "Canvas",
"Buttons": "Brass"
}
}
Having said that, to get those things you can get the array of keys, which we'll call allFeatureKeys, by reducing over a combined array of CurrentProd.features and ClickedProd.features:
const allFeatureKeys = [
...CurrentProd.features,
...ClickedProd.features
].reduce((acc, cur) => {
return acc.findIndex(cur.feature) > -1 ? [...acc, cur.feature] : acc
},
[]
);
And you can modify your CurrentProd to the above data shape by reducing over the array of its features, let's call this modifiedCurrentProd:
const modifiedCurrentProd = {
...CurrentProd,
features: CurrentProd.features.reduce((acc, cur) => {
return {...acc, [cur.feature]: cur.value}
}, {})
}
Repeat that for a modifiedClickedProd object, then you have both CurrentProd.features and ClickedProd.features values available for a lookup when you create your table values.
As an example only, since I don't know your react structure or what data you want to display, you can then render the values in the table rows mapping over the keys to make each row, and for each feature key, you access the value from the modifiedCurrentProd or modifiedClickedProd object's features property:
<div id="table">
{allFeatureKeys.map((featureKey) => {
return <div id="table-row">
<div>{featureKey}</div>
<div>
{
modifiedCurrentProd.features[featureKey] !== undefined
? modifiedCurrentProd.id
: "n/a"
}
</div>
<div>
{
modifiedClickedProd.features[featureKey] !== undefined
? modifiedClickedProd.id
: "n/a"
}
</div>
</div>
})}
</div>

Firstly the target data structure needs to be fixed/optimized. It looks like the OP does concentrate on something which is based on a generic Feature (like Fabric, Cut, Buttons) whereas such feature values seem to be associated more with the Product. Thus for one and the same feature the values are unique to the product feature. In order to not loose the product information, a target format's feature item needs to reflect its related product's id property.
A viable and still flexible enough target data structure then might look like this ...
{
"Fabric": [{
productId: 28214,
value: "100% Cotton",
}, {
productId: 28212,
value: "Canvas",
}],
"Cut": [{
productId: 28214,
value: "Skinny",
}],
"Buttons": [{
productId: 28212,
value: "Brass",
}],
}
Any approach should start with a data-normalizing mapping-process of a product's features list where each feature item will get its product related id assigned.
Thus a feature item like { feature: "Buttons", value: "Brass" } gets mapped temporarily into { productId: 28212, feature: "Buttons", value: "Brass" }.
The two normalized data-item lists now can be concatenated and finally processed/reduced into the final target structure ...
function mergeBoundProductId(item) {
return { ...this, ...item };
}
function aggregateProductFeatureValueLists(index, productFeature) {
const { feature, ...featureValue } = productFeature;
const featureList = index[feature] ??= [];
//const featureList = index[feature] || (index[feature] = []);
featureList.push(featureValue);
return index;
}
function createIndexOfProductFeatureValues(clickedProd, currentProd) {
const { features:clickedFeatures } = clickedProd;
const { features:currentFeatures } = currentProd;
return [
...clickedFeatures.map(mergeBoundProductId, { productId: clickedProd.id }),
...currentFeatures.map(mergeBoundProductId, { productId: currentProd.id }),
].reduce(aggregateProductFeatureValueLists, {});
}
const currentProduct = {
id: 28212,
name: "Camo Onesie",
// ... more properties ...
features: [{
feature: "Fabric",
value: "Canvas",
}, {
feature: "Buttons",
value: "Brass",
}],
};
const clickedProduct = {
name: "Morning Joggers",
// ... more properties ...
id: 28214,
features: [{
feature: "Fabric",
value: "100% Cotton",
}, {
feature: "Cut",
value: "Skinny",
}],
};
console.log(
'createIndexOfProductFeatureValues(clickedProduct, currentProduct) ...',
createIndexOfProductFeatureValues(clickedProduct, currentProduct)
);
.as-console-wrapper { min-height: 100%!important; top: 0; }
The advantage of breaking the code into dedicated processes comes with easier refactoring for e.g. changed target structures like something closer to what the OP was looking for.
The changes to the reducer function are minimal. It's just two changes, each barely noticeable in its line ...
function mergeBoundProductId(item) {
return { ...this, ...item };
}
function aggregateProductFeatureValueLists(index, productFeature) {
const { feature, productId, value } = productFeature;
const featureList = index[feature] ??= [];
featureList.push([value, productId]);
return index;
}
function createIndexOfProductFeatureValues(clickedProd, currentProd) {
const { features:clickedFeatures } = clickedProd;
const { features:currentFeatures } = currentProd;
return [
...clickedFeatures.map(mergeBoundProductId, { productId: clickedProd.id }),
...currentFeatures.map(mergeBoundProductId, { productId: currentProd.id }),
].reduce(aggregateProductFeatureValueLists, {});
}
console.log(
'createIndexOfProductFeatureValues(clickedProduct, currentProduct) ...',
createIndexOfProductFeatureValues(clickedProduct, currentProduct)
);
.as-console-wrapper { min-height: 100%!important; top: 0; }
<script>
const currentProduct = {
id: 28212,
name: "Camo Onesie",
// ... more properties ...
features: [{
feature: "Fabric",
value: "Canvas",
}, {
feature: "Buttons",
value: "Brass",
}],
};
const clickedProduct = {
name: "Morning Joggers",
// ... more properties ...
id: 28214,
features: [{
feature: "Fabric",
value: "100% Cotton",
}, {
feature: "Cut",
value: "Skinny",
}],
};
</script>
The last example's purpose too is to prove the advantage of an easy to refactor code base.
Here the main function gets renamed from createIndexOfProductFeatureValues to createListOfProductFeatureValues.
It's implementation also changes likewise but only in the way how the reducer function gets invoked with its initial value.
The reducer function also does not change dramatically, only in the way of how the accumulating/aggregating collector object gets handled.
And the result is a clean array based object structure ...
function mergeBoundProductId(item) {
return { ...this, ...item };
}
function aggregateProductFeatureValueLists(collector, productFeature) {
const { feature, productId, value } = productFeature;
const { index, list } = collector;
const featureItem = index[feature] ??= { feature, values: [] };
if (featureItem.values.length === 0) {
list.push(featureItem);
}
featureItem.values.push([value, productId]);
return collector;
}
function createListOfProductFeatureValues(clickedProd, currentProd) {
const { features:clickedFeatures } = clickedProd;
const { features:currentFeatures } = currentProd;
return [
...clickedFeatures.map(mergeBoundProductId, { productId: clickedProd.id }),
...currentFeatures.map(mergeBoundProductId, { productId: currentProd.id }),
].reduce(aggregateProductFeatureValueLists, { index: {}, list: [] }).list;
}
console.log(
'createListOfProductFeatureValues(clickedProduct, currentProduct) ...',
createListOfProductFeatureValues(clickedProduct, currentProduct)
);
.as-console-wrapper { min-height: 100%!important; top: 0; }
<script>
const currentProduct = {
id: 28212,
name: "Camo Onesie",
// ... more properties ...
features: [{
feature: "Fabric",
value: "Canvas",
}, {
feature: "Buttons",
value: "Brass",
}],
};
const clickedProduct = {
name: "Morning Joggers",
// ... more properties ...
id: 28214,
features: [{
feature: "Fabric",
value: "100% Cotton",
}, {
feature: "Cut",
value: "Skinny",
}],
};
</script>

You are already looping through both once. You can get it without reducing.
const formatFeatures = (currentProd, clickedProd) => {
const formattedFeatures = {};
if (clickedProd.features) {
clickedProd.features.forEach(feature => {
const vals = Object.values(feature);
if (!formattedFeatures.hasOwnProperty(vals[0])) {
formattedFeatures[vals[0]] = [];
}
formattedFeatures[vals[0]].push([vals[1], clickedProd.id]);
});
}
currentProd.features.forEach(feature => {
const vals = Object.values(feature);
if (!formattedFeatures.hasOwnProperty(vals[0])) {
formattedFeatures[vals[0]] = [];
}
formattedFeatures[vals[0]].push([vals[1], currentProd.id]);
})
return formattedFeatures;
}
const currentProd = {
"id": 28212,
"name": "Camo Onesie",
"slogan": "Blend in to your crowd",
"description": "The So Fatigues will wake you up and fit you in. This high energy camo will have you blending in to even the wildest surroundings.",
"category": "Jackets",
"default_price": "140.00",
"created_at": "2021-07-10T17:00:03.509Z",
"updated_at": "2021-07-10T17:00:03.509Z",
"features": [{
"feature": "Fabric",
"value": "Canvas"
}, {
"feature": "Buttons",
"value": "Brass"
}]
};
const clickedProd = {
"name": "Morning Joggers",
"category": "Pants",
"originalPrice": "40.00",
"salePrice": null,
"photo": "https://images.unsplash.com/photo-1552902865-b72c031ac5ea?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80",
"id": 28214,
"features": [{
"feature": "Fabric",
"value": "100% Cotton"
}, {
"feature": "Cut",
"value": "Skinny"
}]
};
console.log(formatFeatures(currentProd, clickedProd));
.as-console-wrapper { min-height: 100%!important; top: 0; }

Tree Structure From Underscore Delimited Strings

Good day,
I need to convert strings as such:
Process1_Cat1_Cat2_Value1
Process1_Cat1_Cat2_Value2
Process2_Cat1_Cat2_Value1
into a nested array as such:
var d = [{
text: 'Process1',
children: [{
text: 'Cat1',
children: [{
text: 'Cat2',
children: [{
text: 'Value1'
},
{
text: 'Value2'
}]
}]
}]
},
{
text: 'Process2',
children: [{
text: 'Cat1',
children: [{
text: 'Cat2',
children: [{
text: 'Value1'
}]
}]
}]
},
];
The reason why I need to do this is to make use of a treeview to display my data:
https://www.npmjs.com/package/bootstrap-tree-view
I have looked at the following solution but was not able to get it working due to lowdash library throwing errors on the findWhere function:
Uncaught TypeError: _.findWhere is not a function
http://brandonclapp.com/arranging-an-array-of-flat-paths-into-a-json-tree-like-structure/
See below for the code:
function arrangeIntoTree(paths, cb) {
var tree = [];
// This example uses the underscore.js library.
_.each(paths, function(path) {
var pathParts = path.split('_');
pathParts.shift(); // Remove first blank element from the parts array.
var currentLevel = tree; // initialize currentLevel to root
_.each(pathParts, function(part) {
// check to see if the path already exists.
var existingPath = _.findWhere(currentLevel, {
name: part
});
if (existingPath) {
// The path to this item was already in the tree, so don't add it again.
// Set the current level to this path's children
currentLevel = existingPath.children;
} else {
var newPart = {
name: part,
children: [],
}
currentLevel.push(newPart);
currentLevel = newPart.children;
}
});
});
cb(tree);
}
arrangeIntoTree(paths, function(tree) {
console.log('tree: ', tree);
});
Any help will be appreciated!

You could use an iterative by looking for the text at the actual level. If not found create a new object. Return the children array for the next level until the most nested array. Then add the leaf object.
var data = ['Process1_Cat1_Cat2_Value1', 'Process1_Cat1_Cat2_Value2', 'Process2_Cat1_Cat2_Value1'],
result = data.reduce((r, s) => {
var keys = s.split('_'),
text = keys.pop();
keys
.reduce((q, text) => {
var temp = q.find(o => o.text === text);
if (!temp) {
q.push(temp = { text, children: [] });
}
return temp.children;
}, r)
.push({ text });
return r;
}, []);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Recursion in JavaScript to search in heavy JSON

I am facing an algorithmic conception problem. With JavaScript language, I have an heavy JSON object of about 11 000 lines, that is the result of the conversion of an HTML file. The structure of the JSON is similar to the one of the DOM, which means that an Object can have a property children, a data structure composed of other similar Object. The goal is to search in the JSON and extract the information of the property itemprop of the Object that has that property. The itemprop attribute is in and Object inside the attributes attribute that some of the first mentioned Object have.
Object Structure
{ type: 'x',
tagName: 'y',
attributes: { "itemprop" : "valueWanted" },
children:
[ Object, Object, Object]
}
I thought of a recursive algorithm for solution. Unfortunately, I am not familiar with recursion and the next code is not working.
Recursive Algorithm
var searchAttributesRecursive = function(children) {
for (var i = 0; i < children.length; ++i) {
if (children[i].hasOwnProperty('children')) {
return searchAttributesRecursive(children[i].children);
}
else {
if (children[i].hasOwnProperty('attributes')) {
if (children[i].attributes.itemprop === "valueWanted") {
console.log('success')
}
}
}
return; // probably a problem that breaks the loop
}
};
searchAttributesRecursive(startingChildren);
There is maybe another more effective generic algorithms to get this task done. I am open to suggestions.
Update
Thank you for all solutions and explanation provided. More particularly, have a look to #ChrisG's simple solution. Now, I would like to add a special condition in the algorithm.
If I would like to retrieve the data from the next object, outside of the scope of the children where an object has the wantedValue2, do you have an idea how I can access this data? The algorithm would have a special case where it meets wantedValue2, and don't want to extract directly the data of itemprop.
Object Structure Special Case
{
"type": "",
"tagName": "",
"attributes": {
"itemprop": "wantedValue"
},
"children": [{
"type": "",
"content": ""
}
]
},
{
"type": "",
"content": ""
}]
},
{
"type": "",
"tagName": "",
"attributes": {},
"children": [
{
"type": "",
"content": "here"
}
]

Here's a shorter version:
Note that the function expects an array, so if your object is not an array, you have to use findItemprop([dom], "wanted")
function findItemprop(data, value, found) {
if (!found) found = [];
data.forEach((node) => {
if (node.attributes && node.attributes.itemprop == value)
found.push(node);
if (node.children) findItemprop(node.children, value, found);
});
return found;
}
var dom = [{
tag: "root",
children: [{
tag: "header",
children: [{
tag: "div"
}]
}, {
tag: "div",
id: "main",
children: [{
tag: "p",
attributes: {
itemprop: "wanted"
}
}]
}, {
tag: "footer",
children: [{
tag: "span",
content: "copyright 2017",
attributes: {
itemprop: "wanted"
}
}]
}]
}];
console.log(findItemprop(dom, "wanted"));

Your return will break the loop. You just want to return if it does return:
var searchAttributesRecursive = function(children) {
for (var i = 0; i < children.length; ++i) {
if (children[i].hasOwnProperty('children')) {
var result=searchAttributesRecursive(children[i].children);
if(result) return result;//if weve found sth, return
}
if (children[i].hasOwnProperty('attributes')) {
if (children[i].attributes.itemprop === "valueWanted1") {
console.log('success')
return children[i];//return sth useful
}
}
}
return false;//nothing found in this and in all childs
};
var elem=searchAttributesRecursive(startingChildren);
This returns the first found child. You may want to return an array instead:
var searchAttributesRecursive = function(children,result=[]) {
for (var i = 0; i < children.length; ++i) {
if (children[i].hasOwnProperty('children')) {
searchAttributesRecursive(children[i].children,result);
}
if (children[i].hasOwnProperty('attributes')) {
if (children[i].attributes.itemprop === "valueWanted1") {
console.log('success')
result.push(children[i]);//return sth useful
}
}
}
return result;//return all results found
};
var arr=searchAttributesRecursive(allElems);
arr.forEach(console.log);
Through passing an array as optional parameter it is fast and easy to store the traversal of multiple trees in one result:
var arr=[];
searchAttributesRecursive(allElems,arr);
searchAttributesRecursive(allElemsTwo,arr);

Give Jonas w the credit for their answer, I'm just tagging on to help correct some of the confusion surrounding the recursion, and hopefully make the it a little easier to understand and work with.
First, you're passing in the array of children. That's fine, but then you have to access each one from its array index as you check them. My recommendation is to make your function handle only one item at a time. (I'm going to use Jonas w's method of collecting nodes, because there may be more than one node with this attribute. I'm also going to add the attribute name as a parameter to make it a little more dynamic.)
function searchAttributesRecursive(currentNode, parameterName, results=[]){
}
Now you can concentrate on one and only one node at a time. Once it has passed the check, you can move on to the children.
function searchAttributesRecursive(currentNode, parameterName, results=[]){
if(currentNode.attributes && currentNode.attributes[parameterName]){
results.push(currentNode);
}
if(currentNode.children){
for(var i = 0, len = currentNode.children.length; i < len; ++i){
searchAttributesRecursive(currentNode.children[i], parameterName, results);
}
}
}
Calling it like this:
var results = [];
searchAttributesRecursive(yourJsObject, "itemprop", results);
...populates results with nodes which contain the "itemprop" attribute. You can now print the attribute values with a simple loop:
for(var i = 0, len = results.length; i < len; ++i){
console.log(i, results[i].attributes.itemprop);
}

You can do this by using the .some() function. What this does is it will return true if any iteration returns true, otherwise it returns false. So, for every key in the current object, you will check if the property is === 'attributes', and if so, you will check the itemprop property for the desired value. If the current key is not 'attributes', and is === 'children' it will recurse and check each child object in the same way.
var searchAttributesRecursive = function(obj, valueWanted) {
if (obj instanceof Object) {
if (obj.attributes && obj.attributes.itemprop === valueWanted) {
return true;
}
if (obj.children) {
return obj.children.some(function(_obj) {
return searchAttributesRecursive(_obj, valueWanted);
});
} else {
return false;
}
} else {
return false;
}
};
var obj = {
type: 'x',
tagName: 'y',
attributes: {
"itemprop": "wantedValue0"
},
children: [{
type: 'x',
tagName: 'y',
attributes: {
"itemprop": "wantedValue1"
},
children: []
},
{
type: 'x',
tagName: 'y',
attributes: {
"itemprop": "wantedValue2"
},
children: [{
type: 'x',
tagName: 'y',
attributes: {
"itemprop": "wantedValue3"
},
children: []
}]
}
]
};
console.log("Found 'wantedValue0': " + searchAttributesRecursive(obj, "wantedValue0"));
console.log("Found 'wantedValue1': " + searchAttributesRecursive(obj, "wantedValue1"));
console.log("Found 'wantedValue2': " + searchAttributesRecursive(obj, "wantedValue2"));
console.log("Found 'wantedValue3': " + searchAttributesRecursive(obj, "wantedValue3"));
console.log("Found 'wantedValue4': " + searchAttributesRecursive(obj, "wantedValue4"));
EDIT - To make this work dynamically and search for itemprop === wantedValue in any nested property or nested child property, you can do the following:
var searchAttributesRecursive2 = function(data, valueWanted) {
if (Array.isArray(data)) {
return data.some(function(elem) {
return searchAttributesRecursive2(elem, valueWanted);
});
} else if (data instanceof Object) {
return Object.keys(data).some(function(key) {
var prop = data[key];
return prop.itemprop === valueWanted || searchAttributesRecursive2(prop, valueWanted);
});
} else {
return false;
}
};
var obj = {
type: 'x',
tagName: 'y',
attributes: {
"itemprop": "wantedValue0"
},
children: [{
type: 'x',
tagName: 'y',
attributes: {
"itemprop": "wantedValue1"
},
children: []
},
{
type: 'x',
tagName: 'y',
attributes: {
"itemprop": "wantedValue2"
},
children: [{
type: 'x',
tagName: 'y',
attributes: {
"itemprop": "wantedValue3"
},
children: []
}]
}
]
};
console.log("Found 'wantedValue0': " + searchAttributesRecursive2(obj, "wantedValue0"));
console.log("Found 'wantedValue1': " + searchAttributesRecursive2(obj, "wantedValue1"));
console.log("Found 'wantedValue2': " + searchAttributesRecursive2(obj, "wantedValue2"));
console.log("Found 'wantedValue3': " + searchAttributesRecursive2(obj, "wantedValue3"));
console.log("Found 'wantedValue4': " + searchAttributesRecursive2(obj, "wantedValue4"));

compound index/searching on child array

Based on the data below, I'm looking to do something like "find block 1 where the parent objects name is 'Panel'"
So, I tried setting up a compound index like this:
objStore.createIndex('by_name_and_block', ['Name', 'blocks.Name']);
And then calling it (sort-of) like this:
var index = objStore.index("by_name_and_block");
var request = index.get("Panel", "1");
// I've also tried:
// var request = index.get(["Panel","1"]);
...
But this doesn't work. Is there a way to set up this compound index in indexeddb?
Sample data:
[
{
Name: "Post",
blocks: [
{
Name:"1",
Arrays:[]
},
{
Name:"2",
Arrays:[]
},
]
},
{
Name: "Panel",
blocks: [
{
Name:"1",
Arrays:[]
},
{
Name:"2",
Arrays:[]
},
]
},
]

Your data is not able to index with current specification. See steps for extracting key from keyPath. Notice that object is not valid key value in array key path.
In v2, you will be able to use with index function expression.
Currently, you will have to generate extra variable before you persist into the database and remove it after retrieval. Use multiEntry index without compound index.

Is this script that what you want?
var obj = [
{
Name: "Post",
blocks: [
{
Name:"1",
Arrays:[]
},
{
Name:"2",
Arrays:[]
},
]
},
{
Name: "Panel",
blocks: [
{
Name:"1",
Arrays:[]
},
{
Name:"2",
Arrays:[]
},
]
},
];
function getBlockByName(objName, index){
for(var i = 0; i < obj.length; i++){
if(obj[i].Name == objName)
return obj[i].blocks[index];
}
return false;
}
//Index starting from 0
console.log(getBlockByName("Panel", 1));
//Will return {Name:"2", Arrays:[]} object

How to form nested objects in Javascript

I am trying to dynamically form a nested tree object something like below using JavaScript, can someone please let me know the best way to achieve this?
var contextpath= {
text: "TreeRoot",
items: [ {
text: "subgroup1" ,
items: [ {
text: "subgroup2",
items: [ {
text: "subgroup3",
items: [ {
text: "subgroup4",
items: [ {
text: "subgroup5"
}]
}]
}]
}]
}]
};
I have delimited string that I am trying to convert to object (that can be used as dat source for tree component).
var path="TreeRoot|subgroup1|subgroup2";
Trying to implement something like below but with recursion / looping using less number of variables.
var contextpathText= {};
contextpathText.text ="TreeRoot";
var childObject={};
var items=[];
childObject.text ="subgroup1";
items.push(childObject);
contextpathText.items=(items);

You need a depth counter and to store the current levels of the object you're working with.
var obj = {text:''}, parent, child, i = 0;
obj.text = 'TreeRoot';
parent = obj;
while (++i <= 5) {
if (parent.items === undefined) parent.items = []; // because you don't have an items on the last subgroup you can't put it in the object literal
child = {text: 'subgroup'+i};
parent.items.push(child);
parent = child;
}
parent = child = null; // cleanup
obj;
jsbeautified JSON.stringify(obj) is now
{
"text": "TreeRoot",
"items": [{
"text": "subgroup1",
"items": [{
"text": "subgroup2",
"items": [{
"text": "subgroup3",
"items": [{
"text": "subgroup4",
"items": [{
"text": "subgroup5"
}]
}]
}]
}]
}]
}
Edit For delimited string
var path = 'TreeRoot|subgroup1|subgroup2';
var obj = {text:''}, parent, child, levelText = path.split('|').reverse();
obj.text = levelText.pop() || '';
parent = obj;
while (levelText.length > 0) {
child = {text: levelText.pop()};
if (!parent.items) parent.items = [];
parent.items.push(child);
parent = child;
}
obj;

Beat me to it, but I went with this code:
var contextpath = { text: "TreeRoot", items: []}
var items = contextpath.items;
for(var i = 1; i <= 5; i++) {
items.push({ text: "subgroup" + i, items: []});
items = items[0].items;
}
The parent & child nomenclature is definitely clearer, for this sort of thing, but I wanted to show that you didn't have to declare the new object as a variable first, you can just push the object literal.
Whoops, just now noticed that you don't have an items array in your desired structure. My code creates the spare, so you end up with
// snip
text: "subgroup4",
items: [ {
text: "subgroup5",
items: []
}]
// etc.

Categories