javascript - 如何将嵌套子级数组转换为重定向/面包屑？

Question

我需要将树状结构更改为一些重定向(面包屑方式)。我认为问题在于我只构建了重定向的第一部分，而没有以某种方式正确回填。我一直正确地完成重定向的第一部分，但是一旦我必须重置网址，就会失败:

不想要的结果

[ '/wedding.html /wedding',
  '/wedding/monogram-series.html /monogram-series',
  '/wedding/monogram-series/test-theme.html /test-theme',
  '/test-theme-5.html /test-theme-5',
  '/classic-series.html /classic-series',
  '/stained-series.html /stained-series',
  '/fun-comical-series.html /fun-comical-series',
  '/fun-comical-series/test-theme-2.html /test-theme-2',
  '/test-theme-3.html /test-theme-3',
  '/test-theme-3/test-theme-4.html /test-theme-4',
  '/signature-series.html /signature-series',
  '/silhouette-series.html /silhouette-series',
  '/state-series.html /state-series' ]

我正在将列表生成为字符串数组。这是我当前正在使用的功能:

正在使用的功能(是的，我知道这无法正常工作)

const createUrls = (item) => {
  let urls = []
  let path = ``
  let prevEl = null

  const nest = (el) => {
    if (prevEl && (prevEl.id !== el.parentId)) {
      path = ``
    }
    prevEl = el
    path += `/${cleanUrl(el.name)}`
    urls.push(`${path}.html /${cleanUrl(el.name)}`)

    if (el.children && el.children.length) {
      el.children.forEach((childEl) => {
        nest(childEl)
      })
    }
  }

  nest(item)

  return urls
}

基本上我需要这个

正在传递数据

{
  "id": 219,
  "name": "Wedding",
  "parentId": null,
  "children": [
    {
      "id": 315,
      "name": "Monogram Series",
      "parentId": 219,
      "children": [
        {
          "id": 3309,
          "name": "Test-Theme",
          "parentId": 315
        },
        {
          "id": 3313,
          "name": "test-theme-5",
          "parentId": 315
        }
      ]
    },
    {
      "id": 316,
      "name": "Classic Series",
      "parentId": 219
    },
    {
      "id": 317,
      "name": "Stained Series",
      "parentId": 219
    },
    {
      "id": 318,
      "name": "Fun Comical Series",
      "parentId": 219,
      "children": [
        {
          "id": 3310,
          "name": "test-theme-2",
          "parentId": 318
        },
        {
          "id": 3311,
          "name": "test-theme-3",
          "parentId": 318,
          "children": [
            {
              "id": 3312,
              "name": "test-theme-4",
              "parentId": 3311
            }
          ]
        }
      ]
    },
    {
      "id": 319,
      "name": "Signature Series",
      "parentId": 219
    },
    {
      "id": 320,
      "name": "Silhouette Series",
      "parentId": 219
    },
    {
      "id": 324,
      "name": "State Series",
      "parentId": 219
    }
  ]
}

变成这样的东西:

想要的结果

[
  '/wedding.html /wedding', 
  '/wedding/monogram-series.html /monogram-series', 
  '/wedding/monogram-series/test-theme.html /test-theme',
  '/wedding/classic-series.html /classic-series',
  '/wedding/stained-series.html /stained-series',
  '/wedding/fun-comical-series.html /fun-comical-series',
  '/wedding/fun-comical-series/test-theme-2 /test-theme-2',
  '/wedding/fun-comical-series/test-theme-3 /test-theme-3',
  '/wedding/fun-comical-series/test-theme-3/test-theme-4 /test-theme-4',
  '/wedding/signature-series.html /signature-series',
  '/wedding/silhouette-series.html /silhouette-series',
  '/wedding/state-series.html /state-series'
]

<小时/>

编辑

被要求将 cleanUrl 函数添加到代码中:

cleanUrl函数

const cleanUrl = value => {
  if (value === null) value = ''
  let result = value
    .replace(/[^a-z0-9]/gim, ' ')
    .replace(/\s+/g, '-')
    .replace(/\./g, '')
    .toLowerCase()
  while (result.indexOf('--') > -1) {
    result = result.replace('--', '-')
  }
  if (result.slice(-1) == '-') {
    result = result.substring(0, result.length - 1)
  }
  if (result.slice(0, 1) == '-') {
    result = result.substring(1)
  }
  return result
}

Answer 1

var stack = [];
var output = [];
var inputData = 
{
  "id": 219,
  "name": "Wedding",
  "parentId": null,
  "children": [
    {
      "id": 315,
      "name": "Monogram Series",
      "parentId": 219,
      "children": [
        {
          "id": 3309,
          "name": "Test-Theme",
          "parentId": 315
        },
        {
          "id": 3313,
          "name": "test-theme-5",
          "parentId": 315
        }
      ]
    },
    {
      "id": 316,
      "name": "Classic Series",
      "parentId": 219
    },
    {
      "id": 317,
      "name": "Stained Series",
      "parentId": 219
    },
    {
      "id": 318,
      "name": "Fun Comical Series",
      "parentId": 219,
      "children": [
        {
          "id": 3310,
          "name": "test-theme-2",
          "parentId": 318
        },
        {
          "id": 3311,
          "name": "test-theme-3",
          "parentId": 318,
          "children": [
            {
              "id": 3312,
              "name": "test-theme-4",
              "parentId": 3311
            }
          ]
        }
      ]
    },
    {
      "id": 319,
      "name": "Signature Series",
      "parentId": 219
    },
    {
      "id": 320,
      "name": "Silhouette Series",
      "parentId": 219
    },
    {
      "id": 324,
      "name": "State Series",
      "parentId": 219
    }
  ]
};

deepDive(inputData);
console.log(output);

function deepDive(node)
{
  var cleanName = cleanUrl(node.name);
  var i;

  stack.push(cleanName);
  output.push('/' + stack.join('/') + '.html /' + cleanName);
  if(node.children && node.children.length)
  {
    for(i = 0; i < node.children.length; i++) deepDive(node.children[i]);
  }
  stack.pop();
}

function cleanUrl(name)
{
  return name.replace(' ','-').toLowerCase();
}