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
}
]
}
]
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);
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)
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);
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)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.