Сортировать массив строк по символам и возвращать все совпадающие элементы

Question

У меня есть массив объектов

var carList = [
    {
        car: "maruti",
        colors: ["red", "redish","yellow"]
    },
    {
        car: "ferrari",
        colors: ["purple", "red"]
    },
    {
        car: "Merc",
        colors: ["pink", "green"]
    }
];

Теперь у меня есть поле поиска, в котором пользователь может ввести цвет автомобиля. поэтому, если пользователь вводит красный, должны быть возвращены только объекты maruti и ferrari. и если пользователь вводит reddi sh, то должен быть возвращен только объект maruti.

Я пробовал использовать вложенный фильтр

var textToSearch = "re";  
var test = carList.filter((x) => x.colors.filter((y)=> y.indexOf("textToSearch") > -1) );

Даже если строка поиска состоит всего из 2 символов, например " re ", тогда он также должен возвращать maruti и ferrari в качестве вывода.

но это возвращает все объекты, а не только maruti и ferrari

Примечание : я хочу, чтобы он возвращал все совпадающие элементы, а не только первый совпадающий элемент.

Answer 1

var carList = [
    {
        car: "maruti",
        colors: ["red", "redish","yellow"]
    },
    {
        car: "ferrari",
        colors: ["purple", "red"]
    },
    {
        car: "Merc",
        colors: ["pink", "green"]
    }
];
var m = carList.filter((eachCar) => { 
    var colors = eachCar.colors;
    return colors.filter((eachColor) => {
           return eachColor.indexOf('in') !== -1
    }).length > 0;
});
                            
console.log(m);

Answer 2

Думаю, это поздний ответ. Но вы можете следовать моему решению regex.

Здесь я использую метод RegExp.prototype.test () с помощью Array .prototype.some () и Array.prototype.filter () .

var carList = [{car: "maruti", colors: ["red", "redish","yellow"]}, {car: "ferrari", colors: ["purple", "red"]}, {car: "Merc", colors: ["pink", "green"]}];


const searchByColor = (list, keyword) => {
    // If you want the keyword must match from the beginning
    // const regex = new RegExp(`^${keyword}`, 'ig');
	
    // If you want the keyword matches anywhere of the string
    const regex = new RegExp(keyword, 'ig');
    return list.filter(({colors}) => colors.some(color => regex.test(color)));
}


console.log('For keyword "re":', searchByColor(carList, 're'));
console.log('For keyword "redish":', searchByColor(carList, 'redish'));

.as-console-wrapper {min-height: 100%!important; top: 0;}

Примечание: обратите внимание, что цвет с именем green также имеет подстроку re. Хорошо получить как можно больше релевантных результатов поиска.

Но если вы не хотите сопоставлять какую-либо строку, используйте подход с использованием первого регулярного выражения с комментариями. То есть используйте regex как:

const regex = new RegExp(`^${keyword}`, 'ig');

Answer 3

Две проблемы:

1. Функция filter всегда возвращает массив, который является истинным значением.
2. У вас есть опечатка в переменной textToSearch, заключенной в двойные кавычки.

Я рекомендую вам вместо этого использовать функцию some вместе с функцией includes.

let carList = [{    car: "maruti",    colors: ["red", "redish","yellow"]},{    car: "ferrari",    colors: ["purple", "red"]},{    car: "Merc",    colors: ["pink", "green"]}],
    textToSearch = "ed",
    fieldName = "colors",
    test = carList.filter((c) => c[fieldName].some(c => c.includes(textToSearch)));
    
console.log(test)

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 4

Используйте includes() в сочетании с some() внутри filter(), чтобы проверить, существует ли textToSearch в массиве colors:

var textToSearch = "r";
var test = carList.filter(x => x.colors.some(cl => cl.includes(textToSearch)));
console.log(test);

var carList = [{
    car: "maruti",
    colors: ["red", "redish", "yellow"]
  },
  {
    car: "ferrari",
    colors: ["purple", "red"]
  },
  {
    car: "Merc",
    colors: ["pink", "green"]
  }
];

var textToSearch = "re";
var test = carList.filter(x => x.colors.some(cl => cl.includes(textToSearch)));
console.log(test);

---

Примечание: Вы должны быть осторожны с этим подходом, поскольку re соответствует green!

---

На основании комментария:

var carList = [{
    car: "maruti",
    colors: ["red", "redish", "yellow"]
  },
  {
    car: "ferrari",
    colors: ["purple", "red"]
  },
  {
    car: "Merc",
    colors: ["pink", "green"]
  }
];

function getCars(event) {

  // Value of input field
  var value = event.target.name;
  
  // Sort carList
  var res = carList.filter(x => x.colors.some(cl => cl.includes(value)));
  
  // Show result to console
  console.log(res);
}

<input onclick="getCars(event);" name="red" type="checkbox">red</input>
<input onclick="getCars(event);" name="llow" type="checkbox">llow</input>

Answer 5

Вы можете использовать фильтр & some. Внутри обратного вызова filter используются некоторые цвета, которые включают искомый цвет

var carList = [{
    car: "maruti",
    colors: ["red", "redish", "yellow"]
  },
  {
    car: "ferrari",
    colors: ["purple", "red"]
  },
  {
    car: "Merc",
    colors: ["pink", "green"]
  }
]

function getCar(color) {
  return carList.filter(item => item.colors.some(col => col.includes(color)))
}
console.log(' When it is red ', getCar('red'));
console.log('When it is redish', getCar('redish'));