如何使用vue.js对多维json对象进行搜索过滤
如何使用vue.js对多维json对象进行搜索过滤
提问于 2019-02-20 06:34:45
我在json中有一个这样的结构(我不能改变这个json中的数据)：
itens: {"countcats":2,"countsubcats":7,
"catsubcatsdata":{
"15978738e6cd1e":{"title":"Test 1","description":"blablabla",
"subcats":{
"1597873b1653d9": {"codurl":"t01url","title":"Teste subiten 1","description":""},
"1597873bd76c80": {"codurl":"t01url2","title":"Testing sub two","description":""},
"1597873c9d4a81": {"codurl":"t01url3","title":"Test sub 3","description":"blablabla 01"},
}},
"15978745b32c1b":{"title":"Loren Ipsun","description":"lamet dectoid samet",
"subcats":{
"159787464bc887":{"codurl":"maecenas","title":"Maecenas pulvinar","description":"orci non volutpat varius"},
"159787472eb5e6":{"codurl":"donecorci ","title":"Donec hendrerit orci","description":""},
"15978748b89bca":{"codurl":"massadictum","title":"Nullam eu massa dictum", "description":""},
"159787495492f4":{"codurl":"ultricies","title":"Etiam massa arcu","description":"Donec ultricies porttitor augue quis dictum. Quisque efficitur nec sapien eu ultricies"}
}}
}}我有以下代码：
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="v-for-sectors">
<input type="text" placeholder="Search" v-model="searchQuery">
<ul>
<li v-for="(value, key) in filteredList">
<b>{{ value.title }}</b><br>{{ value.description }}
<ul>
<li v-for="(vsub, keysub) in value.subcats"><a v-bind:href="'http://www.teste.com/'+vsub.codurl">{{ vsub.title }} - {{ vsub.description }}</a></li>
</ul>
</li>
</ul>
</div>
<script>
new Vue({
el: '#v-for-sectors',
data: {
searchQuery: '',
itens: {"catsubcatsdata":{"15978738e6cd1e":{"title":"Test 1","description":"blablabla","subcats":{"1597873b1653d9":{"codurl":"t01url","title":"Teste subiten 1","description":""},"1597873bd76c80":{"codurl":"t01url2","title":"Testing sub two","description":""},"1597873c9d4a81":{"codurl":"t01url3","title":"Test sub 3","description":"blablabla 01"}}},"15978745b32c1b":{"title":"Loren Ipsun","description":"lamet dectoid samet","subcats":{"159787464bc887":{"codurl":"maecenas","title":"Maecenas pulvinar","description":"orci non volutpat varius"},"159787472eb5e6":{"codurl":"donecorci","title":"Donec hendrerit orci","description":""},"15978748b89bca":{"codurl":"massadictum","title":"Nullam eu massa dictum","description":""},"159787495492f4":{"codurl":"ultricies","title":"Etiam massa arcu","description":"Donec ultricies porttitor augue quis dictum."}}}}}
},
computed: {
filteredList: function () {
var filterKey = this.searchQuery && this.searchQuery.toLowerCase()
var data = this.itens.catsubcatsdata
var dataarray = Object.keys(data)
if (!filterKey) { return data; }
return dataarray
.filter(function(key) {
var row = data[key];
return Object.keys(row)
.some(function(key) {
return String(row[key])
.toLowerCase()
.indexOf(filterKey) > -1;
})
})
.reduce(function(acc, key) {
acc[key] = data[key];
return acc;
}, {})
}
}
});
</script>
我希望在搜索中输入有关类别的标题或描述的内容时，会显示如下内容：
(这已经起作用了。)
但是，当单词来自子类别的标题或描述时，它应该显示：
(这不起作用。)
有没有人能帮我解决这个问题？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-02-20 10:16:53
据我所知，你想要过滤你的搜索词，包括在顶层匹配title或description的所有条目，或者包括顶层，并且如果匹配在子层而不在顶层，则包括顶层和仅匹配的子层。
因此，首先我创建了一个方法matches，这样代码就不会变得杂乱。然后我进行了一次计算，以列表的形式返回感兴趣的值。然后我做了一个计算，根据上面的标准过滤这些值，当匹配的地方是匹配的子猫时，构造一个只有匹配子猫的新对象。
new Vue({
el: '#v-for-sectors',
data: {
searchQuery: '',
itens: {
"catsubcatsdata": {
"15978738e6cd1e": {
"title": "Test 1",
"description": "blablabla",
"subcats": {
"1597873b1653d9": {
"codurl": "t01url",
"title": "Teste subiten 1",
"description": ""
},
"1597873bd76c80": {
"codurl": "t01url2",
"title": "Testing sub two",
"description": ""
},
"1597873c9d4a81": {
"codurl": "t01url3",
"title": "Test sub 3",
"description": "blablabla 01"
}
}
},
"15978745b32c1b": {
"title": "Loren Ipsun",
"description": "lamet dectoid samet",
"subcats": {
"159787464bc887": {
"codurl": "maecenas",
"title": "Maecenas pulvinar",
"description": "orci non volutpat varius"
},
"159787472eb5e6": {
"codurl": "donecorci",
"title": "Donec hendrerit orci",
"description": ""
},
"15978748b89bca": {
"codurl": "massadictum",
"title": "Nullam eu massa dictum",
"description": ""
},
"159787495492f4": {
"codurl": "ultricies",
"title": "Etiam massa arcu",
"description": "Donec ultricies porttitor augue quis dictum."
}
}
}
}
}
},
methods: {
matches(obj) {
const term = this.searchQuery.toLowerCase();
return obj.title.toLowerCase().includes(term) || obj.description.toLowerCase().includes(term);
}
},
computed: {
listValues() {
return Object.values(this.itens.catsubcatsdata);
},
filteredList() {
if (!this.searchQuery) {
return this.listValues;
}
return this.listValues
.map((v) => {
if (this.matches(v)) {
return v;
}
const matchingSubcats = Object.values(v.subcats)
.filter((v) => this.matches(v));
if (matchingSubcats.length > 0) {
return Object.assign({}, v, {subcats: matchingSubcats});
}
})
.filter((v) => v);
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="v-for-sectors">
<input type="text" placeholder="Search" v-model="searchQuery">
<ul>
<li v-for="value in filteredList">
<b>{{ value.title }}</b><br>{{ value.description }}
<ul>
<li v-for="(vsub, keysub) in value.subcats"><a v-bind:href="'http://www.teste.com/'+vsub.codurl">{{ vsub.title }} - {{ vsub.description }}</a></li>
</ul>
</li>
</ul>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54775982
复制相关文章
相似问题
腾讯云开发者
