We Keep Coding

Comparing two arrays - removing element from array based on object keys

I have two objects.
const arrayOne = [
{
label: "Categories",
to: "/categories",
id: "product_type",
},
{
label: "Colors",
to: "/colors",
id: "color",
},
{
label: "Materials",
to: "/materials",
id: "material",
},
{
label: "Sizes",
to: "/sizes",
id: "sizes",
},
{
label: "Designers",
to: "/designers",
id: "designer_slug",
},
{
label: "Stores",
to: "/stores",
id: "retailer_slug",
},
];
const arrayTwo = [
{
id: "gender",
label: "Gender",
lazy_loaded: false,
},
{
id: "product_type",
label: "Category",
lazy_loaded: false,
},
{
id: "quick_filters",
label: "Quick filters",
lazy_loaded: false,
},
{
id: "final_price",
label: "Price",
lazy_loaded: false,
},
{
id: "color",
label: "Color",
lazy_loaded: false,
},
{
id: "material",
label: "Material",
lazy_loaded: false,
},
{
id: "designer_slug",
label: "Brand",
lazy_loaded: true,
},
{
id: "retailer_slug",
label: "Store",
lazy_loaded: true,
},
];
As you can see they both have the key 'id'. If the IDs in arrayOne aren't in arrayTwo, I would like them to be removed from arrayOne (the whole object). So in this case, only the object with "sizes" should be removed from arrayOne. How would I go about doing this? Thanks in advance!

you could utilize filter:
const newArrayOne = arrayOne.filter(x => arrayTwo.find(y => y.id === x.id))

You could use a Set with id and filter the other array.
const
arrayOne = [{ label: "Categories", to: "/categories", id: "product_type" }, { label: "Colors", to: "/colors", id: "color" }, { label: "Materials", to: "/materials", id: "material" }, { label: "Sizes", to: "/sizes", id: "sizes" }, { label: "Designers", to: "/designers", id: "designer_slug" }, { label: "Stores", to: "/stores", id: "retailer_slug" }],
arrayTwo = [{ id: "gender", label: "Gender", lazy_loaded: false }, { id: "product_type", label: "Category", lazy_loaded: false }, { id: "quick_filters", label: "Quick filters", lazy_loaded: false }, { id: "final_price", label: "Price", lazy_loaded: false }, { id: "color", label: "Color", lazy_loaded: false }, { id: "material", label: "Material", lazy_loaded: false }, { id: "designer_slug", label: "Brand", lazy_loaded: true }, { id: "retailer_slug", label: "Store", lazy_loaded: true }],
two = new Set(arrayTwo.map(({ id }) => id)),
result = arrayOne.filter(({ id }) => two.has(id));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

change text of rows in type matrix surveyjs

I am building best employee survey project using surveyjs. When working in matrix type, I get trouble how to change text "employee1,employee2,employee3" with real name employee
see picture.
so far here is my code:
var json = {
title: "Software developer survey.",
pages: [
{
title: "Part 1",
questions: [
{
type: "matrix",
name: "Question1",
//isAllRowRequired: true,
title: "Please indicate if you agree or disagree with the following statements",
columns: [
{
value: 1,
text: "Strongly Disagree"
}, {
value: 2,
text: "Disagree"
}, {
value: 3,
text: "Neutral"
}, {
value: 4,
text: "Agree"
}, {
value: 5,
text: "Strongly Agree"
}
],
rows: [
{
value: "valueEmployee1",
text: "Employee1 ![Employee1](https://bezone.files.wordpress.com/2008/02/soeharto.jpg =50x50)"
}, {
value: "valueEmployee2",
text: "Employee2"
}, {
value: "valueEmployee3",
text: "Employee3"
}
]
},
//
]
},
thank you for your help

You can add matrix rows dynamically:
var json = {
questions: [
{
type: "matrix",
name: "score",
title: "Please score the employees in the list",
columns: [
{
value: 1,
text: "Bad"
}, {
value: 2,
text: "So-so"
}, {
value: 3,
text: "Good enough"
}, {
value: 4,
text: "Good"
}, {
value: 5,
text: "Excellent"
}
],
rows: [
]
}
]
};
window.survey = new Survey.Model(json);
var q = survey.getQuestionByName("score");
var employees = [{ id: "id1", name: "John"}, { id: "id2", name: "Ben"}, { id: "id3", name: "Chack"}]
employees.forEach(function(employee) {
q.rows.push(new Survey.ItemValue(employee.id, employee.name));
});
Here is the working sample - https://plnkr.co/edit/OMBt1n02Qc8f5znUmOHE?p=preview

How to restrict the selection of values from combobox Extjs

In the window for creating and editing records, I have a combobox type field
Ext.define('BookApp.view.Book', {
extend: 'Ext.window.Window',
alias: 'widget.bookwindow',
width : 450,
title: 'Book',
layout: 'fit',
autoShow: true,
modal : true,
initComponent: function() {
this.items = [{
xtype: 'form',
items: [
{
xtype: 'combobox',
fieldLabel: 'Status',
name: 'status',
store: Ext.data.StoreManager.lookup('Statuses'),
valueField: 'id',
displayField: 'name',
typeAhead: true,
queryMode: 'remote'
},
...............
Store Statuses gives records from the table with the fields: id, name, order_install, where order_install is the order of the status.
Table Statuses
id name order_install
23 New 1
24 In Work 2
29 Postponed 3
34 Shipped 4
31 In_transit 5
How to make that the choice of a value from the status list was limited to only one value up or down according to the order_install field?
For example: If the status of In Work, then only the statuses Postponed and New were available for selection

Solution:
Use store filterBy() method with custom filtering function.
Because your id values are random, you have to get the internal position of record in store to find the prior and next record.
In the next examples filterCombo() is the function, that filters the store. This function is used in combobox select event. You can use it where you want. There are differences between ExtJS 4 and ExtJS 6 version, so there are two examples:
ExtJS 4:
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.FocusManager.enable();
var store = Ext.create('Ext.data.Store', {
fields: ['order', 'id', 'name'],
data : [
{"id": 23, name: "New", order_install: 1},
{"id": 24, name: "In Work", order_install: 2},
{"id": 29, name: "Postponed", order_install: 3},
{"id": 34, name: "Shipped", order_install: 4},
{"id": 31, name: "In_transit", order_install: 5}
]
});
function filterCombo(combobox, index) {
store = combobox.getStore();
store.clearFilter();
store.filterBy(
function(record) {
if ((record.index == index - 1) || (record.index == index) || (record.index == index + 1)) {
return true;
} else {
return false;
}
}
);
};
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose items',
store: store,
queryMode: 'local',
displayField: 'name',
valueField: 'id',
multiSelect: false,
renderTo: Ext.getBody(),
value: 'In Work',
listeners: {
'select': function (combo, records) {
index = records[0].index;
filterCombo(combo, index);
},
'render': function (combo) {
index = combo.store.find('name', combo.getValue());
filterCombo(combo, index);
}
}
});
});
ExtJS 6:
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.Store', {
fields: ['order', 'id', 'name'],
data : [
{"id": 23, name: "New", order_install: 1},
{"id": 24, name: "In Work", order_install: 2},
{"id": 29, name: "Postponed", order_install: 3},
{"id": 34, name: "Shipped", order_install: 4},
{"id": 31, name: "In_transit", order_install: 5}
]
});
function filterCombo(combobox, index) {
store = combobox.getStore();
store.clearFilter();
store.filterBy(
function(record) {
if ((record.internalId == index - 1) || (record.internalId == index) || (record.internalId == index + 1)) {
return true;
} else {
return false;
}
}
);
};
Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Choose items',
store: store,
queryMode: 'local',
displayField: 'name',
valueField: 'id',
value: '24', // Equals to "In Work"
multiSelect: false,
renderTo: Ext.getBody(),
listeners: {
'select': function (combo, records) {
index = records.internalId;
filterCombo(combo, index);
},
'render': function (combo) {
index = combo.getSelection().internalId;
filterCombo(combo, index);
}
}
});
}
});

So i have two solutions, one to prevent selecting the combo item(but it will remain visible) and the other to hide the values you don't want to be selected(using store filters).
1) FIDDLE: beforeselect
2) FIDDLE: filterBy

Selecfield set options from array

Hi I have a json with array of values and I want to set this values as options to the selectfield. Not sure how to go ahead with this scenario.Any help is appreciated.
Below is my code for json and javascript function which returns the xtype selectfeild
var json= {
"metric": {
"areaInput": ["um", "mm", "cm", "m", "dm", "km"],
"areaResult": ["um", "mm", "cm", "m", "ha", "dm", "km"],
"volumeInput": ["mm", "cm", "m", "km"],
"volumeResult": ["ml", "tsp", "tbs", "l", "mm", "cm", "m", "km"],
"weight": ["g", "kg", "mg", "t"]
},
"imperial": {
"areaInput": ["in", "ft", "yd", "fur", "mi", "nmi"],
"areaResult": ["in", "ft", "yd", "mi", "nmi", "acre"],
"volumeInput": ["in", "ft", "yd", "mi"],
"volumeResult": ["in", "oz", "fl.oz", "pt", "qt", "gal", "tbs", "tsp", "cups", "ft", "yd", "mi"],
"weight": ["oz", "lb", "t", "oz.tr.", "grains"]
}
},
selectBoxUnit: function(eachInput){
var options = [];
for (h in json.metric) {
options.push({text: json.metric[h], value: h});
}
Ext.getCmp('myselect').add(options);
return {
xtype: 'selectfield',
usePicker : false,
itemId: eachInput.itemId+"selectfield",
name: eachInput.itemId,
id:'myselect',
flex: 1,
options: options,
listeners: {
change: function (field, value) {
field.setOptions([{
value: "newvalue",
text: "My new value"
}], true);
}
}
}
};

I'm quite new to Sencha Touch 2. I write this example for you. May be it will help you. You must set datastore to
selectfield. After this you can very easy add items to this
datastore and options will be created.
Ext.define('OptionModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'text', type: 'string'},
{name: 'value', type: 'string'}
]
}
});
var optionsStore = Ext.create('Ext.data.Store', {
model: 'OptionModel'
});
Ext.application({
name: 'Test',
launch: function () {
Ext.Viewport.add({
xtype: 'panel',
fullscreen: true,
items: [
{
xtype: 'fieldset',
title: 'Select',
items: [
{
xtype: 'selectfield',
label: 'Choose item',
id: 'selectItemId',
store: optionsStore
}
]
},
{
xtype: 'button',
text: 'Add new item',
listeners: {
tap: function () {
var optionValueText = "Item " + optionsStore.getCount();
// here is the magic
optionsStore.add({
text: optionValueText,
value: 'somevalue'
});
// here we set new added item
// to be selected (active into select)
Ext.ComponentQuery.query('#selectItemId')[0].setValue(optionValueText);
}
}
}
]
});
}
});

dojo exception:Object [object Object] has no method 'appendChild'

Hy,
i have some problems with dojo. I will migrate my scripts from 1.8 to 2.0.
This is my code:
I develop a addon for the new Univention Corporated Server 3.1. Univention has updated th dojo framework from 1.8 to 2.0 and i must migrate my code.
Under dojo 1.8 works my program very well.
define([
"dojo",
"dojo/_base/declare",
"dojo/_base/lang",
"dojo/_base/array",
"umc/widgets/Module",
"umc/widgets/ContainerWidget",
"umc/widgets/Page",
"umc/widgets/Form",
"umc/widgets/Grid",
"umc/widgets/TabContainer",
"umc/widgets/ExpandingTitlePane"
], function(declare,lang,array,Module,ContainerWidget,Page,Form,Grid,declare, lang, array,TabContainer,_){
return declare("umc.modules.asteriskUser",[ Module ],{
_buttons: null,
_mailboxHint: null,
_mailboxForm: null,
_grid: null,
_forms: [],
buildRendering: function () {
this.inherited(arguments);
this._buttons = [{
name: 'submit',
label: "Speichern",
callback: lang.hitch(this, function () {
this.save();
}),
}];
this._forms = [];
var tabContainer = new umc.widgets.TabContainer({
nested: true
});
tabContainer.addChild(this.renderPhones());
tabContainer.addChild(this.renderMailbox());
tabContainer.addChild(this.renderForwarding());
this.addChild(tabContainer);
this.startup();
this.load();
},
renderMailbox: function () {
var page = new umc.widgets.Page({
title: "Anrufbeantworter",
headerText: "Anrufbeantwortereinstellungen",
footerButtons: this._buttons,
closable: false,
});
var container = new umc.widgets.ContainerWidget({
scrollable: true,
});
page.addChild(container);
var noMailboxHint = new umc.widgets.Text({
content: "Leider hat Ihnen der Administrator keinen " +
"Anrufbeantworter zugewiesen.",
region: "top",
});
container.addChild(noMailboxHint);
this._mailboxHint = noMailboxHint;
var widgets = [{
type: 'TextBox',
name: 'mailbox/password',
label: "PIN-Nummer zum Abrufen",
}, {
type: 'ComboBox',
name: 'mailbox/email',
label: "Per eMail benachrichtigen?",
staticValues: [
{ id: '0', label: "Nein" },
{ id: '1', label: "Ja, gerne!" },
],
}, {
type: 'ComboBox',
name: 'mailbox/timeout',
label: "Mailbox antwortet nach",
staticValues: [
{ id: '5', label: "5 Sekunden" },
{ id: '10', label: "10 Sekunden" },
{ id: '20', label: "20 Sekunden" },
{ id: '30', label: "30 Sekunden" },
{ id: '45', label: "45 Sekunden" },
{ id: '60', label: "einer Minute" },
{ id: '120', label: "zwei Minuten" },
{ id: '180', label: "π Minuten" },
],
}];
var layout = [
'mailbox/password',
'mailbox/email',
'mailbox/timeout'
];
var form = new umc.widgets.Form({
widgets: widgets,
layout: layout,
scrollable: true,
});
container.addChild(form);
this._forms.push(form);
this._mailboxForm = form;
this._mailboxForm.domNode.style.display = 'none';
this._mailboxHint.domNode.style.display = 'block';
return page;
},
renderPhones: function () {
var page = new umc.widgets.Page({
title: "Telefone",
headerText: "Telefoneinstellungen",
footerButtons: this._buttons,
closable: false,
});
var container = new umc.widgets.ExpandingTitlePane({
title: "Klingelreihenfolge",
});
page.addChild(container);
this._grid = new umc.widgets.Grid({
moduleStore: umc.store.getModuleStore("dn",
"asteriskUser/phones"),
query: {
filter:'*',
},
columns: [{
name: 'position',
label: "Position",
editable: false,
hidden: true,
}, {
name: 'name',
label: "Telefon",
editable: false,
}],
actions: [{
name: 'earlier',
label: "Früher",
isStandardAction: true,
canExecute: lang.hitch(this, function (values) {
return values.position > 0;
}),
callback: lang.hitch(this, function (id) {
this._grid.filter({
dn: id,
position: -1,
});
}),
}, {
name: 'later',
label: "Später",
isStandardAction: true,
canExecute: lang.hitch(this, function (values) {
return (values.position + 1 <
this._grid._grid.rowCount);
}),
callback: lang.hitch(this, function (id) {
this._grid.filter({
dn: id,
position: 1,
});
}),
}],
});
container.addChild(this._grid);
foo = this._grid;
this._grid._grid.canSort = function (index) {
return false;
};
var widgets = [{
type: 'ComboBox',
name: 'phones/interval',
label: "Klingelintervall",
staticValues: [
{ id: '2', label: "2 Sekunden" },
{ id: '4', label: "4 Sekunden" },
{ id: '6', label: "6 Sekunden" },
{ id: '8', label: "8 Sekunden" },
{ id: '10', label: "10 Sekunden" },
],
}];
var layout = [
'phones/interval',
];
var form = new umc.widgets.Form({
region: 'top',
widgets: widgets,
layout: layout,
scrollable: true,
});
page.addChild(form);
this._forms.push(form);
page.startup();
return page;
},
renderForwarding: function () {
var page = new umc.widgets.Page({
title: "Weiterleitung",
headerText: "Weiterleitungseinstellungen",
footerButtons: this._buttons,
closable: false,
});
var container = new umc.widgets.ContainerWidget({
scrollable: true,
});
page.addChild(container);
var widgets = [{
type: 'TextBox',
name: 'forwarding/number',
label: "Weiterleitungsziel",
}];
var layout = [
'forwarding/number'
];
var form = new umc.widgets.Form({
widgets: widgets,
layout: layout,
scrollable: true,
});
container.addChild(form);
this._forms.push(form);
return page;
},
setValues: function (values) {
array.forEach(this._forms, function (form) {
form.setFormValues(values);
}, this);
// disable the mailbox form if needed
if (values.mailbox) {
this._mailboxForm.domNode.style.display = 'block';
this._mailboxHint.domNode.style.display = 'none';
} else {
this._mailboxForm.domNode.style.display = 'none';
this._mailboxHint.domNode.style.display = 'block';
}
},
getValues: function () {
var values = {};
array.forEach(this._forms, function (form) {
lang.mixin(values, form.gatherFormValues());
}, this);
return values;
},
load: function () {
this.umcpCommand('asteriskUser/load').then(
lang.hitch(this, function (data) {
this.setValues(data.result);
}),
lang.hitch(this, function () {
// hm...
})
);
},
save: function () {
var data = this.getValues();
this.umcpCommand('asteriskUser/save', data);
},
});
});
So and Chrome give me the following exception message:
Uncaught TypeError: Object [object Object] has no method 'appendChild'
_1a86.buildRendering
_11cd
_abc.buildRendering
_13a4.create
_13a4.postscript
a
_11e4
a
(anonymous function)
_c6
_36
_36
_7b
_37
_7b
_ee
req.injectUrl._108
Have anyone an idea?
Thx for helping!