найдите аналогичную строку (obj.key) из двух массивов, arr[{},{}] arr2[{},{}], затем установите для проверенного атрибута значение true

Спасибо за ваше время. есть два массива, arr - это раскрывающийся список на странице html, который может быть множественным выбором. при отправке контроллер выполняет операции над выбранными значениями, полученными из arr commodity = Councils_item.replace(/(.*)_/, a => '') И, наконец, генерирует новый массив, формат которого обр2. Это приводит к тому, что некоторые слова в arr состоят из слов из товаров в arr2. например, ITPSM в обр.2 похож на TechProd_ITPSM в обр. Как мне найти в arr элементы, похожие на элемент arr2/commodities или такие же, как Путешествия, и установить для соответствующего элемента значение атрибута checked равным true? Я использую angularjs и угловой материал. Заранее спасибо миллион. Кстати, ниже это тоже часть html.

var arr = [
    { label: 'Techod_ITSM', checked: false },
    { label: 'Techod_Teco', checked: false },
    { label: 'Techod_Connectivity', checked: false },
    { label: 'Services_CF', checked: false },
    { label: 'Technical Services', checked: false },
    { label: 'Travel', checked: false },
    { label: 'Marketing & solutions', checked: false },
    { label: 'All', checked: false },
    { label: 'facility Solution Services', checked: false }
];
var arr2 = [
    { "Marketing & Communications": true },
    { "All": true },
    { "Travel": true },
    { "Technical Products": true, "commodities": ["ITSM", "Teco", "Connectivity"] },
    { "Services": true, "commodities": ["CF", "Technical Services"] }
];

<form name="userForm" novalidate ng-submit="userForm.$valid &&  userProject.createProject()"> 
<md-select ng-model="userProject.project_councils" multiple="true">
 <md-option ng-value="project_councils" ng-repeat="project_councils in project_councilss" ng-selected="project_councils.checked">{{project_councils.label}}
</md-option></md-select>
<md-button type="submit" id="createProject" value="Submit" class="md-raised md-primary" aria-label="Create" > Submit
</md-button>

введите здесь описание изображения


person TammyShi    schedule 21.04.2017    source источник


Ответы (2)


В change событии <select> вы можете использовать цикл for..of для перебора массива arr2, перебора каждого свойства объекта, значения с использованием Object.entries(), проверки, содержит ли значение свойства текст выбранного <option> с RegExp /[A-Z][a-z]+/g для соответствия прописной букве, за которой следует одна или несколько строчных букв; если свойство равно "commodities", объединить значение массива объекта с текущим "label" в виде строки с .join(""); повторите arr, используя цикл for..of, Object.entries(), установите checked из arr в текущем индексе на true, если свойство "label" arr содержит совпадение с select .value, используя тот же RegExp.

var arr = [
    { label: 'TechProd_ITPSM', checked: false },
    { label: 'TechProd_Telco', checked: false },
    { label: 'TechProd_Connectivity', checked: false },
    { label: 'Services_CWF', checked: false },
    { label: 'Technical Services', checked: false },
    { label: 'TechProd_Telco', checked: false },
    { label: 'Travel', checked: false },
    { label: 'Marketing & solutions', checked: false },
    { label: 'All', checked: false },
    { label: 'Facility Solution Services', checked: false }
];
var arr2 = [
    { "Marketing & Communications": true },
    { "All": true },
    { "Travel": true },
    { "Technical Products": true, "commodities": ["ITPSM", "Telco", "Connectivity"] },
    { "Services": true, "commodities": ["CWF", "Business Services", "Technical Services"] }
];

const select = document.querySelector("select");
const re = /[A-Z][a-z]+/g;

select.onchange = () => {
  const val = select.value.match(re);
  filter: for (let prop of arr2) {
    for (let [key, value, c] of Object.entries(prop)) {
      if (new RegExp(val.join("|")).test(key)) {
        if (/commodities/.test(key)) c = value.join("");
        for (let [index, {label}] of Object.entries(arr)) {
          arr[index]["checked"] = new RegExp(label.concat(c || "").match(re)
                                  .join("|")).test(select.value);
        }              
      }
    }
  }
  console.log(arr);
}

for (let {label, checked} of arr) {
  let option = new Option(label, label);
  option.selected = checked;
  select.appendChild(option);
}
<select><option value="">Select an option</option></select>

person guest271314    schedule 21.04.2017
comment
Привет, AJT_82, я мог понять твой подход, но в настоящее время не знаком с этими функциями. Таким образом, я попытался выбрать TechProd_ITPSM, но все проверенные атрибуты TechProd_Telco и TechProd_Connectivity также были установлены как истинные. Желаемым результатом является проверка только элемента TechProd_ITPSM. Два других должны быть ложными. Не могли бы вы помочь посмотреть дальше? - person TammyShi; 22.04.2017
comment
Как мне найти похожие элементы в arr Почему вы включили похожий термин в Вопрос? - person guest271314; 22.04.2017
comment
@TammyShi Вы пытаетесь установить checked в true только в arr на основе выбора и только arr? Какую роль играет arr2 в процедуре? - person guest271314; 22.04.2017
comment
Я использовал угловой материал md-select, чтобы пользователь мог выбрать несколько значений из раскрывающегося списка и получил результат от БД, когда пользователь выполняет действие редактирования. Попытка установить проверенный атрибут как true, если элементы в dorpdown существуют в responsed arr2. Я использовал отслеживание по $value:id, но не знаю, как заставить его работать для множественного выбора. Это еще один вопрос от меня. - person TammyShi; 23.04.2017
comment
‹md-input-container class=md-block flex-gt-sm=› ‹label›Councils‹/label› ‹md-select ng-model=userProject.project_councils multiple=true› ‹md-option ng-value=project_councils ng-repeat=project_councils в project_councilss ng-selected=project_councils.checked› {{project_councils.label}} ‹/md-option› ‹/md-select› ‹/md-input-container› - person TammyShi; 23.04.2017
comment
да, но я хотел бы получить какую-то общую функцию, которую можно было бы использовать не только втроем. - person TammyShi; 23.04.2017
comment
Угловой материал не пробовал. Функцию в обработчике change можно настроить так, чтобы она соответствовала более чем трем строкам в arr2, как показано в исходном ответе. Какова схема соответствия и логика? - person guest271314; 23.04.2017
comment
пример arr (раскрывающийся список в html отображается только метка) имеет 9 элементов, и каждый из них похож на {метка: 'Techod_ITSM', проверено: false}, пользователь выбирает один/два/или три, но сохраняется в другой модели arr2. Технические продукты: правда, товары: [ITSM, Teco, Connectivity] вы можете видеть, что метка в arr разделена на атрибуты: Techod => Технические продукты и ITSM => ITSM. теперь я получаю ответ arr2, хочу, чтобы флажок в html отображался, когда выбран ITSM. другие нет. - person TammyShi; 23.04.2017
comment
Почему массивы устроены по-разному? Можете ли вы включить точное описание ожидаемых совпадений и связанную с ними логику между arr и arr2 в вопросе? - person guest271314; 23.04.2017

исправлено. используйте forEach, чтобы получить все товары, а затем используйте карту и уменьшить, чтобы иметь дело со строкой «объединения» «TechProd_ITPSM», чтобы установить проверенное значение как истинное. Был бы лучший подход. Приветствуем любую вашу идею.

var selectedCom = "";
            var selectedComArr = [];
            feedbackProject.project_councils.forEach(function(resCouncils) {
                var resCommodities = resCouncils.commodities;
                if (resCommodities) {
                    resCommodities.forEach(function(resComItem) {
                        if ((resComItem == "ITPSM") || (resComItem == "Telco") || (resComItem == "Connectivity")) {
                            selectedCom = "TechProd_" + resComItem;
                            selectedComArr.push(selectedCom);
                        } else if ((resComItem == "CWF") || (resComItem == "Business Services") || (resComItem == "Technical Services")) {
                            selectedCom = "Services" + resComItem;
                            selectedComArr.push(selectedCom);
                        }
                    });
                } else {
                    selectedComArr.push(Object.keys(resCouncils)[0]);
                }
                console.log(selectedComArr);
            });

            function reducer(map, that) {
                map[that.label] = that;
                return map;
            }

            function getMapper(map) {
                return function(item) {
                    var temp = map[item];
                    if (temp && temp.label === item) {
                        temp.checked = true;
                    }
                }
            }

            function checkSelected(arr, arr2) {
                var map = arr.reduce(reducer, {});
                arr2.map(getMapper(map));

            };
person TammyShi    schedule 23.04.2017