Как отфильтровать несколько JSON с несколькими целочисленными условиями и значениями ключа - PullRequest
Новая
       45

Как отфильтровать несколько JSON с несколькими целочисленными условиями и значениями ключа

7 голосов
/ 29 апреля 2020

Я борюсь с интерактивным поисковым фильтром в VueJS ( Это приложение с выпадающими списками и диапазонами @ codepen )

Лодка имеет BrandName, BrandYear, Цена ... , которую я смог отфильтровать с помощью 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)}`);

Ответы [ 4 ]

5 голосов
/ 02 мая 2020

Проверка объектов с использованием ключевых массивов имеет смысл, когда у нас есть много свойств для проверки. В вашем случае у вас есть 4 свойства, которые нужно проверить по равенству, и 3 свойства, которые нужно проверить по диапазону, поэтому, если вы хотите «Не повторять себя» , вы можете сделать это используя массивы ключей, как в вашем примере и в вашем проекте.

Вы можете создать массив ключей для каждого типа, который вы хотите проверить, а затем проверить все эти условия внутри одного фильтра, проходящего через все ключи. В этом примере у вас будет массив с ключами для значений, которые должны проверяться равенством, и один массив с ключами для значений, которые должны проверяться целочисленным диапазоном min / max: 

let boats = [
  {Price:599900, BrandName:"FLIPPER", BoatYear:2020},
  {Price:97000, 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}
];

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

// Keys that need to be checked by equality
const equals = ['BrandName', 'BoatYear', /* 'MotoBoatType', 'EngineModel' */];

// Keys that need to be checked by range
const ranges = ['Price', /* 'Width', 'Length' */]

boats = boats.filter((item) => {
  // First check the equality keys
  for (const field of equals)
    if (expected[field] && item[field] !== expected[field]) return false;
  
  // Then check the range keys
  for (const field of ranges)
    if (item[field] < expected[field][0] || item[field] > expected[field][1]) return false;

  return true;
});

console.log(`Results: ${boats.length}`, 
  boats.map(({ Price, BrandName, BoatYear }) => `${BrandName} (${BoatYear}) : ${Price}`)
);

Вы можете даже сделать код фильтра всего двумя строками, используя Array.prototype.every() для проверки ключей массива: 

let boats = [
  {Price:599900, BrandName:"FLIPPER", BoatYear:2020},
  {Price:97000, 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}
];

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

const equals = ['BrandName', 'BoatYear', /* 'MotoBoatType', 'EngineModel' */];
const ranges = ['Price', /* 'Width', 'Length' */]

boats = boats.filter((item) => 
  equals.every(field => !expected[field] || item[field] === expected[field]) &&
  ranges.every(field => item[field] >= expected[field][0] && item[field] <= expected[field][1])
);

console.log(`Results: ${boats.length}`, 
  boats.map(({ Price, BrandName, BoatYear }) => `${BrandName} (${BoatYear}) : ${Price}`)
);

Вы можете проверить эту работу на fork , который я сделал из вашего демонстрационного проекта на Codepen . У него тот же метод, и он применяет проверку ко всем клавишам диапазона Price, Width и Length.

5 голосов
/ 01 мая 2020
  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)}`);
Или используйте мин / макс везде 

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)}`);
Или проверьте тип поля 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)}`);
Или еще лучше, используйте 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)}`);

Таким образом, вы можете расширить свои фильтры, добавив новые классы без изменения функции filter_by.

2 голосов
/ 08 мая 2020

Возможно, у вас уже есть решение, но просто чтобы обдумать это, я отправляю этот ответ. Я создал обобщенную c функцию, которая будет принимать объект (объект фильтра), который может иметь значения с примитивами, или объект или массив. Надеюсь, это поможет 

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}
];

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

var expected_selected_2 = {
  BoatYear: 2020,
  BrandName: 'LINDER',
  Price: {min:0, max:138000} 
}

var expected_selected_3 = {
  BoatYear: 2020,
  BrandName: 'LINDER',
  Price: 137200
}

const filter_by = (filter) => item => {
for(let key in filter) {
  if(filter.hasOwnProperty(key)){
      if(Array.isArray(filter[key])) {
        if(!item[key] || item[key] < filter[key][0] || item[key] > filter[key][1]) return false;
      }
      else if(typeof filter[key] === "object") {
        if(!item[key] || item[key] < filter[key]["min"] || item[key] > filter[key]["max"]) return false;
      }
      else {
        if(!item[key] || item[key] !== filter[key]) return false;
      }
    } else {
      return false
    }
  }
  return true
}

const results = boats.filter(filter_by(expected_selected))
console.log(`Results: ${JSON.stringify(results, null, 2)}`);

const results_2 = boats.filter(filter_by(expected_selected_2))
console.log(`Results_2: ${JSON.stringify(results_2, null, 2)}`);

const results_3 = boats.filter(filter_by(expected_selected_3))
console.log(`Results_3: ${JSON.stringify(results_3, null, 2)}`);
1 голос
/ 08 мая 2020

у вас может быть метод "matcher" для каждого поля, например: 

// ...

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

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

var matchers = {
  BoatYear: (value, input) => value == input,
  BrandName: (value, input) => value == input,
  Price: (value, [min, max]) => value >= min && value <= max,
};

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

Таким образом, очень легко добавить другой тип фильтра, вы даже можете объявить их один раз и использовать их повторно, если они ' повторяю: 

var eqMatcher = (value, input) => value == input;
var rangeMatcher = (value, [min, max]) => value >= min && value <= max;

var matchers = {
  BoatYear: eqMatcher,
  BrandName: eqMatcher,
  Price: rangeMatcher,
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...