首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用vue.js对多维json对象进行搜索过滤

如何使用vue.js对多维json对象进行搜索过滤
EN

Stack Overflow用户
提问于 2019-02-20 06:34:45
回答 1查看 1.1K关注 0票数 2

我在json中有一个这样的结构(我不能改变这个json中的数据):

代码语言:javascript
复制
    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"}
                        }}
                }}

我有以下代码:

代码语言:javascript
复制
<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>

我希望在搜索中输入有关类别的标题或描述的内容时,会显示如下内容:

(这已经起作用了。)

但是,当单词来自子类别的标题或描述时,它应该显示:

(这不起作用。)

有没有人能帮我解决这个问题?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-02-20 10:16:53

据我所知,你想要过滤你的搜索词,包括在顶层匹配titledescription的所有条目,或者包括顶层,并且如果匹配在子层而不在顶层,则包括顶层和仅匹配的子层。

因此,首先我创建了一个方法matches,这样代码就不会变得杂乱。然后我进行了一次计算,以列表的形式返回感兴趣的值。然后我做了一个计算,根据上面的标准过滤这些值,当匹配的地方是匹配的子猫时,构造一个只有匹配子猫的新对象。

代码语言:javascript
复制
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);
    }
  }
});
代码语言:javascript
复制
<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>

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54775982

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档