javascript - 在树中查找元素并更改其父项的属性值

Question

我想通过其属性值在树中找到一个元素，然后返回到树的开头并将每个元素的父元素的 isExpanded 属性设置为 true 使用 JS。

所以我有这个对象:

elementsArray = [
  {
    name: 'test_1',
    isExpanded: false,
    expandElements: [
      {
        name: 'test_1_1',
        isExpanded: false,
        expandElements: [
          {
            name: 'test_1_1_1'
          },
          {
            name: 'test_1_1_2'
          }
        ]
      },
      {
        name: 'test_1_2',
        isExpanded: false,
        expandElements: [
          {
            name: 'test_1_2_1'
          },
          {
            name: 'test_1_2_2'
          }
        ]
      }
    ]
  },
  {
    name: 'test_2',
    isExpanded: false,
    expandElements: [
      {
        name: 'test_2_1',
        isExpanded: false,
        expandElements: [
          {
            name: 'test_2_1_1'
          },
          {
            name: 'test_2_1_2'
          }
        ]
      },
      {
        name: 'test_2_2',
        isExpanded: false,
        expandElements: [
          {
            name: 'test_2_2_1'
          },
          {
            name: 'test_2_2_2'
          }
        ]
      }
    ]
  }
]

我想找到具有属性 name: 'test_2_2_1' 并将其每个父级的 isExpanded 属性设置为 true 的元素。

它应该如何工作:

• 调用方法 expandParentElements(elementsArray, 'test_2_2_1')
• elementsArray 更改为:

elementsArray = [
  {
    name: 'test_1',
    isExpanded: false,
    expandElements: [
      {
        name: 'test_1_1',
        isExpanded: false,
        expandElements: [
          {
            name: 'test_1_1_1'
          },
          {
            name: 'test_1_1_2'
          }
        ]
      },
      {
        name: 'test_1_2',
        isExpanded: false,
        expandElements: [
          {
            name: 'test_1_2_1'
          },
          {
            name: 'test_1_2_2'
          }
        ]
      }
    ]
  },
  {
    name: 'test_2',
    isExpanded: **true**,
    expandElements: [
      {
        name: 'test_2_1',
        isExpanded: false,
        expandElements: [
          {
            name: 'test_2_1_1'
          },
          {
            name: 'test_2_1_2'
          }
        ]
      },
      {
        name: 'test_2_2',
        isExpanded: **true**,
        expandElements: [
          {
            name: 'test_2_2_1'
          },
          {
            name: 'test_2_2_2'
          }
        ]
      }
    ]
  }
]

到目前为止，我已经设法只递归地在树内移动并找到合适的元素。这是它的样子:

let expandParentElements = (array, searchName) => {
  return array.map(item => {
    if (item.name === searchName) {
      return item
    } else if (item.expandElements) {
      return expandParentElements(item.expandElements, searchName)
    }
  })
}

Answer 1

这是一个在项目路径上设置 isExpanded 的函数。项目本身(例如，当它有子项目时)不会将 isExpanded 设置为 true。

此函数也不会清除在调用函数之前可能已设置为 true 的 isExpanded 值。

const expandParentElements = (array, searchName) =>
    array && array.some(item => item.name === searchName ||
        expandParentElements(item.expandElements, searchName) && (item.isExpanded = true)
    );

// Sample data from question
const elementsArray = [{name: 'test_1',isExpanded: false,expandElements: [{name: 'test_1_1',isExpanded: false,expandElements: [{name: 'test_1_1_1'},{name: 'test_1_1_2'}]},{name: 'test_1_2',isExpanded: false,expandElements: [{name: 'test_1_2_1'},{name: 'test_1_2_2'}]}]},{name: 'test_2',isExpanded: false,expandElements: [{name: 'test_2_1',isExpanded: false,expandElements: [{name: 'test_2_1_1'},{name: 'test_2_1_2'}]},{name: 'test_2_2',isExpanded: false,expandElements: [{name: 'test_2_2_1'},{name: 'test_2_2_2'}]}]}];

expandParentElements(elementsArray, "test_2_2_1");
console.log(elementsArray);

您可能还想使用一个函数来折叠所有内容，即将所有 isExpanded 设置为 false:

const collapseAll = (array) =>
    array.filter(item => item.expandElements)
         .forEach(item => (item.isExpanded = false, collapseAll(item.expandElements)));