Javascript get parent element in array
I am trying to get the parent of a specific object (reference) in an array. Example:
var data = [
{
key: "value1"
children: [
{
key: "value2"
},
{
key: "value3"
children: [
{
key: "value3a"
},
{
key: "value3b"
}
]
}
]
},
{
key: "value4"
}
];
When something happens, I get this:
var clicked = {
key: "value3a"
}
In this case, I know the button was clicked value3a
and it binds to the database with a variable data
.
The question is, how can I easily get the parent element clicked
? It should return the entire children array value3
that I want:
[
{
key: "value3a"
},
{
key: "value3b"
}
]
Note: I am currently using UnderscoreJS to find my array object. Maybe UnderscoreJS can help?
source to share
Just create a parent parent map so you can see what you need:
var map = {};
function recurse(arr, parent) {
if (!arr) return;
for (var i=0; i<arr.length; i++) { // use underscore here if you find it simpler
map[arr[i].key] = parent;
recurse(arr[i].children, arr[i]);
}
}
recurse(data, {key:"root", children:data});
Now, in your event handler, you can trivially use this map to find your siblings:
map[clicked.key].children
source to share
You can use recursive shortening function.
// Given
var data = [
{
key: "value1",
children: [
{
key: "value2"
},
{
key: "value3",
children: [
{
key: "value3a"
},
{
key: "value3b"
}
]
}
]
},
{
key: "value4"
}
];
var clicked = {
key: "value3a"
};
We can define a recursive shortening function and give it a parent as a context.
var rec_reduce = function(memo, obj) {
if(obj.key == clicked.key) {
return this || memo;
}
return _.reduce(obj.children, rec_reduce, memo, obj.children) || memo;
};
// Now we can lookup the key in clicked with one line
_.reduce(data, rec_reduce, null, data);
// Returns [{key: "value3a"}, {key: "value3b"}]
Or, if you want to use the underscore character to create a map, as suggested in the first answer, this is even easier:
var map = {};
var rec_map = function(obj, i, parent) {
map[obj.key] = parent;
_.each(obj.children, rec_map);
};
_.each(data, rec_map);
// Now getting the parent list is just a look up in the map
map[clicked.key]
// Returns [{key: "value3a"}, {key: "value3b"}]
source to share