filter in a nested array of object

Question

I want to have an array that return certain property base on the checked property and also want to filter out the levels of the selected skills as possible

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
          }
        ]
      },
    ]

The function return the checked skills, but also return all the level objects with it

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

i expect to get the result in format

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

CertainPerformance · Accepted Answer · 2019-04-11 06:26:15Z

3

After mapping, filter by whether an item has any skills:

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

answered Apr 11, 2019 at 6:26

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pranav C Balan · Accepted Answer · 2019-04-11 07:09:33Z

You can do it with Array#reduce method.

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)

iambinodstha · Accepted Answer · 2019-04-11 07:20:26Z

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

akshay bagade · Accepted Answer · 2019-04-11 08:05:24Z

Also, we can do this as

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)

Collectives™ on Stack Overflow

filter in a nested array of object

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related