如何过滤计算数据(VueJS)中的嵌套数据？
如何过滤计算数据(VueJS)中的嵌套数据？
提问于 2018-08-02 23:42:14
这个想法很简单。
在一个计算变量中，我想用针过滤部分，而不是仅仅显示匹配的部分和附加的问题(就像下面的例子)，我想排除标题不匹配和部分标题不匹配的问题。
以下是初始数据集：
const sections =
[
{
title: 'Title section 1',
questions : [
{
title: 'Title question 1'
},
{
title: 'Title question 2'
}
]
},
{
title: 'Title section 2',
questions : [
{
title: 'Title question 3'
},
{
title: 'Title question 4'
}
]
}
]以下是预期结果：
当针为“第1节”时：
const filteredArray = [
{
title: 'Title section 1',
questions : [
{
title: 'Title question 1'
},
{
title: 'Title question 2'
}
]
}
]当针为“问题1”时：
const filteredArray = [
{
title: 'Title section 1',
questions : [
{
title: 'Title question 1'
}
]
}
]诸若此类。
下面是我写的代码：
const sections =
[
{
title: 'Title section 1',
questions : [
{
title: 'Title question 1'
},
{
title: 'Title question 2'
}
]
},
{
title: 'Title section 2',
questions : [
{
title: 'Title question 3'
},
{
title: 'Title question 4'
}
]
}
]
const needle = 'question 4'
const filteredArray = sections.filter(section => section.title.toLowerCase().indexOf(needle.toLowerCase()) !== -1 ||
section.questions.filter(question => question.title.toLowerCase().indexOf(needle.toLowerCase()) !== -1).length > 0)
console.log(filteredArray)
如你所见，过滤后的结果很好，但当问题标题和部分标题不匹配时，我不能排除问题。
一个想法？
NB :我使用的是vuejs2，所以我的原始数组是从存储中返回的，为了保持反应性，我不能使用其他数组。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-06 15:24:11
感谢@dhilt，这是最终的解决方案:)
const sections =
[
{
title: 'Title section 1',
questions : [
{
title: 'Title question 1'
},
{
title: 'Title question 2'
}
]
},
{
title: 'Title section 2',
questions : [
{
title: 'Title question 3'
},
{
title: 'Title question 4'
}
]
}
]
const needle = 'question 4'
const filteredArray = sections.reduce((acc, section) => {
// Pushing entire section if we find needle in section title
if (section.title.toLowerCase().indexOf(needle.toLowerCase()) >= 0) {
acc.push({ ...section })
} else {
// Pushing section with filtered questions when question title match
const questions = section.questions.filter(question =>
question.title.toLowerCase().indexOf(needle.toLowerCase()) >= 0
)
if (questions.length > 0) {
acc.push({ ...section, questions })
}
}
return acc
}, [])
console.log(filteredArray)
Stack Overflow用户
发布于 2018-08-02 23:56:29
我会使用Array.prototype.reduce来实现这样的结果：
const needleTitle = 'section 2'
const needleQuestion = 'question 4'
const filteredArray = sections.reduce((acc, section) => {
// filtering 1-level section list by pushing to acc only needed items
if (section.title.toLowerCase().indexOf(needleTitle.toLowerCase()) >= 0) {
// filtering 2-level question list by replacing section.questions with a new list
const questions = section.questions.filter(question =>
question.title.toLowerCase().indexOf(needleQuestion.toLowerCase()) >= 0
)
acc.push({ ...section, questions });
}
return acc;
}, []);另外，您可以看到，我将needle拆分为needleTitle和needleQuestion。这可能不是你想要的，但是这个想法应该是有用的。上面的代码将导致
[
{
title: 'Title section 2',
questions : [
{
title: 'Title question 4'
}
]
}
]页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51657567
复制相关文章
相似问题