Struggling with diving deep into the third level of an API's JSON structure, I initially attempted to use a certain method without success. Encouraged to explore the Loadash library, I integrated it into my code but encountered issues. Seeking assistance to identify what's causing the problem.
Edit
In an effort to provide more clarity on my requirements, I have included HTML code below as previous responses have not met my expectations.
<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"
]
}
]
}
]
Utilizing vuejs for search functionality:
//...
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());
}
}
}
//..