過濾對象的嵌套數組

Question

我想要一個數組，該數組返回基於檢查屬性的某些屬性，並且還希望盡可能過濾掉所選技能的水平

const data = [
      {
        "name": "Beginner",
        "skills": [
          {
            "name": "Skill 1",
            "checked": false
          },
          {
            "name": "Skill 2",
            "checked": true
          }
        ]
      },
      {
        "name": "Intermediate",
        "skills": [
          {
            "name": "Skill 1",
            "checked": true
          },
          {
            "name": "Skill 2",
            "checked": false
          }
        ]
      },
      {
        "name": "Professional",
        "skills": [
          {
            "name": "Skill 1",
            "checked": false
          },
          {
            "name": "Skill 2",
            "checked": false
          }
        ]
      },
    ]

該函數返回已檢查的技能，但還返回所有關卡​​對象

levelwithskills = data.map(level =>
              Object.assign({}, level, {
              skills: level.skills.filter(skill => skill.checked)
            })
          )

我希望得到格式的結果

   [
      {
        "name": "Beginner",
        "skills": [
          {
            "name": "Skill 2",
            "checked": true
          }
        ]
      },
      {
        "name": "Intermediate",
        "skills": [
          {
            "name": "Skill 1",
            "checked": true
          }
        ]
      }
    ]

Answer 1

映射后，按項目是否具有任何skills filter ：

 const data = [{ "name": "Beginner", "skills": [{ "name": "Skill 1", "checked": false }, { "name": "Skill 2", "checked": true } ] }, { "name": "Intermediate", "skills": [{ "name": "Skill 1", "checked": true }, { "name": "Skill 2", "checked": false } ] }, { "name": "Professional", "skills": [{ "name": "Skill 1", "checked": false }, { "name": "Skill 2", "checked": false } ] }, ] levelwithskills = data .map(level => ({ ...level, skills: level.skills.filter(skill => skill.checked) })) .filter(({ skills }) => skills.length) console.log(levelwithskills); 

Answer 2

您可以使用Array#reduce方法來實現。

const levelwithskills = data.reduce((arr, level) => {
  // filter skills
  let skills = level.skills.filter(({ checked }) => checked);
  // check length of filtered skills if greater than 0 then push into array
  skills.length && arr.push({ ...level, skills });
  // return array reference
  return arr
  // set initial value as an empty array for the result
}, [])

 const data = [{ "name": "Beginner", "skills": [{ "name": "Skill 1", "checked": false }, { "name": "Skill 2", "checked": true } ] }, { "name": "Intermediate", "skills": [{ "name": "Skill 1", "checked": true }, { "name": "Skill 2", "checked": false } ] }, { "name": "Professional", "skills": [{ "name": "Skill 1", "checked": false }, { "name": "Skill 2", "checked": false } ] }, ]; const levelwithskills = data.reduce((arr, level) => { let skills = level.skills.filter(({ checked }) => checked); skills.length && arr.push({ ...level, skills }); return arr }, []) console.log(levelwithskills) 

Answer 3

 const data = [ { "name": "Beginner", "skills": [ { "name": "Skill 1", "checked": false }, { "name": "Skill 2", "checked": true } ] }, { "name": "Intermediate", "skills": [ { "name": "Skill 1", "checked": true }, { "name": "Skill 2", "checked": false } ] }, { "name": "Professional", "skills": [ { "name": "Skill 1", "checked": false }, { "name": "Skill 2", "checked": false } ] }, ] let newData = data.map(d=>({ ...d, skills: d.skills.filter(fd=>fd.checked) })).filter(afd=>afd.skills.length) console.log(newData); 

Answer 4

另外，我們可以這樣做

 const data = [ { "name": "Beginner", "skills": [ { "name": "Skill 1", "checked": false }, { "name": "Skill 2", "checked": true } ] }, { "name": "Intermediate", "skills": [ { "name": "Skill 1", "checked": true }, { "name": "Skill 2", "checked": false } ] }, { "name": "Professional", "skills": [ { "name": "Skill 1", "checked": false }, { "name": "Skill 2", "checked": false } ] }, ] let filteredData=[] data.map((obj)=>{ obj.skills.map((innerObj)=>{ if(innerObj.checked===true){ filteredData.push({name:obj.name, skills:innerObj}) } }) }) console.log(filteredData)