如何循环遍历对象数组，并使用lodash检查一个值是否与对象中的字符串或项数组中的值匹配
How to loop through array of objects and check if a value matches either a string in the object or a value in an array of items using lodash
我有一个对象数组，看起来像这样:
[{
"title": "first footer",
"section": "structure",
"categoryId": "footer",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wobble"],
"uId": "footerA"
},{
"title": "second footer",
"section": "structure",
"categoryId": "footer",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wibble"],
"uId": "footerB"
},
{
"title": "first header",
"section": "structure",
"categoryId": "header",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wibble"],
"uId": "headerA"
},
{
"title": "second header",
"section": "structure",
"categoryId": "header",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wibble"],
"uId": "headerB"
},
{
"title": "first landing",
"section": "structure",
"categoryId": "landing",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wibble"],
"uId": "landingA"
},
{
"title": "second landing",
"section": "structure",
"categoryId": "landing",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wibble"],
"uId": "landingB"
},
{
"title": "third landing",
"section": "structure",
"categoryId": "landing",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wibble"],
"uId": "landingC"
},
{
"title": "first nav",
"section": "structure",
"categoryId": "navigation",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wobble"],
"uId": "navA"
},{
"title": "first blog",
"section": "components",
"categoryId": "blog",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wibble"],
"uId": "blogA"
},
{
"title": "second blog sdf wicked",
"section": "components",
"categoryId": "blog",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wibble"],
"uId": "blogB"
},
{
"title": "first header",
"section": "components",
"categoryId": "contact_button",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wibble"],
"uId": "contact_buttonA"
},
{
"title": "first landing",
"section": "components",
"categoryId": "content_bloc",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wibble"],
"uId": "content_blocA"
},
{
"title": "second landing",
"section": "components",
"categoryId": "content_bloc",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wibble"],
"uId": "content_blocB"
},
{
"title": "third landing",
"section": "components",
"categoryId": "content_bloc",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wibble"],
"uId": "content_blocC"
},
{
"title": "first nav",
"section": "components",
"categoryId": "cover",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wibble"],
"uId": "coverA"
}]
当我点击一个按钮时，我希望能够过滤数组中的对象，只返回有人搜索过的匹配对象。例如，如果有人输入了"land"，该函数应该检查"land"是否存在于组件的标题中，或者是否存在于该组件的hashtags数组中。
我正在使用lodash来做这个，所以我想继续使用它。
我已经能够对标题进行测试，但在查看循环中的单个组件时，如何通过hashtags数组进行循环。
这是我到目前为止的代码:
_.filter(this.components, function (component) {
//Check if components title has 'wic' in the text or if 'wic' exists in the hashtags array
if(_.includes(component.title, 'wic')) {
console.log(component);
}
});
从Array.prototype.filter()返回Boolean。您可以使用Array.prototype.some()(也需要Boolean返回值)来检查hashtags数组。
var match = "land";
var re = new RegExp(match);
var res = this.components.filter(function(component) {
return re.test(component.title)
|| component.hashtags.some(function(tag) {
return re.test(tag)
})
});
使用lodash _.filter(), _.some()
var match = "land";
var re = new RegExp(match);
var res = _.filter(this.components, function(component) {
console.log(component.title, re.test(component.title) )
return re.test(component.title)
|| _.some(component.hashtags, function(tag) {
return re.test(tag)
})
});
jsfiddle https://jsfiddle.net/o8ervt0x/
它将给出标题中包含land word的对象
savedViews= [{
"title": "first footer",
"section": "structure",
"categoryId": "footer",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wobble"],
"uId": "footerA"
},{
"title": "second footer",
"section": "structure",
"categoryId": "footer",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wibble"],
"uId": "footerB"
},
{
"title": "first header",
"section": "structure",
"categoryId": "header",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wibble"],
"uId": "headerA"
},
{
"title": "second header",
"section": "structure",
"categoryId": "header",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wibble"],
"uId": "headerB"
},
{
"title": "first landing",
"section": "structure",
"categoryId": "landing",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wibble"],
"uId": "landingA"
},
{
"title": "second landing",
"section": "structure",
"categoryId": "landing",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wibble"],
"uId": "landingB"
},
{
"title": "third landing",
"section": "structure",
"categoryId": "landing",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wibble"],
"uId": "landingC"
},
{
"title": "first nav",
"section": "structure",
"categoryId": "navigation",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wobble"],
"uId": "navA"
},{
"title": "first blog",
"section": "components",
"categoryId": "blog",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wibble"],
"uId": "blogA"
},
{
"title": "second blog sdf wicked",
"section": "components",
"categoryId": "blog",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wibble"],
"uId": "blogB"
},
{
"title": "first header",
"section": "components",
"categoryId": "contact_button",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wibble"],
"uId": "contact_buttonA"
},
{
"title": "first landing",
"section": "components",
"categoryId": "content_bloc",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wibble"],
"uId": "content_blocA"
},
{
"title": "second landing",
"section": "components",
"categoryId": "content_bloc",
"image": "http://placehold.it/350x220",
"hashtags": ["#popin", "#wibble"],
"uId": "content_blocB"
},
{
"title": "third landing",
"section": "components",
"categoryId": "content_bloc",
"image": "http://placehold.it/350x220",
"hashtags": ["#popn", "#wibble"],
"uId": "content_blocC"
},
{
"title": "first nav",
"section": "components",
"categoryId": "cover",
"image": "http://placehold.it/350x220",
"hashtags": ["#popn", "#wibble"],
"uId": "coverA"
}]
var view = 'land';
var re = new RegExp(view);
var delete_id = savedViews.filter(function (el) {
return re.test(el.title);
});
//console.log(delete_id);
var view1 = 'popin';
var re1 = new RegExp(view1);
var delete_id1 = delete_id.filter(function (el) {
return re1.test(el.hashtags);
});
console.log(delete_id1);相关文章：
- 将数组对象传递到struts2中的操作类
- 如何使用jquery返回php-json数组对象
- 从其名称获取javascript数组对象
- 值未与数组对象绑定
- 如何按数组/对象值的倍数过滤对象数组
- 在表中显示数组对象
- 在数组对象中分组
- 将第二个或多个数组推送到数组对象 AngularJS 中
- 重新排列 JavaScript 数组/对象
- 键上的javascript数组对象过滤器
- handontable:在不更改数据数组/对象的情况下隐藏某些列
- 用于跟踪购物车可用性的Javascript数组/对象/哈希表
- 重建有角度的java脚本数组对象
- 对JSON数组对象进行排序
- 连接与数组对象相关的文本:方式和位置
- 哪些浏览器和版本支持将常见的类数组对象直接传递到fn.apply(）
- 如何使用Handlebars循环数组对象和模板
- 是否可以引用JS数组/对象中的另一个元素
- Javascript中的名称索引-数组/对象
- 数组长度不等于数组对象
