如何搜索嵌套级别的 JSON 数组

Question

我有一个具有 JSON 格式结构的 API，我需要更深入地搜索数组的第三级。我正在使用，但它不起作用，所以我要搜索一个库来做我需要有人告诉我去 Loadash 库，他说它将实现我正在寻找的东西。我在路上实现了 with 但没有工作，所以我需要知道我的代码有什么问题。

编辑

我更新了我的问题并添加了 HTML 代码来向您展示我需要什么，因为您的答案没有给我我所期望的。

<temlate>
  <div>
    <div class="col-lg-6">
         <input type="email"
                class="form-control-in"
                id="exampleInputEmail1"
                aria-describedby="emailHelp"
                placeholder="search"
                v-model="search">
     </div>

    <div class="page-output" v-for="(asset, i) in doFilter" :key="i">
         <target-body :asset="asset"
                :search_by="search_by"></target-body>
    </div>
  </div>
</template>

domainAssets = 
[
   {
      "id":122,
      "name":"Game",
      "web_technologies":[
         {
            "name":"RequireJS",
            "categories":[
               "JavaScript Frameworks"
            ]
         }
      ]
   },
   {
      "id":123,
      "name":"Game2",
      "web_technologies":[
         {
            "name":"Composer",
            "categories":[
               "PHP Frameworks"
            ]
         }
      ]
   }
]

我正在使用vuejs进行搜索：

//...
data(){
   return {
      search_by: 'web_technologies',
      search: 'PHP',
   }
},

computed: {
  ...mapState({
      domainAssets: state => state.Domain.domainAssets
  }),
  
  doFilter(){
    let self = this;
    return this.domainAssets.filter(function(domain){
      if(self.search_by == "web_technologies"){
         return _.includes(_.get(domain.web_technologies, self.search_by), self.search.toLowerCase());
      }
    }
  }
//..

Answer 1

可以使用标准数组方法来完成。查找其中一个 web_technologies 对象的类别包含目标字符串的对象...

let searchBy = 'web_technologies'

function findDataWithCategory(category, data) {
  return data.find(datum => {
    return datum[searchBy].some(wt => {
      let searchableCategories = wt.categories.map(c => c.toLowerCase())
      return searchableCategories.some(cat => cat.includes(category.toLowerCase()))
    })
  })
}

const data = [{
    "id": 122,
    "name": "Game",
    "web_technologies": [{
      "name": "RequireJS",
      "categories": [
        "JavaScript Frameworks"
      ]
    }]
  },
  {
    "id": 123,
    "name": "Game2",
    "web_technologies": [{
      "name": "Composer",
      "categories": [
        "PHP Frameworks"
      ]
    }]
  }
]

console.log(findDataWithCategory('pHp', data))

EDIT 已改进以允许不区分大小写的搜索。一种可能更好的方法（留给读者）是在收到数据时提前向数据添加一个 searchableCategories 属性，只需一次。再次编辑以检查子字符串并具有变量“searchBy”键。

Answer 2

您可以使用 lodash，但您的参数不正确。首先对于_.get，您应该只给出根元素，然后给出子元素的路径。接下来，因为您正在寻找项目的一部分，我将使用 join 将列表转换为字符串。最后添加一个||，以便您检查正常情况，您正在搜索'PHP'.toLowerCase()，即使在字符串中也不起作用

return domainAssets.filter(function(domain){
  if((self.search_by == "web_technologies"){
     return _.includes(_.get(domain, 'web_technologies[0].categories').join(), search.toLowerCase()) || _.includes(_.get(domain, 'web_technologies[0].categories').join(), search);
  }
})