我有 child (子类别)的多维数组 :
我构建 Angular 路由并从 API 获取这种数据格式。
const items = [{
displayName: 'Wiadomości',
urlName: 'wiadomosci',
subcategories: [{
displayName: 'Newsy',
urlName: 'newsy',
subcategories: []
}, {
displayName: 'Wydarzenia',
urlName: 'wydarzenia',
subcategories: []
}, {
displayName: 'Komentarze i analizy',
urlName: 'komentarze-i-analizy',
subcategories: []
}, {
displayName: 'Reportaże',
urlName: 'reportaze',
subcategories: []
}]
}, {
displayName: 'Prawo',
urlName: 'prawo',
subcategories: [{
displayName: 'Sprzedaż/zakup',
urlName: 'sprzedaz-zakup',
subcategories: [{
displayName: 'Dom',
urlName: 'dom',
subcategories: []
}, {
displayName: 'Mieszkanie',
urlName: 'mieszkanie',
subcategories: []
}, {
displayName: 'Działka',
urlName: 'dzialka',
subcategories: []
}, {
displayName: 'Komercyjne',
urlName: 'komercyjne',
subcategories: []
}]
}, {
displayName: 'Najem/dzierżawa',
urlName: 'najem-dzierzawa',
subcategories: [{
displayName: 'Dom',
urlName: 'dom',
subcategories: []
}, {
displayName: 'Mieszkanie',
urlName: 'mieszkanie',
subcategories: []
}, {
displayName: 'Prywatny/komercyjny',
urlName: 'prywatny-komercyjny',
subcategories: []
}, {
displayName: 'Działka',
urlName: 'dzialka',
subcategories: []
}, {
displayName: 'Budynki',
urlName: 'budynki',
subcategories: []
}]
}, {
displayName: 'Podatki',
urlName: 'podatki',
subcategories: []
}, {
displayName: 'Prawo budowlane',
urlName: 'prawo-budowlane',
subcategories: []
}, {
displayName: 'Dziedziczenie',
urlName: 'dziedziczenie',
subcategories: []
}, {
displayName: 'Wzory dokumentów',
urlName: 'wzory-dokumentow',
subcategories: []
}]
}, {
displayName: 'Finanse',
urlName: 'finanse',
subcategories: [{
displayName: 'Kredyty',
urlName: 'kredyty',
subcategories: []
}, {
displayName: 'Ubezpieczenia',
urlName: 'ubezpieczenia',
subcategories: []
}, {
displayName: 'Kalkulatory',
urlName: 'kalkulatory',
subcategories: []
}, {
displayName: 'Inwestycje',
urlName: 'inwestycje',
subcategories: []
}, {
displayName: 'Dofinansowanie i dotacje',
urlName: 'dofinansowanie-i-dotacje',
subcategories: []
}]
}, {
displayName: 'Porady i inspiracje',
urlName: 'porady-i-inspiracje',
subcategories: [{
displayName: 'Budowa i remont',
urlName: 'budowa-i-remont',
subcategories: []
}, {
displayName: 'Użytkowanie',
urlName: 'uzytkowanie',
subcategories: []
}, {
displayName: 'Balkon i ogród',
urlName: 'balkon-i-ogrod',
subcategories: []
}, {
displayName: 'Aranżacje',
urlName: 'aranzacje',
subcategories: []
}, {
displayName: 'Design',
urlName: 'design',
subcategories: []
}]
}, {
displayName: 'Eksperci',
urlName: 'eksperci',
subcategories: [{
displayName: 'Felietony',
urlName: 'felietony',
subcategories: []
}, {
displayName: 'Zapytaj eksperta',
urlName: 'zapytaj-eksperta',
subcategories: []
}, {
displayName: 'Materiały źródłowe',
urlName: 'materialy-zrodlowe',
subcategories: []
}]
}];
我绝对需要将来自服务器的响应映射到包含从子类别和 urlName 构建的路径的数组。输出应该是:
const paths = [
'wiadomosci',
'wiadomosci/newsy'
'wiadomosci/komentarze-i-analizy',
'wiadomosci/reportaze',
'prawo',
'prawo/sprzedaz-zakup',
'prawo/sprzedaz-zakup/dom',
'prawo/sprzedaz-zakup/mieszkanie',
'prawo/sprzedaz-zakup/dzialka',
'prawo/sprzedaz-zakup/komercyjne',
'prawo/najem-dzierzawa',
'prawo/najem-dzierzawa/dom',
'prawo/najem-dzierzawa/mieszkanie',
'prawo/najem-dzierzawa/prywatny-komercyjny',
'prawo/najem-dzierzawa/dzialka',
'prawo/najem-dzierzawa/budynki',
'podatki',
'prawo-budowlane',
'dziedziczenie',
'wzory-dokumentow',
'finanse',
'finanse/kredyty',
'finanse/ubezpieczenia',
'finanse/kalkulatory',
'finanse/inwestycje',
'finanse/dofinansowanie-i-dotacje',
'porady-i-inspiracje',
'porady-i-inspiracje/budowa-i-remont',
'porady-i-inspiracje/uzytkowanie',
'porady-i-inspiracje/balkon-i-ogrod',
'porady-i-inspiracje/aranzacje',
'porady-i-inspiracje/design',
'eksperci',
'eksperci/felietony',
'eksperci/zapytaj-eksperta',
'eksperci/materialy-zrodlowe'
];
我试图编写递归函数来为我收集和构建路径,但不幸的是我失败了......你能帮我解决这个问题吗? :/
我在 PHP 中的尝试:http://sandbox.onlinephpfunctions.com/code/a2c4fc7dbddd226d0ec09e7ac020adc2d3c1d6dc
最佳答案
您可以通过为所有嵌套对象取前缀来映射嵌套路径,从而采用紧凑的方法。
const
items = [{ displayName: 'Wiadomości', urlName: 'wiadomosci', subcategories: [{ displayName: 'Newsy', urlName: 'newsy', subcategories: [] }, { displayName: 'Wydarzenia', urlName: 'wydarzenia', subcategories: [] }, { displayName: 'Komentarze i analizy', urlName: 'komentarze-i-analizy', subcategories: [] }, { displayName: 'Reportaże', urlName: 'reportaze', subcategories: [] }] }, { displayName: 'Prawo', urlName: 'prawo', subcategories: [{ displayName: 'Sprzedaż/zakup', urlName: 'sprzedaz-zakup', subcategories: [{ displayName: 'Dom', urlName: 'dom', subcategories: [] }, { displayName: 'Mieszkanie', urlName: 'mieszkanie', subcategories: [] }, { displayName: 'Działka', urlName: 'dzialka', subcategories: [] }, { displayName: 'Komercyjne', urlName: 'komercyjne', subcategories: [] }] }, { displayName: 'Najem/dzierżawa', urlName: 'najem-dzierzawa', subcategories: [{ displayName: 'Dom', urlName: 'dom', subcategories: [] }, { displayName: 'Mieszkanie', urlName: 'mieszkanie', subcategories: [] }, { displayName: 'Prywatny/komercyjny', urlName: 'prywatny-komercyjny', subcategories: [] }, { displayName: 'Działka', urlName: 'dzialka', subcategories: [] }, { displayName: 'Budynki', urlName: 'budynki', subcategories: [] }] }, { displayName: 'Podatki', urlName: 'podatki', subcategories: [] }, { displayName: 'Prawo budowlane', urlName: 'prawo-budowlane', subcategories: [] }, { displayName: 'Dziedziczenie', urlName: 'dziedziczenie', subcategories: [] }, { displayName: 'Wzory dokumentów', urlName: 'wzory-dokumentow', subcategories: [] }] }, { displayName: 'Finanse', urlName: 'finanse', subcategories: [{ displayName: 'Kredyty', urlName: 'kredyty', subcategories: [] }, { displayName: 'Ubezpieczenia', urlName: 'ubezpieczenia', subcategories: [] }, { displayName: 'Kalkulatory', urlName: 'kalkulatory', subcategories: [] }, { displayName: 'Inwestycje', urlName: 'inwestycje', subcategories: [] }, { displayName: 'Dofinansowanie i dotacje', urlName: 'dofinansowanie-i-dotacje', subcategories: [] }] }, { displayName: 'Porady i inspiracje', urlName: 'porady-i-inspiracje', subcategories: [{ displayName: 'Budowa i remont', urlName: 'budowa-i-remont', subcategories: [] }, { displayName: 'Użytkowanie', urlName: 'uzytkowanie', subcategories: [] }, { displayName: 'Balkon i ogród', urlName: 'balkon-i-ogrod', subcategories: [] }, { displayName: 'Aranżacje', urlName: 'aranzacje', subcategories: [] }, { displayName: 'Design', urlName: 'design', subcategories: [] }] }, { displayName: 'Eksperci', urlName: 'eksperci', subcategories: [{ displayName: 'Felietony', urlName: 'felietony', subcategories: [] }, { displayName: 'Zapytaj eksperta', urlName: 'zapytaj-eksperta', subcategories: [] }, { displayName: 'Materiały źródłowe', urlName: 'materialy-zrodlowe', subcategories: [] }] }],
getPath = prefix => ({ urlName, subcategories }) =>
(path => [path, ...subcategories.flatMap(getPath(path))])
(prefix + (prefix && '/') + urlName),
paths = items.flatMap(getPath(''));
console.log(paths);
.as-console-wrapper { max-height: 100% !important; top: 0; }
关于javascript - 循环遍历多维数组并构建路径图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64049161/