i have these array object
$scope.filters = {
1 : {
name : 'Pattern',
options : {
1 : { name: 'Plain', selected: false },
2 : { name: 'Self Design', selected: false },
3 : { name: 'Check', selected: false },
4 : { name: 'Stripe', selected: false },
5 : { name: 'Print', selected: false },
6 : { name: 'Others', selected: false }
}
},
2 : {
name : 'Colour',
options : {
1 : { name: 'White', selected: false },
2 : { name: 'Blue', selected: false },
3 : { name: 'Grey', selected: false },
4 : { name: 'Pink', selected: false },
5 : { name: 'Purple', selected: false },
6 : { name: 'Black', selected: false },
//7 : { name: 'Others', selected: false }
}
},
3 : {
name : 'Material',
options : {
1 : { name: 'Cotton', selected: false },
2 : { name: 'Technicals', selected: false },
3 : { name: 'CVC', selected: false },
4 : { name: 'Cotton, Two Ply', selected: false }
}
}
}
how to get a group list of selected = true filters using $watch?
if possible i want the result stucture to be like this :
{
Pattern : {
1 : Plain,
2 : Self Design
},
Colour : {
1: Blue
}
}
Try this:
var name ,options, selected = {};
for (var idx in $scope.filters) {
name = $scope.filters[idx]['name'];
options = $scope.filters[idx]['options'];
for (var i in options) {
if(options[i]['selected']) {
selected[name] = selected[name] || {};
selected[name][i] = options[i]['name'];
}
}
}
console.log(JSON.stringify(selected,null,4));
/*
{
"Pattern": {
"1": "Plain",
"2": "Self Design"
},
"Colour": {
"2": "Blue"
}
}
*/
Look at this plunkr. Not the exact solution, but will give you a start.
I have used $watch (with objectEquality parameter) to get the changed object. You can then use underscore.js or pure javascript to filter out the selected items.
Related
I have one list look like allsettings. I want to convert that list to a new list. Since I am new to react I don't have much idea, I tried by doing the below way but 1st item in the new list is always empty.
const [mySetting, setMySet] = useState([]);
useEffect(() => {
const allSettings = [
{ name: "Setting1", value: true, label: 1 },
{ name: "Setting2", value: true, label: 2 },
{ name: "Setting3", value: true, label: 3 },
{ name: "Setting4", value: false, label: 4 },
{ name: "Setting5", value: true, label: 5 },
{ name: "Setting6", value: true, label: 6 },
{ name: "Setting7", value: true, label: 7 }
];
const settings = [];
const allSettingsMap = allSettings.reduce((resMap, current) => {
settings.push(resMap);
return {
...resMap,
SettingID: current.label,
Name: current.name,
value: current.value
};
}, {});
setMySet(settings);
}, []);
//I want new list like this:
const newSettings = [
{ name: "Setting1", value: true, SettingID: 1 },
{ name: "Setting2", value: true, SettingID: 2 },
{ name: "Setting3", value: true, SettingID: 3 },
{ name: "Setting4", value: false, SettingID: 4 },
{ name: "Setting5", value: true, SettingID: 5 },
{ name: "Setting6", value: true, SettingID: 6 },
{ name: "Setting7", value: true, SettingID: 7 }
];
You can use array#map to rename a key in your object and keeping other keys intact. For each object, you can pick label and rename it to SettingID and keep other key-values same.
const allSettings = [ { name: "Setting1", value: true, label: 1 }, { name: "Setting2", value: true, label: 2 }, { name: "Setting3", value: true, label: 3 }, { name: "Setting4", value: false, label: 4 }, { name: "Setting5", value: true, label: 5 }, { name: "Setting6", value: true, label: 6 }, { name: "Setting7", value: true, label: 7 } ],
result = allSettings.map(({label, ...other}) => ({...other, SettingID: label}));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
You can easily do it by map on array
const allSettings = [
{ name: "Setting1", value: true, label: 1 },
{ name: "Setting2", value: true, label: 2 },
{ name: "Setting3", value: true, label: 3 },
{ name: "Setting4", value: false, label: 4 },
{ name: "Setting5", value: true, label: 5 },
{ name: "Setting6", value: true, label: 6 },
{ name: "Setting7", value: true, label: 7 }
];
const newAllSettings = allSettings.map(item => {
return {
name: item.name,
value: item.value,
SettingID:item.label
};
});
console.log(newAllSettings)
Replace your allSettings.reduce method with this map method
const settings = [];
allSettings.map((setting) => {
const item = { ...setting };
const tempValue = item?.label;
// delete item label
delete item["label"];
item["SettingID"] = tempValue;
settings.push(item);
});
I have two arrays of objects which have properties that match (id & name).
var result1 = [[
{ title: "Option 1", enable: false },
{ title: "Option 2", enable: false },
{ title: "Option 3", enable: false },
{ title: "Option 4", enable: false },
{ title: "Option 5", enable: false }
]
;
var result2 = [
{ title: "Option 3", enable: false },
{ title: "Option 4", enable: false },
];
result1.map(item => {
const isChecked = result2.some(({ title }) => title === item.title);
return {
...item,
checked: isChecked
}
});
Use the following code,
import _ from 'lodash';
this.setState({
result1: this.state.result1.map(item => {
return (_.find(this.state.result2, item)) ? { ...itemObj, checked: true }: { ...itemObj, checked: false }; });
// return (_.find(this.state.result2, {'title': item.title})) ? { ...itemObj, checked: true }: { ...itemObj, checked: false }; }); // if you want to check only title
});
lodash is a lib which will be helpful in such things.
Detailed documentation for the same can be found in this link, for find.
The above code with check the whole item object if you want to check only part of it say only title below is the code
My state has an array of objects that also contains an array of objects.
var state = {
prop1: null,
categories: [
{
categoryId: 1,
tags: [
{
tagId: 1,
name: 'AA11',
status: true,
},
{
tagId: 2,
name: 'AA22',
status: false,
}
]
},
{
categoryId: 2,
tags: [
{
tagId: 1,
name: 'BB11',
status: true,
},
{
tagId: 2,
name: 'BB22',
status: false, // let's say i want to toggle this
}
]
},
]
};
I have an action that will toggle a status of a tag. This action will receive parameters categoryId and tagId.
So far I've come up with this but it doesn't work
return {
...state,
categories: state.categories.map((category) => {
category.tags.map(tag => (
(tag.tagId === action.tagId && category.categoryId === action.categoryId) ? {
...tag,
status: !tag.status,
} : tag));
return category;
}),
};
I finally fixed the map code.
return {
...state,
categories: state.categories.map(category => ((category.id === action.categoryId) ?
{
...category,
tags: category.tags.map(tag => (tag.id === action.tagId ? {
...tag, status: !tag.status,
} : tag)),
} : category)),
};
I have 2 object arrays and will use those value on checkbox for view. I want to merge 2 obj arrays to make it one json object file. help me please
$scope.fruits = [
{ name: 'apple', selected: true },
{ name: 'orange', selected: false },
{ name: 'pear', selected: true },
{ name: 'naartjie', selected: false }
];
$scope.color = [
{ name: 'red', selected: true },
{ name: 'green', selected: false },
{ name: 'orange', selected: true },
{ name: 'yellow', selected: false }
];
And the view,
<label ng-repeat="fruit in fruits" class="checkbox-inline">
<input type="checkbox" name="selectedFruits[]" value="{{fruitName}}" ng-model="fruit.selected"> {{fruit.name}}</label>
<label ng-repeat="color in colors" class="checkbox-inline">
<input type="checkbox" name="selectedColors[]" value="{{colorName}}" ng-model="color.selected"> {{color.name}}</label>
And the output i want like below:
[{
"name": "apple",
"color": "red",
"selected": true
},
{
"name": "orange",
"color": "yellow",
"selected": true},
{
"name": "pear",
"color": "green",
"selected": true}]
you can use map function for this.
var fruits = [
{ name: 'apple', selected: true },
{ name: 'orange', selected: false },
{ name: 'pear', selected: true },
{ name: 'naartjie', selected: false }
];
var color = [
{ name: 'red', selected: true },
{ name: 'green', selected: false },
{ name: 'orange', selected: true },
{ name: 'yellow', selected: false }
];
var arr = fruits.map((o,i)=>{
o.color = color[i].name;
return o;
});
console.log(arr)
Use Angular merge enter link description here
var mergedObject = angular.extend(object1, object2);
And manual way by ignoring null and missing values would be
this
Hello i am have two kendo ui drodDownList:
kendo-drop-down-list(
ng-model = 'vm.firstList'
k-data-source='vm.filterData'
k-data-text-field='"title"'
k-data-value-field='"name"'
k-value-primitive='true'
k-filter='"contains"'
k-on-change='vm.onChange($event)'
)
and
kendo-drop-down-list(
ng-model = 'vm.secondList'
k-data-source='vm.filterData'
k-data-text-field='"title"'
k-data-value-field='"name"'
k-value-primitive='true'
k-filter='"contains"'
k-on-change='vm.onChange($event)'
)
it is data source:
this.filterData = [
{ name: 'Brown', title: 'Soier' },
{ name: 'Maks', title: 'Inkl' },
{ name: 'Lint', title: 'Baks' },
{ name: 'Hover', title: 'Niyou' }
]
they have same data source, and i am want when choosing item in first dd then remove this item from other dd (and likewise for the second). At the same time, two identical elements can not be selected.
my solution:
in first dd add:
k-on-change='vm.onFirstSelect(kendoEvent)'
k-data-source='vm.firstFilterElements'
for second dd:
k-on-change='vm.onSecondSelect(kendoEvent)'
k-data-source='vm.secondFilterElements'
in controller add:
this.filterElements = [
{ name: 'Brown', title: 'Soier' },
{ name: 'Maks', title: 'Inkl' },
{ name: 'Lint', title: 'Baks' },
{ name: 'Hover', title: 'Niyou' }
]
this.firstFilterElements = this.filterElements;
this.secondFilterElements = this.filterElements;
onFirstSelect(e) {
this.secondFilterElements = this.filterByItem(e);
}
onSecondSelect(e) {
this.firstFilterElements = this.filterByItem(e);
}
filterByItem (e) {
return this.filterElements.filter(function (el) {
return el.name !== e.sender.dataItem(e.item)
[e.sender.options.dataValueField];
});
}
if someone can optimize it i will be glad)