循环遍历带有子元素的多维数组并构建路径图答案

【问题标题】：Loop through multidimensional array with childrens and build map of paths循环遍历带有子元素的多维数组并构建路径图
【发布时间】：2021-01-10 21:45:29
【问题描述】：

我有一个带有儿童（子类别）的多维数组：

我构建 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

【问题讨论】：

请添加您的尝试。你从哪里得到/1？
如果二级子类总是空的，为什么还要从服务器发送？这会在答案中发挥作用吗？
@NinaScholz：我现在删除了数字。我在 PHP 中的尝试：sandbox.onlinephpfunctions.com/code/…
@EugenSunic：我认为不会。我在 PHP 中的尝试：sandbox.onlinephpfunctions.com/code/…
您已标记此“PHP”、“Javascript”和“Typescript”；你在哪个工作？还请edit您的问题在问题本身中包含minimal reproducible example（这样我们就不必点击查看它，如果您链接到的页面更改或消失）。请记住包含简短示例输入、您当前获得的输出以及您希望针对特定输入的输出。

标签： javascript php arrays typescript multidimensional-array

【解决方案1】：

你可以试试这个：循环遍历你的项目，里面收集孩子，返回第一个没有斜线的父项目和孩子一起

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: []
  }]
}];


const result = items.reduce((acc, x) => {
  list = x.subcategories.reduce((acc2, y) => {
    acc2.push(x.displayName.toLowerCase() + '/' + y.urlName.toLowerCase())
    return acc2
  }, []);
  acc.push([x.displayName.toLowerCase(), ...list]);
  return acc;
}, []).flat()
console.log(result)

【讨论】：

向雄辩的减速器致敬！我认为 OP 在顶层需要 urlName 而不是 displayName。

【解决方案2】：

您可以通过为所有嵌套对象获取前缀来映射嵌套路径来采取紧凑的方法。

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; }

【讨论】：