从两个数组中找到相似的字符串(obj.key)，arr[{},{}] arr2[{},{}]，然后将checked 属性设置为true

Question

Thanks for your time. there are two arrays, the arr is the dropdownlist in the html page which could be multiple select. when submit, the controller do operations on the selected values got from arr commodity = councils_item.replace(/(.*)_/, a => '') And finally generated a new array which format is arr2. That results some words in arr are composed of the words from commodities in arr2. such as ITPSM in arr2 is similar to TechProd_ITPSM in arr. How could I find the elements in arr which is similar to the element arr2/commodities or the same ones such as Travel. And set the corresponding item checked attribute value to true? I'm using angularjs and angular material. Thanks a million in advance. By the way below is part of html as well.

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>

enter image description here

Answer 1

At change event of <select> you can use for..of loop to iterate arr2 array, iterate each object property, value using Object.entries() , check if property value contains text of selected <option> with RegExp /[AZ][az]+/g to match uppercase letter followed by one or more lower case letters; if property is "commodities" , concatenate the array value of the object to current "label" as a string with .join("") ; iterate arr using for..of loop, Object.entries() , set checked of arr at current index to true if "label" property of arr contains a match to select .value using same 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 = /[AZ][az]+/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>

Answer 2

fixed. use forEach to get all commodities and then use map and reduce to deal with a "join" string "TechProd_ITPSM" to set the checked value as true. There would be better approach. Welcome any of your idea.

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));

            };