Javascript 如何使用vue.js对多维json对象执行搜索筛选

我的json结构是这样的（我无法更改此json中的数据）：

我有以下代码：

{{value.title}}
{{{value.description}}





新Vue({
el:“#v代表扇区”，
数据：{
searchQuery:“”，
itens:{“catsubcatsdata:{“15978738e6cd1e:{“标题”：“测试1”，“描述”：“blablabla”，“子类别”：{“1597873b1653d9:{“codurl:”t01url”，“标题”：“测试子类别1”，“描述”：“}”，1597873bd76c80:{“codurl:”t01url2”，“标题”：“测试子类别2”，“描述”：“}”，1597873c9d4a81:{“codurl:”t01url3”，“标题”：“测试子类别3”，“描述”：“Blablablablabla 01}，“15978745b32c1b:{“标题”：“Loren Ipsun”，“描述”：“lamet dectoid samet”，“subcats:{”159787464bc887:{“codurl”：“maecenas”，“title”：“maecenas pulvinar”，“description”：“orci non volatic varius”}，“159787472eb5e6:{“codurl”：“donecorci”，“title”：“Donec hendrerit orci”，“description”：“15978748Bcca”：“codurl”：“massadictum”，“title”：”“描述”：“}”，159787495492f4:{“codurl”：“ultricies”，“title”：“Etiam massa arcu”，“description”：“Donec ultricies porttitor augue quis dictum.”
},
计算：{
filteredList:函数（）{
var filterKey=this.searchQuery&&this.searchQuery.toLowerCase（）
var data=this.itens.catsubcatsdata
var dataarray=Object.keys（数据）
如果（！filterKey）{返回数据；}
返回数据数组
.过滤器（功能（键）{
var行=数据[键]；
返回Object.keys（行）
.一些（功能（键）{
返回字符串（行[键]）
.toLowerCase（）
.indexOf（filterKey）>-1；
})
})
.减少（功能（附件、钥匙）{
acc[键]=数据[键]；
返回acc；
}, {})
}
}
});

据我所知，您希望按搜索词进行筛选，包括顶级中匹配的

标题

或

说明

的全部条目，或者如果匹配在子级别而不是顶级，则包括顶级和仅匹配的子级别

首先，我制作了一个方法

匹配
，这样代码就不会凌乱。
然后我做了一个计算，将感兴趣的值作为列表返回。
然后我做了一个计算，根据上面的标准过滤这些值，在匹配的地方构建一个只包含匹配子类别的新对象


newvue({
el:“#v代表扇区”，
数据：{
searchQuery:“”，
itens：{
“catsubcatsdata”：{
“15978738e6cd1e”：{
“标题”：“测试1”，
“描述”：“布拉布拉”，
“子类别”：{
“1597873b1653d9”：{
“codurl”：“t01url”，
“标题”：“测试子项1”，
“说明”：”
},
“1597873bd76c80”：{
“codurl”：“t01url2”，
“标题”：“测试子二”，
“说明”：”
},
“1597873c9d4a81”：{
“codurl”：“t01url3”，
“标题”：“测试子3”，
“说明”：“blabla 01”
}
}
},
“15978745b32c1b”：{
“标题”：“Loren Ipsun”，
“描述”：“lamet dectoid samet”，
“子类别”：{
“159787464bc887”：{
“codurl”：“maecenas”，
“头衔”：“Maecenas pulvinar”，
“描述”：“orci non-varius”
},
“159787472eb5e6”：{
“codurl”：“donecorci”，
“头衔”：“Donec hendrerit orci”，
“说明”：”
},
“15978748b89bca”：{
“codurl”：“massadictum”，
“标题”：“无需遵守欧盟法规”，
“说明”：”
},
“159787495492f4”：{
“codurl”：“ultricies”，
“标题”：“Etiam massa arcu”，
“描述”：“Donec ultricies porttitor augue Qus dictum。”
}
}
}
}
}
},
方法：{
匹配（obj）{
const term=this.searchQuery.toLowerCase（）；
返回obj.title.toLowerCase（）.includes（term）| | obj.description.toLowerCase（）.includes（term）；
}
},
计算：{
listValues（）{
返回Object.values（this.itens.catsubcatsdata）；
},
过滤器列表（）{
如果（！this.searchQuery）{
返回this.listValues；
}
返回此值。listValues
.map（（v）=>{
如果（本条与（v）相匹配）{
返回v；
}
const matchingSubcats=对象值（v.subcats）
.filter（（v）=>this.matches（v））；
如果（匹配Subcats.length>0）{
返回Object.assign（{}，v，{subcats:matchingSubcats}）；
}
})
.过滤器（（v）=>v）；
}
}
})；



{{value.title}}
{{{value.description}}





我注意到您所有的数据都包含在对象中而不是数组中。这会让您的生活很痛苦，因为数组操作函数（映射、筛选、减少）无法处理对象。@James是的，不幸的是，我无法更改json中接收到的数据。：（@James但如果它在数组中，您有什么想法吗​​怎么做？也许这能帮我了解​​如何转换为object。@James也许在PHP中，我可以处理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"}
                        }}
                }}