【问题标题】:Filter Nested array based on some property根据某些属性过滤嵌套数组
【发布时间】:2020-04-23 21:43:26
【问题描述】:

我有一个数组:

var data = [{
  "name": "Main Hobbies",
  "checked": false,
  "children": [{
    "name": "Dance",
    "checked": false,
    "children": [{
      "name": "Salsa",
      "checked": true
    }, {
      "name": "Solo",
      "checked": false
    }]
  }, {
    "name": "Sports",
    "checked": false,
    "children": [{
      "name": "Cricket",
      "checked": true
    }]
  }]
}, {
  "name": "Game",
  "checked": false,
  "children": [{
    "name": "PUBG",
    "checked": false
  }, {
    "name": "Cricket",
    "checked": false
  }, {
    "name": "Football",
    "checked": true
  }]
}]

function removeFalseElem(arr) {
  arr.forEach(element => {
    if (Array.isArray(element.children) && element.children.length > 0) {
      element.children = element.children.filter(e => {
        return e.checked === true
      });
      element.children.map(e => {
        delete e['id'], delete e['checked']
      })
    } else {
      removeFalseElem(element.children);
    }
    delete element['id'], delete element['checked'];
  });

}
removeFalseElem(data);
console.log(data);

如何将name 映射到keychildrenarray 包含checkedtrue 的任何位置。 Main hobies 应该包含 Salsa,因为它已被检查。我只是想反转这个question

的方法

输出应该是这样的

{
  "Main Hobbies": { Dance: ["Salsa"], Sports: ["Cricket"] },
  Game: ["Football"]
}

必须只保留checked:true

【问题讨论】:

    标签: javascript arrays ecmascript-6


    【解决方案1】:

    您可以检查一个子项是否不包含子项并返回一个名称数组或创建一个带有选中节点的对象。

    const
        getObject = array => array.every(({ children }) => !children)
            ? array.reduce((r, { name, checked }) => checked ? [...(r || []), name] : r, undefined)
            : array.reduce((r, { name, checked, children = [] }) => {
                children = getObject(children);
                if (checked || children) r[name] = children;
                return r;
            }, {}),            
        data = [{ name: "Main Hobbies", checked: false, children: [{ name: "Dance", checked: false, children: [{ name: "Salsa", checked: true }, { name: "Solo", checked: false }] }, { name: "Sports", checked: false, children: [{ name: "Cricket", checked: true }] }] }, { name: "Game", checked: false, children: [{ name: "PUBG", checked: false }, { name: "Cricket", checked: false }, { name: "Football", checked: true }] }],
        result = getObject(data);
    
    console.log(result);
    .as-console-wrapper { max-height: 100% !important; top: 0; }

    【讨论】:

      【解决方案2】:

      使用以下辅助方法,遍历项目并构建所需的输出。
      1) 过滤器——给定一个数组,返回正确的名称
      2) hasGrandChild -- 给定对象是否有子对象,子对象是否有子对象。

      const process = data => {
        const filter = arr => arr.filter(x => x.checked).map(x => x.name);
        const hasGrandChild = arr => arr.length > 0 && "children" in arr[0];
        const output = {};
      
        data.forEach(({ name, children }) => {    
          if (hasGrandChild(children)) {
            const obj = {};
            children.forEach(ch => (obj[ch.name] = filter(ch.children)));
            output[name] = obj;
          } else {
            output[name] = filter(children);
          }
        });
        return output;
      };
      
      var data = [
        {
          name: "Main Hobbies",
          checked: false,
          children: [
            {
              name: "Dance",
              checked: false,
              children: [
                {
                  name: "Salsa",
                  checked: true
                },
                {
                  name: "Solo",
                  checked: false
                }
              ]
            },
            {
              name: "Sports",
              checked: false,
              children: [
                {
                  name: "Cricket",
                  checked: true
                }
              ]
            }
          ]
        },
        {
          name: "Game",
          checked: false,
          children: [
            {
              name: "PUBG",
              checked: false
            },
            {
              name: "Cricket",
              checked: false
            },
            {
              name: "Football",
              checked: true
            }
          ]
        }
      ];
      
      console.log(process(data));

      【讨论】:

        猜你喜欢
        • 2022-11-20
        • 1970-01-01
        • 1970-01-01
        • 2020-11-07
        • 2021-11-03
        • 2018-11-06
        • 1970-01-01
        • 1970-01-01
        • 2023-01-26
        相关资源
        最近更新 更多