#javascript #json #nested #clone #deep-copy
#javascript #json
Вопрос:
У меня есть массив глубоких объектов JSON, которые выглядят аналогично этому:
var hierarchy = [
{
"title": "category 1",
"children": [
{"title": "subcategory 1",
"children": [
{"id": 1, "title": "name 1"},
{"id": 2, "title": "name 2"},
{"id": 3, "title": "name 3"}
]
},
{"title": "subcategory 2",
"children": [
{"id": 1, "title": "name 4"}
]
}
]
},
{
"title": "category 2",
"children": [etc. - shortened for brevity]
}
];
Итак, в основном это иерархия — есть категории, которые могут иметь подкатегории, содержащие объекты с некоторыми идентификаторами и именами. У меня также есть массив идентификаторов, связанных с самым глубоким уровнем иерархии (объекты без дочерних элементов), и мне нужно отфильтровать этот набор объектов таким образом, чтобы оставались только (подкатегории) категории, содержащие определенные объекты.
Так, например, если бы у меня был массив, содержащий два идентификатора:
var IDs = [2, 3];
результатом будет:
var hierarchy = [
{
"title": "category 1",
"children": [
{"title": "subcategory 1",
"children": [
{"id": 2, "title": "name 2"},
{"id": 3, "title": "name 3"}
]
}
]
}
];
т.е. весь, весь объект «категории 2» удален, вся «подкатегория 2» удалена, объект с идентификатором «1» удален.
Проблема в том, что глубина этих объектов является переменной и неизвестной — у некоторых объектов нет дочерних элементов, у некоторых есть дочерние элементы, у которых также есть дочерние элементы и т. Д., Любая подкатегория может сама по себе иметь подкатегорию, и мне в основном нужно найти объект без дочерних элементов с определенными идентификаторами и сохранить весь путь к каждому из нихих.
Спасибо.
Комментарии:
1. Я бы настоятельно рекомендовал подчеркивание (или Lodash) для этого — это сделает вашу жизнь намного проще
2. @Bojangles — Подчеркивание — это здорово, но как именно оно поможет мне с этой конкретной проблемой? Возможно, я что-то упускаю, но я не вижу никакого метода подчеркивания, который бы это делал. Спасибо.
3. Извините, я был на своем телефоне и неправильно прочитал вопрос. Я видел много сложных итераций объектов, которые сразу же подумали о подчеркивании
Ответ №1:
По сути, выполните обход вашего дерева в глубину, вызывая функцию обратного вызова для каждого узла. Если этот узел является конечным узлом и его идентификатор отображается в вашем списке, то клонируйте ветку, которая ведет к этому листу, но не клонируйте повторно какую-либо часть ветки, которая уже была клонирована.
После того как вы создали частичную и отфильтрованную копию своего дерева, вам необходимо очистить оригинал. Я мутировал исходное дерево в процессе для целей бухгалтерского учета — отслеживания того, какие ветви уже были клонированы.
Редактировать: изменен код для фильтрации списка деревьев вместо одного дерева
var currentPath = [];
function depthFirstTraversal(o, fn) {
currentPath.push(o);
if(o.children) {
for(var i = 0, len = o.children.length; i < len; i ) {
depthFirstTraversal(o.children[i], fn);
}
}
fn.call(null, o, currentPath);
currentPath.pop();
}
function shallowCopy(o) {
var result = {};
for(var k in o) {
if(o.hasOwnProperty(k)) {
result[k] = o[k];
}
}
return resu<
}
function copyNode(node) {
var n = shallowCopy(node);
if(n.children) { n.children = []; }
return n;
}
function filterTree(root, ids) {
root.copied = copyNode(root); // create a copy of root
var filteredResult = root.copied;
depthFirstTraversal(root, function(node, branch) {
// if this is a leaf node _and_ we are looking for its ID
if( !node.children amp;amp; ids.indexOf(node.id) !== -1 ) {
// use the path that the depthFirstTraversal hands us that
// leads to this leaf. copy any part of this branch that
// hasn't been copied, at minimum that will be this leaf
for(var i = 0, len = branch.length; i < len; i ) {
if(branch[i].copied) { continue; } // already copied
branch[i].copied = copyNode(branch[i]);
// now attach the copy to the new 'parellel' tree we are building
branch[i-1].copied.children.push(branch[i].copied);
}
}
});
depthFirstTraversal(root, function(node, branch) {
delete node.copied; // cleanup the mutation of the original tree
});
return filteredResu<
}
function filterTreeList(list, ids) {
var filteredList = [];
for(var i = 0, len = list.length; i < len; i ) {
filteredList.push( filterTree(list[i], ids) );
}
return filteredList;
}
var hierarchy = [ /* your data here */ ];
var ids = [1,3];
var filtered = filterTreeList(hierarchy, ids);
Комментарии:
1. Спасибо, Майк, но я не уверен, что понимаю, как это должно работать. Особенно та часть, где вы создаете root.copyed — root, должна быть верхним уровнем иерархии данных, которая представляет собой массив с несколькими объектами, в которых есть дочерние объекты, верно? Вероятно, я что-то упускаю.
2. Просматривая ваш код снова, я вижу, что вы обрабатываете список деревьев, в то время как мой код обрабатывает одно дерево. Обертывание кода в цикле for для обхода списка должно сделать это. Смотрите мою правку выше.
Ответ №2:
Вы можете использовать метод filterDeep из deepdash
расширения для lodash
:
var obj = [{/* get Vijay Jagdale's source object as example */}];
var idList = [2, 3];
var found = _.filterDeep(
obj,
function(value) {
return _.indexOf(idList, value.id) !== -1;
},
{ tree: true }
);
filtrate
объект будет:
[ { title: 'category 1',
children:
[ { title: 'subcategory 11',
children:
[ { id: 2, title: 'name 2' },
{ id: 3, title: 'name 3' } ] } ] },
{ title: 'category 2',
children:
[ { title: 'subcategory 21',
children: [ { id: 3, title: 'name cat2sub1id3' } ] } ] } ]
Вот полный рабочий тест для вашего варианта использования
Ответ №3:
Хотя это старый вопрос, я добавлю свои 2 цента. Решение требует простой итерации по циклам, подциклам и т. Д., А Затем сравнения идентификаторов и построения результирующего объекта. У меня есть решение на основе чистого javascript и jQuery. Хотя в приведенном выше примере работает чистый javascript, я бы рекомендовал решение jQuery, потому что оно более универсальное и выполняет «глубокое копирование» объектов, в случае, если у вас большие и сложные объекты, вы не столкнетесь с ошибками.
function jsFilter(idList){
var rsltHierarchy=[];
for (var i=0;i<hierarchy.length;i ) {
var currCatg=hierarchy[i];
var filtCatg={"title":currCatg.title, "children":[]};
for (var j=0;j<currCatg.children.length;j ) {
var currSub=currCatg.children[j];
var filtSub={"title":currSub.title, "children":[]}
for(var k=0; k<currSub.children.length;k ){
if(idList.indexOf(currSub.children[k].id)!==-1)
filtSub.children.push({"id":currSub.children[k].id, "title":currSub.children[k].title});
}
if(filtSub.children.length>0)
filtCatg.children.push(filtSub);
}
if(filtCatg.children.length>0)
rsltHierarchy.push(filtCatg);
}
return rsltHierarchy;
}
function jqFilter(idList){
var rsltHierarchy=[];
$.each(hierarchy, function(index,currCatg){
var filtCatg=$.extend(true, {}, currCatg);
filtCatg.children=[];
$.each(currCatg.children, function(index,currSub){
var filtSub=$.extend(true, {}, currSub);
filtSub.children=[];
$.each(currSub.children, function(index,currSubChild){
if(idList.indexOf(currSubChild.id)!==-1)
filtSub.children.push($.extend(true, {}, currSubChild));
});
if(filtSub.children.length>0)
filtCatg.children.push(filtSub);
});
if(filtCatg.children.length>0)
rsltHierarchy.push(filtCatg);
});
return rsltHierarchy;
}
//Now test the functions...
var hierarchy = eval("(" document.getElementById("inp").value ")");
var IDs = eval("(" document.getElementById("txtBoxIds").value ")");
document.getElementById("oupJS").value=JSON.stringify(jsFilter(IDs));
$(function() {
$("#oupJQ").text(JSON.stringify(jqFilter(IDs)));
});
#inp,#oupJS,#oupJQ {width:400px;height:100px;display:block;clear:all}
#inp{height:200px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
ID List: <Input id="txtBoxIds" type="text" value="[2, 3]">
<p>Input:
<textarea id="inp">[
{
"title": "category 1",
"children": [
{"title": "subcategory 11",
"children": [
{"id": 1, "title": "name 1"},
{"id": 2, "title": "name 2"},
{"id": 3, "title": "name 3"}
]
},
{"title": "subcategory 12",
"children": [
{"id": 1, "title": "name 4"}
]
}
]
},
{
"title": "category 2",
"children": [
{"title": "subcategory 21",
"children": [
{"id": 3, "title": "name cat2sub1id3"},
{"id": 5, "title": "name cat2sub1id5"}
]
},
{"title": "subcategory 22",
"children": [
{"id": 6, "title": "name cat2sub2id6"},
{"id": 7, "title": "name cat2sub2id7"}
]
}
]
}
]</textarea>
<p>Pure-Javascript solution results:
<textarea id="oupJS"></textarea>
<p>jQuery solution results:
<textarea id="oupJQ"></textarea>
Ответ №4:
Я бы не стал изобретать велосипед. Сейчас мы используем object-scan для большей части нашей обработки данных, и это прекрасно решает ваш вопрос. Вот как
// const objectScan = require('object-scan');
const filter = (input, ids) => {
objectScan(['**[*]'], {
filterFn: ({ value, parent, property }) => {
if (
('id' in value amp;amp; !ids.includes(value.id))
|| ('children' in value amp;amp; value.children.length === 0)
) {
parent.splice(property, 1);
}
}
})(input);
};
const hierarchy = [ { title: 'category 1', children: [ { title: 'subcategory 1', children: [ { id: 1, title: 'name 1' }, { id: 2, title: 'name 2' }, { id: 3, title: 'name 3' } ] }, { title: 'subcategory 2', children: [ { id: 1, title: 'name 4' } ] } ] }, { title: 'category 2', children: [] } ];
filter(hierarchy, [2, 3]);
console.log(hierarchy);
// => [ { title: 'category 1', children: [ { title: 'subcategory 1', children: [ { id: 2, title: 'name 2' }, { id: 3, title: 'name 3' } ] } ] } ]
.as-console-wrapper {max-height: 100% !important; top: 0}
<script src="https://bundle.run/object-scan@13.8.0"></script>
Отказ от ответственности: я автор object-scan