Objets JavaScript aplatis de manière récursive
Données :
var data = [
{
"id": 1,
"level": "1",
"text": "Sammy",
"type": "Item",
"items": [
{
"id": 11,
"level": "2",
"text": "Table",
"type": "Item",
"items": [
{
"id": 111,
"level": "3",
"text": "Dog",
"type": "Item",
"items": null
},
{
"id": 112,
"level": "3",
"text": "Cat",
"type": "Item",
"items": null
}
]
},
{
"id": 12,
"level": "2",
"text": "Chair",
"type": "Item",
"items": [
{
"id": 121,
"level": "3",
"text": "Dog",
"type": "Item",
"items": null
},
{
"id": 122,
"level": "3",
"text": "Cat",
"type": "Item",
"items": null
}
]
}
]
},
{
"id": 2,
"level": "1",
"text": "Sundy",
"type": "Item",
"items": [
{
"id": 21,
"level": "2",
"text": "MTable",
"type": "Item",
"items": [
{
"id": 211,
"level": "3",
"text": "MTDog",
"type": "Item",
"items": null
},
{
"id": 212,
"level": "3",
"text": "MTCat",
"type": "Item",
"items": null
}
]
},
{
"id": 22,
"level": "2",
"text": "MChair",
"type": "Item",
"items": [
{
"id": 221,
"level": "3",
"text": "MCDog",
"type": "Item",
"items": null
},
{
"id": 222,
"level": "3",
"text": "MCCat",
"type": "Item",
"items": null
}
]
}
]
},
{
"id": 3,
"level": "1",
"text": "Bruce",
"type": "Folder",
"items": [
{
"id": 31,
"level": "2",
"text": "BTable",
"type": "Item",
"items": [
{
"id": 311,
"level": "3",
"text": "BTDog",
"type": "Item",
"items": null
},
{
"id": 312,
"level": "3",
"text": "BTCat",
"type": "Item",
"items": null
}
]
},
{
"id": 32,
"level": "2",
"text": "Chair",
"type": "Item",
"items": [
{
"id": 321,
"level": "3",
"text": "BCDog",
"type": "Item",
"items": null
},
{
"id": 322,
"level": "3",
"text": "BCCat",
"type": "Item",
"items": null
}
]
}
]
}
];
Code :
var fdr = [];
var fd = function(n) {
if (n.items) {
_.forEach(n.items, function (value){
fd(value);
});
}
fdr.Push(n);
};
_.forEach(data, fd);
console.log(fdr);
Sortie souhaitée :
var data = [
{
"id": 1,
"level": "1",
"text": "Sammy",
"type": "Item",
"items": []
},
{
"id": 11,
"level": "2",
"text": "Table",
"type": "Item",
"items": []
},
{
"id": 111,
"level": "3",
"text": "Dog",
"type": "Item",
"items": null
},
{
"id": 112,
"level": "3",
"text": "Cat",
"type": "Item",
"items": null
},
{
"id": 12,
"level": "2",
"text": "Chair",
"type": "Item",
"items": []
},
{
"id": 121,
"level": "3",
"text": "Dog",
"type": "Item",
"items": null
},
{
"id": 122,
"level": "3",
"text": "Cat",
"type": "Item",
"items": null
},
{
"id": 2,
"level": "1",
"text": "Sundy",
"type": "Item",
"items": []
},
{
"id": 21,
"level": "2",
"text": "MTable",
"type": "Item",
"items": []
},
{
"id": 211,
"level": "3",
"text": "MTDog",
"type": "Item",
"items": null
},
{
"id": 212,
"level": "3",
"text": "MTCat",
"type": "Item",
"items": null
},
{
"id": 22,
"level": "2",
"text": "MChair",
"type": "Item",
"items": []
},
{
"id": 221,
"level": "3",
"text": "MCDog",
"type": "Item",
"items": null
},
{
"id": 222,
"level": "3",
"text": "MCCat",
"type": "Item",
"items": null
},
{
"id": 3,
"level": "1",
"text": "Bruce",
"type": "Folder",
"items": []
},
{
"id": 31,
"level": "2",
"text": "BTable",
"type": "Item",
"items": []
},
{
"id": 311,
"level": "3",
"text": "BTDog",
"type": "Item",
"items": null
},
{
"id": 312,
"level": "3",
"text": "BTCat",
"type": "Item",
"items": null
},
{
"id": 32,
"level": "2",
"text": "Chair",
"type": "Item",
"items": []
},
{
"id": 321,
"level": "3",
"text": "BCDog",
"type": "Item",
"items": null
},
{
"id": 322,
"level": "3",
"text": "BCCat",
"type": "Item",
"items": null
}
];
Conditions :
- Les objets ont un niveau inconnu. Certains enfants
itempeuvent avoir un niveau inférieur et d’autres jusqu’à 5.
Questions
La fonction fd dans le code est ce que j'ai mis au point. Je crois qu'il y a une façon «plus propre» de faire cela, je n'arrive pas à penser à quelque chose. De plus, la fonction return items object, le rend objet circulaire.
JsBin: http://jsbin.com/debojiqove/2/edit?html,js,output
Existe-t-il un moyen d’aplatir les objets de manière récursive avec lodash ou tout simplement avec JavaScript?.
Une solution en Javascript simple en ce qui concerne les articles. Cela ne mutile pas le tableau source.
function flat(r, a) {
var b = {};
Object.keys(a).forEach(function (k) {
if (k !== 'items') {
b[k] = a[k];
}
});
r.Push(b);
if (Array.isArray(a.items)) {
b.items = a.items.map(function (a) { return a.id; });
return a.items.reduce(flat, r);
}
return r;
}
var data = [{ "id": 1, "level": "1", "text": "Sammy", "type": "Item", "items": [{ "id": 11, "level": "2", "text": "Table", "type": "Item", "items": [{ "id": 111, "level": "3", "text": "Dog", "type": "Item", "items": null }, { "id": 112, "level": "3", "text": "Cat", "type": "Item", "items": null }] }, { "id": 12, "level": "2", "text": "Chair", "type": "Item", "items": [{ "id": 121, "level": "3", "text": "Dog", "type": "Item", "items": null }, { "id": 122, "level": "3", "text": "Cat", "type": "Item", "items": null }] }] }, { "id": 2, "level": "1", "text": "Sundy", "type": "Item", "items": [{ "id": 21, "level": "2", "text": "MTable", "type": "Item", "items": [{ "id": 211, "level": "3", "text": "MTDog", "type": "Item", "items": null }, { "id": 212, "level": "3", "text": "MTCat", "type": "Item", "items": null }] }, { "id": 22, "level": "2", "text": "MChair", "type": "Item", "items": [{ "id": 221, "level": "3", "text": "MCDog", "type": "Item", "items": null }, { "id": 222, "level": "3", "text": "MCCat", "type": "Item", "items": null }] }] }, { "id": 3, "level": "1", "text": "Bruce", "type": "Folder", "items": [{ "id": 31, "level": "2", "text": "BTable", "type": "Item", "items": [{ "id": 311, "level": "3", "text": "BTDog", "type": "Item", "items": null }, { "id": 312, "level": "3", "text": "BTCat", "type": "Item", "items": null }] }, { "id": 32, "level": "2", "text": "Chair", "type": "Item", "items": [{ "id": 321, "level": "3", "text": "BCDog", "type": "Item", "items": null }, { "id": 322, "level": "3", "text": "BCCat", "type": "Item", "items": null }] }] }];
document.write('<pre>' + JSON.stringify(data.reduce(flat, []), 0, 4) + '</pre>');Avec un peu de saveur ES6
function flatten(xs) {
return xs.reduce((acc, x) => {
acc = acc.concat(x);
if (x.items) {
acc = acc.concat(flatten(x.items));
x.items = [];
}
return acc;
}, []);
}
Une solution plus courte utilisant reduce et recursion
function flatten(data){
return data.reduce(function(result,next){
result.Push(next);
if(next.items){
result = result.concat(flatten(next.items));
next.items = [];
}
return result;
},[]);
}
var data = [
{
"id": 1,
"level": "1",
"text": "Sammy",
"type": "Item",
"items": [
{
"id": 11,
"level": "2",
"text": "Table",
"type": "Item",
"items": [
{
"id": 111,
"level": "3",
"text": "Dog",
"type": "Item",
"items": null
},
{
"id": 112,
"level": "3",
"text": "Cat",
"type": "Item",
"items": null
}
]
},
{
"id": 12,
"level": "2",
"text": "Chair",
"type": "Item",
"items": [
{
"id": 121,
"level": "3",
"text": "Dog",
"type": "Item",
"items": null
},
{
"id": 122,
"level": "3",
"text": "Cat",
"type": "Item",
"items": null
}
]
}
]
},
{
"id": 2,
"level": "1",
"text": "Sundy",
"type": "Item",
"items": [
{
"id": 21,
"level": "2",
"text": "MTable",
"type": "Item",
"items": [
{
"id": 211,
"level": "3",
"text": "MTDog",
"type": "Item",
"items": null
},
{
"id": 212,
"level": "3",
"text": "MTCat",
"type": "Item",
"items": null
}
]
},
{
"id": 22,
"level": "2",
"text": "MChair",
"type": "Item",
"items": [
{
"id": 221,
"level": "3",
"text": "MCDog",
"type": "Item",
"items": null
},
{
"id": 222,
"level": "3",
"text": "MCCat",
"type": "Item",
"items": null
}
]
}
]
},
{
"id": 3,
"level": "1",
"text": "Bruce",
"type": "Folder",
"items": [
{
"id": 31,
"level": "2",
"text": "BTable",
"type": "Item",
"items": [
{
"id": 311,
"level": "3",
"text": "BTDog",
"type": "Item",
"items": null
},
{
"id": 312,
"level": "3",
"text": "BTCat",
"type": "Item",
"items": null
}
]
},
{
"id": 32,
"level": "2",
"text": "Chair",
"type": "Item",
"items": [
{
"id": 321,
"level": "3",
"text": "BCDog",
"type": "Item",
"items": null
},
{
"id": 322,
"level": "3",
"text": "BCCat",
"type": "Item",
"items": null
}
]
}
]
}
];
var result = flatten(data);
document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>');JavaScript simple
var data = [{ "id": 1, "level": "1", "text": "Sammy", "type": "Item", "items": [{ "id": 11, "level": "2", "text": "Table", "type": "Item", "items": [{ "id": 111, "level": "3", "text": "Dog", "type": "Item", "items": null }, { "id": 112, "level": "3", "text": "Cat", "type": "Item", "items": null }] }, { "id": 12, "level": "2", "text": "Chair", "type": "Item", "items": [{ "id": 121, "level": "3", "text": "Dog", "type": "Item", "items": null }, { "id": 122, "level": "3", "text": "Cat", "type": "Item", "items": null }] }] }, { "id": 2, "level": "1", "text": "Sundy", "type": "Item", "items": [{ "id": 21, "level": "2", "text": "MTable", "type": "Item", "items": [{ "id": 211, "level": "3", "text": "MTDog", "type": "Item", "items": null }, { "id": 212, "level": "3", "text": "MTCat", "type": "Item", "items": null }] }, { "id": 22, "level": "2", "text": "MChair", "type": "Item", "items": [{ "id": 221, "level": "3", "text": "MCDog", "type": "Item", "items": null }, { "id": 222, "level": "3", "text": "MCCat", "type": "Item", "items": null }] }] }, { "id": 3, "level": "1", "text": "Bruce", "type": "Folder", "items": [{ "id": 31, "level": "2", "text": "BTable", "type": "Item", "items": [{ "id": 311, "level": "3", "text": "BTDog", "type": "Item", "items": null }, { "id": 312, "level": "3", "text": "BTCat", "type": "Item", "items": null }] }, { "id": 32, "level": "2", "text": "Chair", "type": "Item", "items": [{ "id": 321, "level": "3", "text": "BCDog", "type": "Item", "items": null }, { "id": 322, "level": "3", "text": "BCCat", "type": "Item", "items": null }] }] }];
var r = [];
function flatten(a) {
if (a.length == 0) return;
var o = {};
o.id = a[0].id;
o.level = a[0].level;
o.text = a[0].text;
o.type = a[0].type
o.items = a[0].items == null ? null : []
r.Push(o);
if (Array.isArray(a[0].items)) {
flatten(a[0].items);
}
a.shift();
flatten(a);
}
flatten(data);
document.write('<pre>' + JSON.stringify(r, 0, 2) + '</pre>');Voici une solution utilisant la fonction récursive que j'ai appelée flattenNestedObjectsArray() (pour JavaScript natif ):
function flattenNestedObjectsArray(arr, part){
var flattened = part || [], items;
arr.forEach(function(v){
if (Array.isArray(v.items) && v.items.length) {
items = v.items;
v.items = [];
flattened.Push(v);
flattened.concat(flattened, flattenNestedObjectsArray(items, flattened));
} else {
flattened.Push(v);
}
});
return flattened;
}
var flattened = flattenNestedObjectsArray(data);
console.log(JSON.stringify(flattened, 0, 4));
La sortie console.log:
[
{
"id": 1,
"level": "1",
"text": "Sammy",
"type": "Item",
"items": []
},
{
"id": 11,
"level": "2",
"text": "Table",
"type": "Item",
"items": []
},
{
"id": 111,
"level": "3",
"text": "Dog",
"type": "Item",
"items": null
},
{
"id": 112,
"level": "3",
"text": "Cat",
"type": "Item",
"items": null
},
{
"id": 12,
"level": "2",
"text": "Chair",
"type": "Item",
"items": []
},
{
"id": 121,
"level": "3",
"text": "Dog",
"type": "Item",
"items": null
},
{
"id": 122,
"level": "3",
"text": "Cat",
"type": "Item",
"items": null
},
{
"id": 2,
"level": "1",
"text": "Sundy",
"type": "Item",
"items": []
},
{
"id": 21,
"level": "2",
"text": "MTable",
"type": "Item",
"items": []
},
{
"id": 211,
"level": "3",
"text": "MTDog",
"type": "Item",
"items": null
},
{
"id": 212,
"level": "3",
"text": "MTCat",
"type": "Item",
"items": null
},
{
"id": 22,
"level": "2",
"text": "MChair",
"type": "Item",
"items": []
},
{
"id": 221,
"level": "3",
"text": "MCDog",
"type": "Item",
"items": null
},
{
"id": 222,
"level": "3",
"text": "MCCat",
"type": "Item",
"items": null
},
{
"id": 3,
"level": "1",
"text": "Bruce",
"type": "Folder",
"items": []
},
{
"id": 31,
"level": "2",
"text": "BTable",
"type": "Item",
"items": []
},
{
"id": 311,
"level": "3",
"text": "BTDog",
"type": "Item",
"items": null
},
{
"id": 312,
"level": "3",
"text": "BTCat",
"type": "Item",
"items": null
},
{
"id": 32,
"level": "2",
"text": "Chair",
"type": "Item",
"items": []
},
{
"id": 321,
"level": "3",
"text": "BCDog",
"type": "Item",
"items": null
},
{
"id": 322,
"level": "3",
"text": "BCCat",
"type": "Item",
"items": null
}
]
J'avais besoin de faire la même chose et, tout en résolvant mon problème, j'ai trouvé une solution à la vôtre avec lodash:
function kids(node) {
return node.items
? [{...node, items: []}, _.map(node.items, kids)]
: {...node, items: null};
}
_.flatMapDeep(data, kids);
Une seule fonction de doublure peut effectuer ce travail.
var data = [{ "id": 1, "level": "1", "text": "Sammy", "type": "Item", "items": [{ "id": 11, "level": "2", "text": "Table", "type": "Item", "items": [{ "id": 111, "level": "3", "text": "Dog", "type": "Item", "items": null }, { "id": 112, "level": "3", "text": "Cat", "type": "Item", "items": null }] }, { "id": 12, "level": "2", "text": "Chair", "type": "Item", "items": [{ "id": 121, "level": "3", "text": "Dog", "type": "Item", "items": null }, { "id": 122, "level": "3", "text": "Cat", "type": "Item", "items": null }] }] }, { "id": 2, "level": "1", "text": "Sundy", "type": "Item", "items": [{ "id": 21, "level": "2", "text": "MTable", "type": "Item", "items": [{ "id": 211, "level": "3", "text": "MTDog", "type": "Item", "items": null }, { "id": 212, "level": "3", "text": "MTCat", "type": "Item", "items": null }] }, { "id": 22, "level": "2", "text": "MChair", "type": "Item", "items": [{ "id": 221, "level": "3", "text": "MCDog", "type": "Item", "items": null }, { "id": 222, "level": "3", "text": "MCCat", "type": "Item", "items": null }] }] }, { "id": 3, "level": "1", "text": "Bruce", "type": "Folder", "items": [{ "id": 31, "level": "2", "text": "BTable", "type": "Item", "items": [{ "id": 311, "level": "3", "text": "BTDog", "type": "Item", "items": null }, { "id": 312, "level": "3", "text": "BTCat", "type": "Item", "items": null }] }, { "id": 32, "level": "2", "text": "Chair", "type": "Item", "items": [{ "id": 321, "level": "3", "text": "BCDog", "type": "Item", "items": null }, { "id": 322, "level": "3", "text": "BCCat", "type": "Item", "items": null }] }] }],
flatIron = (a,b) => a.reduce((p,c) => {!!c.items ? (p.Push(c), flatIron(c.items,p), c.items = []) : p.Push(c); return p},b),
flatArr = flatIron(data,[]);
document.write('<pre>' + JSON.stringify(flatArr, 0, 2) + '</pre>');Voici ma version de la fonction récursive de flattenItems. Notez que j'ai supprimé la propriété items à tous les niveaux du résultat final.
function flattenItems(data) {
// flat is the array that we will return by the end
var flat = [];
data.forEach(function(item) {
// get child properties only
var flatItem = {};
Object.keys(item).forEach(function(key) {
if(item[key] && item.hasOwnProperty(key) && !Array.isArray(item[key])) {
flatItem[key] = item[key];
}
// recursive flattern on subitems
// add recursive call results to the
// current stack version of "flat", by merging arrays
else if(Array.isArray(item[key])) {
Array.prototype.Push.apply(flat, flattenItems(item[key]));
}
});
flat.Push(flatItem);
});
// sort by level before returning
return flat.sort(function(i1, i2) {
return parseInt(i1.level) - parseInt(i2.level);
});
}
Voici un violon en utilisant vos exemples de données, vérifiez la console.
Modification de Роман Парадеев pour le rendre un peu plus dynamique.
function flatten(xs, childSelector) {
return xs.reduce((acc, x) => {
acc = acc.concat(x);
let children = childSelector(x);
if (children) {
acc = acc.concat(flatten(children, childSelector));
}
return acc;
}, []);
}
Maintenant, items n'est pas codé en dur et vous pouvez l'utiliser flatten(data, x => x.items).
Depuis Lo-Dash 3.0.0, _.flattenDeep (data) renverra un tableau profondément aplati comme vous le souhaitez. Il existe également une fonction _.flatten (data) qui aplatit de manière superficielle.
une autre façon avec la fonction de réducteur récursif
_.reduce(data, function reducer(result, val) {
var items = _.reduce(val.items, reducer, []);
val.items = _.isArray(val.items) ? [] : val.items;
return _.concat(result, val, items);
}, []);