那些遇到过的问题

如何过滤具有多个整数条件和键值的 JSON 对象数组

Jac*_*ack 8 json filtering filter conditional-statements vue.js

我正在为 VueJS 中的交互式搜索过滤器苦苦挣扎（这是一个带有下拉菜单和范围 @ codepen 的应用程序）

一条船有BrandName、BrandYear、Price...我已经能够使用 过滤它们selected = {...}，但我想知道如何最好地利用if-statement下面的内容，以确定价格并检查最小值/最大值并通过传递返回结果expected_selected = {...}

我正在寻找有关如何与以下代码一起过滤最小值/最大值的解释/帮助。

目标是输入最小值和最大值以及一个或多个匹配的键值

var boats = [{
  Price: 599900,
  BrandName: "FLIPPER",
  BoatYear: 2020,
}, {
  Price: 97e3,
  BrandName: "MICORE",
  BoatYear: 2020,
}, {
  Price: 189300,
  BrandName: "LINDER",
  BoatYear: 2020,
}, {
  Price: 396900,
  BrandName: null,
  BoatYear: 2020,
}, {
  Price: 334900,
  BrandName: "MICORE",
  BoatYear: 2019,
}, {
  Price: 138700,
  BrandName: "HR",
  BoatYear: 2020,
}, {
  Price: 178900,
  BrandName: "HR",
  BoatYear: 2020,
}, {
  Price: 348900,
  BrandName: "HR",
  BoatYear: 2020,
}, {
  Price: 285800,
  BrandName: "HR",
  BoatYear: 2020,
}, {
  Price: 186900,
  BrandName: "MICORE",
  BoatYear: 2019,
}, {
  Price: 276800,
  BrandName: "MICORE",
  BoatYear: 2020,
}, {
  Price: 518900,
  BrandName: "SILVER",
  BoatYear: 2020,
}, {
  Price: 226900,
  BrandName: "MICORE",
  BoatYear: 2020,
}, {
  Price: 132600,
  BrandName: "LINDER",
  BoatYear: 2020,
}, {
  Price: 137200,
  BrandName: "LINDER",
  BoatYear: 2020,
}, {
  Price: 366900,
  BrandName: "SILVER",
  BoatYear: 2020,
}, {
  Price: 365900,
  BrandName: "SILVER",
  BoatYear: 2020,
}, {
  Price: 247900,
  BrandName: "SILVER",
  BoatYear: 2020,
}];


var selected = {
  BoatYear: 2020,
  BrandName: "LINDER"
};

var expected_selected = {
  BoatYear: 2020,
  BrandName: 'LINDER',
  Price: [0, 138000] // min , max 
}

boats = boats.filter(function(item) {
  for (var key in selected) {
    if (item[key] === undefined || item[key] != selected[key]) return false;
  }
  return true;
});

console.log(`Results: ${JSON.stringify(boats)}`);
Run Code Online (Sandbox Code Playgroud)

x00*_*x00 5

  1. 最简单的解决方案：只需对所有字段进行硬编码

let boats = [
  {Price: 599900, BrandName: "FLIPPER", BoatYear: 2020},
  {Price: 97e3  , BrandName: "MICORE" , BoatYear: 2020},
  {Price: 189300, BrandName: "LINDER" , BoatYear: 2020},
  {Price: 396900, BrandName: null     , BoatYear: 2020},
  {Price: 334900, BrandName: "MICORE" , BoatYear: 2019},
  {Price: 138700, BrandName: "HR"     , BoatYear: 2020},
  {Price: 178900, BrandName: "HR"     , BoatYear: 2020},
  {Price: 348900, BrandName: "HR"     , BoatYear: 2020},
  {Price: 285800, BrandName: "HR"     , BoatYear: 2020},
  {Price: 186900, BrandName: "MICORE" , BoatYear: 2019},
  {Price: 276800, BrandName: "MICORE" , BoatYear: 2020},
  {Price: 518900, BrandName: "SILVER" , BoatYear: 2020},
  {Price: 226900, BrandName: "MICORE" , BoatYear: 2020},
  {Price: 132600, BrandName: "LINDER" , BoatYear: 2020},
  {Price: 137200, BrandName: "LINDER" , BoatYear: 2020},
  {Price: 366900, BrandName: "SILVER" , BoatYear: 2020},
  {Price: 365900, BrandName: "SILVER" , BoatYear: 2020},
  {Price: 247900, BrandName: "SILVER" , BoatYear: 2020}
];

const expected_selected = {
  BoatYear : 2020,
  BrandName: 'LINDER',
  Price    : { min: 0, max: 138000 },
}
const filter_by = filters => item => {
  if (item.BoatYear === undefined || item.BoatYear !== filters.BoatYear ) return false
  if (item.BrandName === undefined || item.BrandName !== filters.BrandName ) return false
  if (item.Price < filters.Price.min || item.Price > filters.Price.max) return false
  return true
}
boats = boats.filter(filter_by(expected_selected))

console.log(`Results: ${JSON.stringify(boats)}`);
Run Code Online (Sandbox Code Playgroud)

  1. 或者在任何地方使用 min/max

let boats = [
  {Price: 599900, BrandName: "FLIPPER", BoatYear: 2020},
  {Price: 97e3  , BrandName: "MICORE" , BoatYear: 2020},
  {Price: 189300, BrandName: "LINDER" , BoatYear: 2020},
  {Price: 396900, BrandName: null     , BoatYear: 2020},
  {Price: 334900, BrandName: "MICORE" , BoatYear: 2019},
  {Price: 138700, BrandName: "HR"     , BoatYear: 2020},
  {Price: 178900, BrandName: "HR"     , BoatYear: 2020},
  {Price: 348900, BrandName: "HR"     , BoatYear: 2020},
  {Price: 285800, BrandName: "HR"     , BoatYear: 2020},
  {Price: 186900, BrandName: "MICORE" , BoatYear: 2019},
  {Price: 276800, BrandName: "MICORE" , BoatYear: 2020},
  {Price: 518900, BrandName: "SILVER" , BoatYear: 2020},
  {Price: 226900, BrandName: "MICORE" , BoatYear: 2020},
  {Price: 132600, BrandName: "LINDER" , BoatYear: 2020},
  {Price: 137200, BrandName: "LINDER" , BoatYear: 2020},
  {Price: 366900, BrandName: "SILVER" , BoatYear: 2020},
  {Price: 365900, BrandName: "SILVER" , BoatYear: 2020},
  {Price: 247900, BrandName: "SILVER" , BoatYear: 2020},
]

const expected_selected = {
  BoatYear : { min: 2020    , max: 2020     },
  BrandName: { min: 'LINDER', max: 'LINDER' },
  Price    : { min: 0       , max: 138000   },
}
const filter_by = filters => item => {
  for (var key in filters) {
    if (item[key] === undefined) return false
    if (item[key] < filters[key].min || item[key] > filters[key].max) return false
  }
  return true
}
boats = boats.filter(filter_by(expected_selected))

console.log(`Results: ${JSON.stringify(boats)}`);
Run Code Online (Sandbox Code Playgroud)

  1. 或者检查selected字段的类型（在这种情况下Array.isArray，{min,max}如果是instanceof）

let boats = [
  {Price: 599900, BrandName: "FLIPPER", BoatYear: 2020},
  {Price: 97e3  , BrandName: "MICORE" , BoatYear: 2020},
  {Price: 189300, BrandName: "LINDER" , BoatYear: 2020},
  {Price: 396900, BrandName: null     , BoatYear: 2020},
  {Price: 334900, BrandName: "MICORE" , BoatYear: 2019},
  {Price: 138700, BrandName: "HR"     , BoatYear: 2020},
  {Price: 178900, BrandName: "HR"     , BoatYear: 2020},
  {Price: 348900, BrandName: "HR"     , BoatYear: 2020},
  {Price: 285800, BrandName: "HR"     , BoatYear: 2020},
  {Price: 186900, BrandName: "MICORE" , BoatYear: 2019},
  {Price: 276800, BrandName: "MICORE" , BoatYear: 2020},
  {Price: 518900, BrandName: "SILVER" , BoatYear: 2020},
  {Price: 226900, BrandName: "MICORE" , BoatYear: 2020},
  {Price: 132600, BrandName: "LINDER" , BoatYear: 2020},
  {Price: 137200, BrandName: "LINDER" , BoatYear: 2020},
  {Price: 366900, BrandName: "SILVER" , BoatYear: 2020},
  {Price: 365900, BrandName: "SILVER" , BoatYear: 2020},
  {Price: 247900, BrandName: "SILVER" , BoatYear: 2020},
]

const expected_selected = {
  BoatYear : 2020,
  BrandName: 'LINDER',
  Price    : [ 0, 138000 ],
}
const filter_by = filters => item => {
  for (var key in filters) {
    if (item[key] === undefined) return false
    if (Array.isArray(filters[key])) {
      if(item[key] < filters[key][0] || item[key] > filters[key][1]) return false
    } else if (item[key] !== filters[key]) return false
  }
  return true
}
boats = boats.filter(filter_by(expected_selected))

console.log(`Results: ${JSON.stringify(boats)}`);
Run Code Online (Sandbox Code Playgroud)

  1. 或者更好的是，使用 OOP

let boats = [
  {Price: 599900, BrandName: "FLIPPER", BoatYear: 2020},
  {Price: 97e3  , BrandName: "MICORE" , BoatYear: 2020},
  {Price: 189300, BrandName: "LINDER" , BoatYear: 2020},
  {Price: 396900, BrandName: null     , BoatYear: 2020},
  {Price: 334900, BrandName: "MICORE" , BoatYear: 2019},
  {Price: 138700, BrandName: "HR"     , BoatYear: 2020},
  {Price: 178900, BrandName: "HR"     , BoatYear: 2020},
  {Price: 348900, BrandName: "HR"     , BoatYear: 2020},
  {Price: 285800, BrandName: "HR"     , BoatYear: 2020},
  {Price: 186900, BrandName: "MICORE" , BoatYear: 2019},
  {Price: 276800, BrandName: "MICORE" , BoatYear: 2020},
  {Price: 518900, BrandName: "SILVER" , BoatYear: 2020},
  {Price: 226900, BrandName: "MICORE" , BoatYear: 2020},
  {Price: 132600, BrandName: "LINDER" , BoatYear: 2020},
  {Price: 137200, BrandName: "LINDER" , BoatYear: 2020},
  {Price: 366900, BrandName: "SILVER" , BoatYear: 2020},
  {Price: 365900, BrandName: "SILVER" , BoatYear: 2020},
  {Price: 247900, BrandName: "SILVER" , BoatYear: 2020},
]

class MinMax {
  constructor(min, max) { this.min = min, this.max = max }
  check(val) { return val >= this.min && val <= this.max }
}
class Eq {
  constructor(val) { this.val = val }
  check(val) { return val === this.val }
}
var expected_selected = {
  BoatYear : new Eq(2020),
  BrandName: new Eq('LINDER'),
  Price    : new MinMax(0, 138000)
}
const filter_by = filters => item => {
  for (var key in filters) {
    if (item[key] === undefined) return false
    if (filters[key].check(item[key]) === false) return false
  }
  return true
}
boats = boats.filter(filter_by(expected_selected))

console.log(`Results: ${JSON.stringify(boats)}`);
Run Code Online (Sandbox Code Playgroud)

通过这种方式，您可以通过添加新类而不更改filter_by功能来扩展过滤器。

归档时间：

查看次数：

380 次

最近记录：

6 年，4 月 前
相关归档
Javascript:使用Ajax发送JSON对象？ 139
有没有可能让JSON.stringify保留函数？ 23
IE文本渲染渐变 10
反序列化为double时,JsonConvert会抛出一个"非有效整数"异常 8
REST / HATEOAS-HAL链接中的可用方法 8
Vue CLI和Vuetify如何与本地Roboto字体一起使用 7
检测叶子中的静脉图案？ 6
在 JPQL Query 中设置可选参数 6
类型错误：fs.existsSync 不是函数（Vue/Electron） 5
如何检测用户何时滚动到 div 的底部 - Vue 2
难疑归档
浮点数学是否破碎？ 2798
如何删除GitHub上的提交？ 1619
PHP中的startsWith()和endsWith()函数 1409
我在哪里将'assets'文件夹放在Android Studio中？ 1366
如何遍历C#中的所有枚举值？ 1359
Android中的gravity和layout_gravity有什么区别？ 1286
从字典中删除元素 1243
为特定提交生成git补丁 1144
如何在div中垂直对齐文本？ 1102
让Chrome接受自签名的localhost证书 1080