带有数组的Javascript过滤器

时间：2017-09-12 12:19:02

标签： javascript arrays filter

这是我的代码：

data = [
  {
    Company: "Company Name",
    Type: "MINING",
    Location: "Middle East"
  },
  {
    Company: "Company Name 2",
    Type: "DISTRIBUTION OUTLET",
    Location: "Europe"
  },
  ...
];
myfilter = [
  "REPROCESSING PLANT",
  "MINING",
  "PROCESSING PLANT/MINE",
  "DISTRIBUTION OUTLET"
];
var myresults = [];
results = data.filter(function(el) {
  if (myfilter.indexOf(el.Type) != -1 && myfilter.indexOf(el.Location) != -1) {
    return el;
  }
});

console.log(results);

（原文：https://jsfiddle.net/rpsb8buh/4/）

要求：

我有一个数据阵列，我想根据以下数组过滤器过滤它们，如果使用类型＆amp;＆amp;像

一样位置 
myfilter = ['REPROCESSING PLANT','MINING','PROCESSING PLANT/MINE','DISTRIBUTION OUTLET','Europe'];

但如果我在没有位置的情况下通过过滤器，则无法正常工作

myfilter = ['REPROCESSING PLANT','MINING','PROCESSING PLANT/MINE','DISTRIBUTION OUTLET'];

3 个答案:

答案 0 :(得分：3)

Updated fiddle

因为&&只返回两个条件都是真的。 更好地使用Array#includes()

<强>更新

你应该在过滤后验证数组的长度。然后它为空，你可以根据需要为type匹配数组分配数据数组或过滤器

var data = [ { "Company": "Company Name", "Address": "Lorem ipsum dolor sit amet quaeque eruditi", "Telphone": "9714 883 7571", "Email": "Gma@emirates.net.ae", "Website": "www.emirates.net.au", "MarkerColor": 'pink', "Type": "MINING", "Location": "Middle East", "latitude": 25.856407, "longitude": 17.247047 }, { "Company": "Company Name 2", "Address": "Lorem ipsum dolor sit amet, vel no congue quaeque eruditi", "Telphone": "", "Email": "Gma@emirates.net.ae", "Website": "", "MarkerColor": 'brown', "Type": "DISTRIBUTION OUTLET", "Location": "Europe", "latitude": 45.526054, "longitude": 3.892456 }, { "Company": "Company Name 3", "Address": "Lorem ipsum dolor sit amet, vel no congue quaeque eruditi", "Telphone": "22115 48558", "Email": "Gma@emirates.net.ae", "Website": "", "MarkerColor": 'yellow', "Type": "REPROCESSING PLANT", "Location": "Middle East", "latitude": 20.526054, "longitude": 1.892456 }, { "Company": "Company Name 4", "Address": "", "Telphone": "221 981 558", "Email": "Gma@emirates.net.ae", "Website": "", "MarkerColor": 'light-pink', "Type": "PROCESSING PLANT/MINE", "Location": "Europe", "latitude": 48.526054, "longitude": 26.892456 }, { "Company": "Company Name 5", "Address": "", "Telphone": "111 922 252", "Email": "Gma@emirates.net.ae", "Website": "www.example.com", "MarkerColor": 'yellow', "Type": "REPROCESSING PLANT", "Location": "Middle East", "latitude": 32.526054, "longitude": 36.892456 }, { "Company": "Company Name 6", "Address": "", "Telphone": "4361 922 252", "Email": "Gma@emirates.net.ae", "Website": "www.example.com", "MarkerColor": 'yellow', "Type": "REPROCESSING PLANT", "Location": "Americas", "latitude": -32.526054, "longitude": -66.892456 }, { "Company": "Company Name 7", "Address": "", "Telphone": "4361 332 111", "Email": "Gma@emirates.net.ae", "Website": "www.ssaww.com", "MarkerColor": 'brown', "Type": "DISTRIBUTION OUTLET", "Location": "Middle East", "latitude": -32.526054, "longitude": 26.892456 }, { "Company": "Company Name 8", "Address": "", "Telphone": "221 981 558", "Email": "Gma@emirates.net.ae", "Website": "", "MarkerColor": 'light-pink', "Type": "PROCESSING PLANT/MINE", "Location": "Asia Pacific", "latitude": 18.526054, "longitude": 76.892456 }, { "Company": "Company Name 9", "Address": "Lorem ipsum dolor sit amet quaeque eruditi", "Telphone": "9714 883 7571", "Email": "Gma@emirates.net.ae", "Website": "www.emirates.net.au", "MarkerColor": 'pink', "Type": "MINING", "Location": "Middle East", "latitude": -5.856407, "longitude": 20.247047 }, { "Company": "Company Name 10", "Address": "Lorem ipsum dolor sit amet quaeque eruditi", "Telphone": "", "Email": "Gma@emirates.net.ae", "Website": "www.emirates.net.au", "MarkerColor": 'brown', "Type": "DISTRIBUTION OUTLET", "Location": "Asia Pacific", "latitude": -25.856407, "longitude": 120.247047 }, { "Company": "Company Name 11", "Address": "Lorem ipsum dolor sit amet quaeque eruditi", "Telphone": "", "Email": "Gma@emirates.net.ae", "Website": "www.emirates.net.au", "MarkerColor": 'yellow', "Type": "REPROCESSING PLANT", "Location": "Americas", "latitude": 55.856407, "longitude": -120.247047 }, { "Company": "Company Name 12", "Address": "Lorem ipsum dolor sit amet quaeque eruditi", "Telphone": "", "Email": "Gma@emirates.net.ae", "Website": "", "MarkerColor": 'pink', "Type": "MINING", "Location": "Americas", "latitude": 25.856407, "longitude": -100.247047 }, { "Company": "Company Name 13", "Address": "Lorem ipsum dolor sit amet quaeque eruditi", "Telphone": "", "Email": "Gma@emirates.net.ae", "Website": "", "MarkerColor": 'pink', "Type": "MINING", "Location": "Asia Pacific", "latitude": 4.062187, "longitude": 101.496645 }, { "Company": "Company Name 14", "Address": "Lorem ipsum dolor sit amet quaeque eruditi", "Telphone": "2233 65448 21", "Email": "Gma@emirates.net.ae", "Website": "", "MarkerColor": 'yellow', "Type": "REPROCESSING PLANT", "Location": "Asia Pacific", "latitude": 22.556300, "longitude": 113.916657 }, { "Company": "Company Name 15", "Address": "Lorem ipsum dolor sit amet quaeque eruditi", "Telphone": "2233 65448 21", "Email": "Gma@emirates.net.ae", "Website": "www.example.com", "MarkerColor": 'light-pink', "Type": "PROCESSING PLANT/MINE", "Location": "Americas", "latitude": 25.826347, "longitude": -80.207989 }, { "Company": "Company Name 16", "Address": "Lorem ipsum dolor sit amet, vel no congue quaeque eruditi", "Telphone": "", "Email": "Gma@emirates.net.ae", "Website": "", "MarkerColor": 'yellow', "Type": "REPROCESSING PLANT", "Location": "Europe", "latitude": 39.526054, "longitude": -3.892456 } ];

var  myfilter = ['REPROCESSING PLANT','MINING','PROCESSING PLANT/MINE','DISTRIBUTION OUTLET','Europe'];
var myresults= [];
 var results = data.filter(function(el){	
             return myfilter.includes(el.Type) &&  myfilter.includes(el.Location)
    })
		
		if(results.length ==0 ){ //if array empty
		results = data.filter(function(el){	
             return myfilter.includes(el.Type);//set  all matched type
		})
		//or if you need all 
		//assign
		//results = data
		}

console.log(results)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

答案 1 :(得分：0)

这是您的过滤功能：

if (myfilter.indexOf(el.Type) != -1 && myfilter.indexOf(el.Location) != -1)

如果myFilter中存在类型和位置，则条件为真。 如果这不是你的目的，也许你可以使用这样的OR（||）：

if (myfilter.indexOf(el.Type) != -1 || myfilter.indexOf(el.Location) != -1)

这样，如果存在类型或位置（或两者），则条件为真。

答案 2 :(得分：0)

<强>更新

工作解决方案：Fiddle

使用： Array#Filter＆amp; Array#Some

示例：的

let data = [
{
        "Company": "Company Name",
        "Address": "Lorem ipsum dolor sit amet quaeque eruditi",
        "Telphone": "9714 883 7571",
        "Email": "Gma@emirates.net.ae",
        "Website": "www.emirates.net.au",
        "MarkerColor": 'pink',
        "Type": "MINING",
        "Location": "Middle East",
        "latitude": 25.856407,
        "longitude": 17.247047
    },
    {
        "Company": "Company Name 2",
        "Address": "Lorem ipsum dolor sit amet, vel no congue quaeque eruditi",
        "Telphone": "",
        "Email": "Gma@emirates.net.ae",
        "Website": "",
        "MarkerColor": 'brown',
        "Type": "DISTRIBUTION OUTLET",
        "Location": "Europe",
        "latitude": 45.526054,
        "longitude": 3.892456
    },
    {
        "Company": "Company Name 3",
        "Address": "Lorem ipsum dolor sit amet, vel no congue quaeque eruditi",
        "Telphone": "22115 48558",
        "Email": "Gma@emirates.net.ae",
        "Website": "",
        "MarkerColor": 'yellow',
        "Type": "REPROCESSING PLANT",
        "Location": "Middle East",
        "latitude": 20.526054,
        "longitude": 1.892456
    },
    {
        "Company": "Company Name 4",
        "Address": "",
        "Telphone": "221 981 558",
        "Email": "Gma@emirates.net.ae",
        "Website": "",
        "MarkerColor": 'light-pink',
        "Type": "PROCESSING PLANT/MINE",
        "Location": "Europe",
        "latitude": 48.526054,
        "longitude": 26.892456
    },
    {
        "Company": "Company Name 5",
        "Address": "",
        "Telphone": "111 922 252",
        "Email": "Gma@emirates.net.ae",
        "Website": "www.example.com",
        "MarkerColor": 'yellow',
        "Type": "REPROCESSING PLANT",
        "Location": "Middle East",
        "latitude": 32.526054,
        "longitude": 36.892456
    },
    {
        "Company": "Company Name 6",
        "Address": "",
        "Telphone": "4361 922 252",
        "Email": "Gma@emirates.net.ae",
        "Website": "www.example.com",
        "MarkerColor": 'yellow',
        "Type": "REPROCESSING PLANT",
        "Location": "Americas",
        "latitude": -32.526054,
        "longitude": -66.892456
    },
    {
        "Company": "Company Name 7",
        "Address": "",
        "Telphone": "4361 332 111",
        "Email": "Gma@emirates.net.ae",
        "Website": "www.ssaww.com",
        "MarkerColor": 'brown',
        "Type": "DISTRIBUTION OUTLET",
        "Location": "Middle East",
        "latitude": -32.526054,
        "longitude": 26.892456
    },
    {
        "Company": "Company Name 8",
        "Address": "",
        "Telphone": "221 981 558",
        "Email": "Gma@emirates.net.ae",
        "Website": "",
        "MarkerColor": 'light-pink',
        "Type": "PROCESSING PLANT/MINE",
        "Location": "Asia Pacific",
        "latitude": 18.526054,
        "longitude": 76.892456
    },
    {
        "Company": "Company Name 9",
        "Address": "Lorem ipsum dolor sit amet quaeque eruditi",
        "Telphone": "9714 883 7571",
        "Email": "Gma@emirates.net.ae",
        "Website": "www.emirates.net.au",
        "MarkerColor": 'pink',
        "Type": "MINING",
        "Location": "Middle East",
        "latitude": -5.856407,
        "longitude": 20.247047
    },
    {
        "Company": "Company Name 10",
        "Address": "Lorem ipsum dolor sit amet quaeque eruditi",
        "Telphone": "",
        "Email": "Gma@emirates.net.ae",
        "Website": "www.emirates.net.au",
        "MarkerColor": 'brown',
        "Type": "DISTRIBUTION OUTLET",
        "Location": "Asia Pacific",
        "latitude": -25.856407,
        "longitude": 120.247047
    },
    {
        "Company": "Company Name 11",
        "Address": "Lorem ipsum dolor sit amet quaeque eruditi",
        "Telphone": "",
        "Email": "Gma@emirates.net.ae",
        "Website": "www.emirates.net.au",
        "MarkerColor": 'yellow',
        "Type": "REPROCESSING PLANT",
        "Location": "Americas",
        "latitude": 55.856407,
        "longitude": -120.247047
    },
    {
        "Company": "Company Name 12",
        "Address": "Lorem ipsum dolor sit amet quaeque eruditi",
        "Telphone": "",
        "Email": "Gma@emirates.net.ae",
        "Website": "",
        "MarkerColor": 'pink',
        "Type": "MINING",
        "Location": "Americas",
        "latitude": 25.856407,
        "longitude": -100.247047
    },
    {
        "Company": "Company Name 13",
        "Address": "Lorem ipsum dolor sit amet quaeque eruditi",
        "Telphone": "",
        "Email": "Gma@emirates.net.ae",
        "Website": "",
        "MarkerColor": 'pink',
        "Type": "MINING",
        "Location": "Asia Pacific",
        "latitude": 4.062187,
        "longitude": 101.496645
    },
    {
        "Company": "Company Name 14",
        "Address": "Lorem ipsum dolor sit amet quaeque eruditi",
        "Telphone": "2233 65448 21",
        "Email": "Gma@emirates.net.ae",
        "Website": "",
        "MarkerColor": 'yellow',
        "Type": "REPROCESSING PLANT",
        "Location": "Asia Pacific",
        "latitude": 22.556300,
        "longitude": 113.916657
    },
    {
        "Company": "Company Name 15",
        "Address": "Lorem ipsum dolor sit amet quaeque eruditi",
        "Telphone": "2233 65448 21",
        "Email": "Gma@emirates.net.ae",
        "Website": "www.example.com",
        "MarkerColor": 'light-pink',
        "Type": "PROCESSING PLANT/MINE",
        "Location": "Americas",
        "latitude": 25.826347,
        "longitude": -80.207989
    },
    {
        "Company": "Company Name 16",
        "Address": "Lorem ipsum dolor sit amet, vel no congue quaeque eruditi",
        "Telphone": "",
        "Email": "Gma@emirates.net.ae",
        "Website": "",
        "MarkerColor": 'yellow',
        "Type": "REPROCESSING PLANT",
        "Location": "Europe",
        "latitude": 39.526054,
        "longitude": -3.892456
    }
];
// Solution when locations is provided:

const types = ['REPROCESSING PLANT','MINING','PROCESSING PLANT/MINE','DISTRIBUTION OUTLET'];
const locations = ['Europe']; // Just remove 'Europe' or add different location and test it!

let result = data.filter(d => types.some(t => d.Type === t) && locations.length > 0 ? locations.some(l => d.Location === l) : true);
console.log(result);

相关问题
最新问题