I am having a ComboBox with a quite simple config as you can see in this fiddle.
The problem is that when I select a value in the drop-down list, it is not displayed in the combo's text field and I can't figure out why.
Also, I have set the property hideTrigger to true but the combo's trigger is still displayed.
Here is the fiddle code if you can't access it :
Ext.define('MyApp.LanguageCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.myapp.LanguageCombo',
initComponent: function() {
Ext.apply(this, this.factory());
this.callParent();
},
factory: function() {
return {
store: Ext.create('Ext.data.JsonStore', {
proxy: {
type: 'memory',
},
fields: ['id', 'name'],
data: [{"name":"afar","id":"aar"},{"name":"austro-asiatiques, langues","id":"aav"},{"name":"abkhaze","id":"abk"},{"name":"aceh","id":"ace"},{"name":"acolo (syn : acoli, gang)","id":"ach"},{"name":"adangbme (syn : adan, adagbe, adame)","id":"ada"},{"name":"adygh\u00e9","id":"ady"},{"name":"afro-asiatiques, langues","id":"afa"},{"name":"afrihili","id":"afh"},{"name":"afrikaans","id":"afr"},{"name":"a\u00efnou","id":"ain"},{"name":"aljamia (syn : aljamiada)","id":"ajm"},{"name":"akan (syn : twi)","id":"aka"},{"name":"akkadien","id":"akk"},{"name":"albanais","id":"alb"},{"name":"al\u00e9oute (syn : al\u00e9out, aleut)","id":"ale"},{"name":"algonquines, langues","id":"alg"},{"name":"altai du Sud","id":"alt"},{"name":"atlantique-congo, langues","id":"alv"},{"name":"amharique","id":"amh"},{"name":"anglo-saxon (ca.450-1100)","id":"ang"},{"name":"angika","id":"anp"},{"name":"apaches, langues","id":"apa"},{"name":"alacalufanes, langues","id":"aqa"},{"name":"algiques, langues","id":"aql"},{"name":"arabe","id":"ara"},{"name":"aram\u00e9en d'empire (700-300 BCE)","id":"arc"},{"name":"aragonais","id":"arg"},{"name":"arm\u00e9nien","id":"arm"},{"name":"mapudungun (syn : mapuche, mapuce)","id":"arn"},{"name":"arapaho","id":"arp"},{"name":"artificielles, langues","id":"art"},{"name":"arawak","id":"arw"},{"name":"assamais","id":"asm"},{"name":"asturien (syn : bable, l\u00e9onais, asturol\u00e9onais)","id":"ast"},{"name":"athapascanes, langues","id":"ath"},{"name":"arauanes, langues","id":"auf"},{"name":"australiennes, langues","id":"aus"},{"name":"avar","id":"ava"},{"name":"avestique (syn : ancien, zend)","id":"ave"},{"name":"awadhi","id":"awa"},{"name":"arawak, langues","id":"awd"},{"name":"aymara","id":"aym"},{"name":"uto-azt\u00e8ques, langues","id":"azc"},{"name":"az\u00e9ri (syn : azerbaidjanais)","id":"aze"},{"name":"banda, langues","id":"bad"},{"name":"bamil\u00e9k\u00e9, langues","id":"bai"},{"name":"bachkir (syn : baskir)","id":"bak"},{"name":"baloutchi","id":"bal"},{"name":"bambara","id":"bam"},{"name":"balinais","id":"ban"},{"name":"basque","id":"baq"},{"name":"basa (syn : bassa)","id":"bas"},{"name":"baltes, langues","id":"bat"},{"name":"bedja (syn : beja, bichari)","id":"bej"},{"name":"bi\u00e9lorusse","id":"bel"},{"name":"bemba","id":"bem"},{"name":"bengali","id":"ben"},{"name":"berb\u00e8res, langues","id":"ber"},{"name":"bhojpuri","id":"bho"},{"name":"langues biharis","id":"bih"},{"name":"bikol","id":"bik"}],
}),
displayField: 'name',
valueField: 'id',
hideTrigger: true,
validate: function() {
var languagesWithSameCodeAndName = ['ewe', 'fon', 'ido', 'kom', 'lao', 'ocf', 'tiv', 'twi', 'vai', 'yao'];
return Ext.isEmpty(this.getRawValue())
|| this.getValue() != this.getRawValue()
|| languagesWithSameCodeAndName.indexOf(this.getValue()) != -1;
},
tpl: Ext.create('Ext.XTemplate',
'<tpl for="."><li role="option" class="x-boundlist-item" data-qtip="{[this.valueRenderer(values)]}">{[this.valueRenderer(values)]}</li></tpl>',
{
valueRenderer: function(values) {
return Ext.String.format('[{0}] {1}', values.id, values.name);
},
}
)
}
}
});
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
items: [{
xtype: 'myapp.LanguageCombo',
fieldLabel: 'Language',
width: 320,
margin: 15,
}],
})
}
});
It is due to part of your factory object contains part of config:
Ext.define('MyApp.LanguageCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.myapp.LanguageCombo',
initConfig: function() {
Ext.apply(this.config, this.factoryConfig());
Ext.apply(this, this.factory());
this.callParent(arguments);
},
factoryConfig: function() {
return {
displayField: 'name',
valueField: 'id',
hideTrigger: true
}
},
factory: function() {
return {
store: Ext.create('Ext.data.JsonStore', {
proxy: {
type: 'memory',
},
fields: ['id', 'name'],
data: [{
"name": "afar",
"id": "aar"
}, {
"name": "austro-asiatiques, langues",
"id": "aav"
}, {
"name": "abkhaze",
"id": "abk"
}, {
"name": "aceh",
"id": "ace"
}, {
"name": "acolo (syn : acoli, gang)",
"id": "ach"
}, {
"name": "adangbme (syn : adan, adagbe, adame)",
"id": "ada"
}, {
"name": "adygh\u00e9",
"id": "ady"
}, {
"name": "afro-asiatiques, langues",
"id": "afa"
}, {
"name": "afrihili",
"id": "afh"
}, {
"name": "afrikaans",
"id": "afr"
}, {
"name": "a\u00efnou",
"id": "ain"
}, {
"name": "aljamia (syn : aljamiada)",
"id": "ajm"
}, {
"name": "akan (syn : twi)",
"id": "aka"
}, {
"name": "akkadien",
"id": "akk"
}, {
"name": "albanais",
"id": "alb"
}, {
"name": "al\u00e9oute (syn : al\u00e9out, aleut)",
"id": "ale"
}, {
"name": "algonquines, langues",
"id": "alg"
}, {
"name": "altai du Sud",
"id": "alt"
}, {
"name": "atlantique-congo, langues",
"id": "alv"
}, {
"name": "amharique",
"id": "amh"
}, {
"name": "anglo-saxon (ca.450-1100)",
"id": "ang"
}, {
"name": "angika",
"id": "anp"
}, {
"name": "apaches, langues",
"id": "apa"
}, {
"name": "alacalufanes, langues",
"id": "aqa"
}, {
"name": "algiques, langues",
"id": "aql"
}, {
"name": "arabe",
"id": "ara"
}, {
"name": "aram\u00e9en d'empire (700-300 BCE)",
"id": "arc"
}, {
"name": "aragonais",
"id": "arg"
}, {
"name": "arm\u00e9nien",
"id": "arm"
}, {
"name": "mapudungun (syn : mapuche, mapuce)",
"id": "arn"
}, {
"name": "arapaho",
"id": "arp"
}, {
"name": "artificielles, langues",
"id": "art"
}, {
"name": "arawak",
"id": "arw"
}, {
"name": "assamais",
"id": "asm"
}, {
"name": "asturien (syn : bable, l\u00e9onais, asturol\u00e9onais)",
"id": "ast"
}, {
"name": "athapascanes, langues",
"id": "ath"
}, {
"name": "arauanes, langues",
"id": "auf"
}, {
"name": "australiennes, langues",
"id": "aus"
}, {
"name": "avar",
"id": "ava"
}, {
"name": "avestique (syn : ancien, zend)",
"id": "ave"
}, {
"name": "awadhi",
"id": "awa"
}, {
"name": "arawak, langues",
"id": "awd"
}, {
"name": "aymara",
"id": "aym"
}, {
"name": "uto-azt\u00e8ques, langues",
"id": "azc"
}, {
"name": "az\u00e9ri (syn : azerbaidjanais)",
"id": "aze"
}, {
"name": "banda, langues",
"id": "bad"
}, {
"name": "bamil\u00e9k\u00e9, langues",
"id": "bai"
}, {
"name": "bachkir (syn : baskir)",
"id": "bak"
}, {
"name": "baloutchi",
"id": "bal"
}, {
"name": "bambara",
"id": "bam"
}, {
"name": "balinais",
"id": "ban"
}, {
"name": "basque",
"id": "baq"
}, {
"name": "basa (syn : bassa)",
"id": "bas"
}, {
"name": "baltes, langues",
"id": "bat"
}, {
"name": "bedja (syn : beja, bichari)",
"id": "bej"
}, {
"name": "bi\u00e9lorusse",
"id": "bel"
}, {
"name": "bemba",
"id": "bem"
}, {
"name": "bengali",
"id": "ben"
}, {
"name": "berb\u00e8res, langues",
"id": "ber"
}, {
"name": "bhojpuri",
"id": "bho"
}, {
"name": "langues biharis",
"id": "bih"
}, {
"name": "bikol",
"id": "bik"
}],
}),
validate: function() {
var languagesWithSameCodeAndName = ['ewe', 'fon', 'ido', 'kom', 'lao', 'ocf', 'tiv', 'twi', 'vai', 'yao'];
return Ext.isEmpty(this.getRawValue()) || this.getValue() != this.getRawValue() || languagesWithSameCodeAndName.indexOf(this.getValue()) != -1;
},
tpl: Ext.create('Ext.XTemplate', '<tpl for="."><li role="option" class="x-boundlist-item" data-qtip="{[this.valueRenderer(values)]}">{[this.valueRenderer(values)]}</li></tpl>', {
valueRenderer: function(values) {
return Ext.String.format('[{0}] {1}', values.id, values.name);
},
})
}
}
});
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
items: [{
xtype: 'myapp.LanguageCombo',
fieldLabel: 'Language',
width: 320,
margin: 15,
}],
})
}
});
Inside the declaration of your combo, add here your displayField :
{
xtype: 'myapp.LanguageCombo',
fieldLabel: 'Language',
width: 320,
displayField: 'name', // add here
margin: 15
}
Related
var preload_data = [{
"id": 2049,
"text": "style",
"children": [{
"id": "6906957ed912c883",
"text": "Country"
}, {
"id": "d239d844608fdbcf",
"text": "Christmas"
}]
}, {
"id": 0,
"text": "unassigned",
"children": [{
"id": "52d8e1e8d419bb61",
"text": "Punk"
}, {
"id": "88b9826121aeb89b",
"text": "Upbeat"
}, {
"id": "8485e6dd8e33fc50",
"text": "test arda"
}, {
"id": "da9fa55495a4a463",
"text": "test1"
}, {
"id": "feb1177719f4b5a4",
"text": "test arda 3"
}, {
"id": "64a2ae4ec2c0a1ef",
"text": "Feel Good"
}, {
"id": "2512f7946f660dc5",
"text": "Happy"
}, {
"id": "b1e7203207bd068f",
"text": "Love"
}, {
"id": "fb3a42b8abbf975a",
"text": "Reminiscent"
}, {
"id": "56d60aed1278c5a0",
"text": "Indie"
}, {
"id": "5733de46970ac503",
"text": "Rock"
}, {
"id": "801c33b478d1d5be",
"text": "Singer Songwriter"
}, {
"id": "ee4c6f5c12782bb9",
"text": "World"
}, {
"id": "4605140218eb9e52",
"text": "Reality"
}, {
"id": "92934140c305706e",
"text": "Pop"
}, {
"id": "f40f55db44dc0846",
"text": "Acoustic"
}, {
"id": "07b3c4640e84bfeb",
"text": "Folk"
}]
}]
and I want the output for dropdown list
Style:Christmas for example
this is the select2 code
$("#hidStyles").select2({
containerCssClass: 'styleContainer',
data: preload_data,
width: '100%',
allowClear: true,
multiple: true,
dropdownCssClass: 'select2-hidden',
placeholder: 'Please enter the name of style here to assign it to this album',
formatSelection: format1,
escapeMarkup : function(m) { return m;},
formatSearching: null
//formatSelection : format
});
and this is How I format the Json :
function format1(item) {
opt = $("#hidStyles").find(':selected');
sel = opt.text;
//og = opt.closest(".select2-results-dept-0").attr(".select2-result-label");
ogx = opt.text.data.text;
return ogx + ':' + item.text;
}
how can I get the value so that it's like style : christmas
https://jsfiddle.net/jna7ft1c/3/
I am sorry the jsfiddle I am not familiar with for making the front end, but mostly the code is like written there
I have the following JSON data like so:
[{
"target": {
"source": "https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0",
"selector": {
"conformsTo": "http://www.w3.org/TR/media-frags/",
"value": "xywh=pixel:582.6087036132812,114.49275207519531,98.55072021484375,189.85508728027344",
"type": "FragmentSelector"
}
},
"id": "#423647a0-bd23-11ea-8727-73bc60edcd34",
"body": [{
"created": "2020-07-03T11:49:32.058Z",
"purpose": "commenting",
"type": "TextualBody",
"creator": {
"name": "testme",
"id": "0qbvzjI3llhyIrKVO6PZxcZUSiI2"
},
"value": "don't move me"
}, {
"creator": {
"name": "testme",
"id": "0qbvzjI3llhyIrKVO6PZxcZUSiI2"
},
"value": "move",
"type": "TextualBody",
"purpose": "tagging",
"created": "2020-07-03T11:49:30.850Z"
}],
"#context": "http://www.w3.org/ns/anno.jsonld",
"type": "Annotation",
"photoDocId": "92wNwz2aaqy7CWf3mGo1"
}, {
"#context": "http://www.w3.org/ns/anno.jsonld",
"body": [{
"type": "TextualBody",
"purpose": "commenting",
"created": "2020-07-03T10:57:40.590Z",
"value": "anyone ever climb this mountain top?",
"creator": {
"id": "K2Lb1R7owqR9BYmpJAJzrg6w1s92",
"name": "doss"
}
}, {
"created": "2020-07-03T10:57:39.351Z",
"value": "ridge",
"type": "TextualBody",
"creator": {
"name": "doss",
"id": "K2Lb1R7owqR9BYmpJAJzrg6w1s92"
},
"purpose": "tagging"
}, {
"value": "i did in 2005",
"purpose": "commenting",
"type": "TextualBody",
"creator": {
"id": "0qbvzjI3llhyIrKVO6PZxcZUSiI2",
"name": "testme"
},
"created": "2020-07-03T10:59:45.318Z"
}, {
"type": "TextualBody",
"purpose": "tagging",
"creator": {
"name": "testme",
"id": "0qbvzjI3llhyIrKVO6PZxcZUSiI2"
},
"value": "testme",
"created": "2020-07-03T10:59:43.966Z"
}, {
"value": "test",
"type": "TextualBody",
"purpose": "replying",
"creator": {
"name": "doss",
"id": "K2Lb1R7owqR9BYmpJAJzrg6w1s92"
},
"created": "2020-07-03T11:39:18.860Z"
}],
"type": "Annotation",
"photoDocId": "92wNwz2aaqy7CWf3mGo1",
"id": "#03a1f0e0-bd1c-11ea-a688-e1387cc6bed2",
"target": {
"selector": {
"value": "xywh=pixel:247.82608032226562,73.91304016113281,233.33334350585938,240.57972717285156",
"type": "FragmentSelector",
"conformsTo": "http://www.w3.org/TR/media-frags/"
},
"source": "https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0"
}
}, {
"body": [{
"value": "test",
"created": "2020-07-05T11:29:14.742Z",
"purpose": "commenting",
"creator": {
"name": "doss",
"id": "K2Lb1R7owqR9BYmpJAJzrg6w1s92"
},
"type": "TextualBody"
}, {
"creator": {
"name": "doss",
"id": "K2Lb1R7owqR9BYmpJAJzrg6w1s92"
},
"created": "2020-07-05T11:29:13.584Z",
"value": "test",
"purpose": "tagging",
"type": "TextualBody"
}],
"type": "Annotation",
"target": {
"selector": {
"conformsTo": "http://www.w3.org/TR/media-frags/",
"value": "xywh=pixel:395.65216064453125,413.0434875488281,142.02899169921875,131.88406372070312",
"type": "FragmentSelector"
},
"source": "https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0"
},
"photoDocId": "92wNwz2aaqy7CWf3mGo1",
"id": "#c1761960-beb2-11ea-888f-c3ab54e1f3a9",
"#context": "http://www.w3.org/ns/anno.jsonld"
}]
This data is annotation data for an image.
What I am trying to do is loop through each object's body and only check the first element's (ie, body[0].creator.id) creator field. I want to check the id value in that creator field. If the id is the original author's id (lets use the id 0qbvzjI3llhyIrKVO6PZxcZUSiI2 for this example), then return console.log('original author').
I need help with accessing the above element. Any tips?
Side note: The reason for the above workflow is because I need to prevent another user from editing the author's original annotation. The original author will always be the first element in each body.
You could try this
const data = [
{
target: {
source:
'https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0',
selector: {
conformsTo: 'http://www.w3.org/TR/media-frags/',
value:
'xywh=pixel:582.6087036132812,114.49275207519531,98.55072021484375,189.85508728027344',
type: 'FragmentSelector'
}
},
id: '#423647a0-bd23-11ea-8727-73bc60edcd34',
body: [
{
created: '2020-07-03T11:49:32.058Z',
purpose: 'commenting',
type: 'TextualBody',
creator: { name: 'testme', id: '0qbvzjI3llhyIrKVO6PZxcZUSiI2' },
value: "don't move me"
},
{
creator: { name: 'testme', id: '0qbvzjI3llhyIrKVO6PZxcZUSiI2' },
value: 'move',
type: 'TextualBody',
purpose: 'tagging',
created: '2020-07-03T11:49:30.850Z'
}
],
'#context': 'http://www.w3.org/ns/anno.jsonld',
type: 'Annotation',
photoDocId: '92wNwz2aaqy7CWf3mGo1'
},
{
'#context': 'http://www.w3.org/ns/anno.jsonld',
body: [
{
type: 'TextualBody',
purpose: 'commenting',
created: '2020-07-03T10:57:40.590Z',
value: 'anyone ever climb this mountain top?',
creator: { id: 'K2Lb1R7owqR9BYmpJAJzrg6w1s92', name: 'doss' }
},
{
created: '2020-07-03T10:57:39.351Z',
value: 'ridge',
type: 'TextualBody',
creator: { name: 'doss', id: 'K2Lb1R7owqR9BYmpJAJzrg6w1s92' },
purpose: 'tagging'
},
{
value: 'i did in 2005',
purpose: 'commenting',
type: 'TextualBody',
creator: { id: '0qbvzjI3llhyIrKVO6PZxcZUSiI2', name: 'testme' },
created: '2020-07-03T10:59:45.318Z'
},
{
type: 'TextualBody',
purpose: 'tagging',
creator: { name: 'testme', id: '0qbvzjI3llhyIrKVO6PZxcZUSiI2' },
value: 'testme',
created: '2020-07-03T10:59:43.966Z'
},
{
value: 'test',
type: 'TextualBody',
purpose: 'replying',
creator: { name: 'doss', id: 'K2Lb1R7owqR9BYmpJAJzrg6w1s92' },
created: '2020-07-03T11:39:18.860Z'
}
],
type: 'Annotation',
photoDocId: '92wNwz2aaqy7CWf3mGo1',
id: '#03a1f0e0-bd1c-11ea-a688-e1387cc6bed2',
target: {
selector: {
value:
'xywh=pixel:247.82608032226562,73.91304016113281,233.33334350585938,240.57972717285156',
type: 'FragmentSelector',
conformsTo: 'http://www.w3.org/TR/media-frags/'
},
source:
'https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0'
}
},
{
body: [
{
value: 'test',
created: '2020-07-05T11:29:14.742Z',
purpose: 'commenting',
creator: { name: 'doss', id: 'K2Lb1R7owqR9BYmpJAJzrg6w1s92' },
type: 'TextualBody'
},
{
creator: { name: 'doss', id: 'K2Lb1R7owqR9BYmpJAJzrg6w1s92' },
created: '2020-07-05T11:29:13.584Z',
value: 'test',
purpose: 'tagging',
type: 'TextualBody'
}
],
type: 'Annotation',
target: {
selector: {
conformsTo: 'http://www.w3.org/TR/media-frags/',
value:
'xywh=pixel:395.65216064453125,413.0434875488281,142.02899169921875,131.88406372070312',
type: 'FragmentSelector'
},
source:
'https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0'
},
photoDocId: '92wNwz2aaqy7CWf3mGo1',
id: '#c1761960-beb2-11ea-888f-c3ab54e1f3a9',
'#context': 'http://www.w3.org/ns/anno.jsonld'
}
]
data.forEach(d => {
if (d.body[0].creator.id === '0qbvzjI3llhyIrKVO6PZxcZUSiI2') {
console.log('original author')
}
})
I have an server response with data which has the structur as you can see in the codesnippet.
My goal is to iterate through each consent and add the channels
The data from the response:
[
{
"consents": [
{
"channels": [
{
"granted": true,
"id": "sms",
"title": "SMS/MMS"
},
{
"granted": true,
"id": "email",
"title": "E-Mail"
},
{
"granted": false,
"id": "phone",
"title": "Telefon"
},
{
"granted": false,
"id": "letter",
"title": "Brief"
}
],
"client": "App",
"configId": "99df8e86-2e24-4974-80da-74f901ba6a0d",
"date": "2018-03-08T16:03:25.753Z",
"granted": true,
"name": "bestandsdaten-alle-produkte",
"version": "1.0.0",
"versionId": "bd002dcd-fee6-42f8-aafe-22d0209a0646"
}
],
"createdAt": "2018-03-08T16:03:25.778Z",
"id": "1b9649a6-d8de-45c6-a0ae-a03cecf71cb5",
"updatedAt": "2018-03-08T16:03:25.778Z",
"username": "demo-app"
},
{
"consents": [
{
"channels": [
{
"granted": true,
"id": "sms",
"title": "SMS/MMS"
},
{
"granted": true,
"id": "email",
"title": "E-Mail"
},
{
"granted": true,
"id": "phone",
"title": "Telefon"
},
{
"granted": true,
"id": "letter",
"title": "Brief"
}
],
"client": "App",
"configId": "99df8e86-2e24-4974-80da-74f901ba6a0d",
"date": "2018-03-08T14:51:52.188Z",
"granted": true,
"name": "bestandsdaten-alle-produkte",
"version": "1.0.0",
"versionId": "bd002dcd-fee6-42f8-aafe-22d0209a0646"
}
],
"createdAt": "2018-03-08T14:51:52.208Z",
"id": "cf550425-990e-45ef-aaee-eced95d8fa08",
"updatedAt": "2018-03-08T14:51:52.208Z",
"username": "demo-app"
},
{
"consents": [
{
"channels": [
{
"granted": false,
"id": "sms",
"title": "SMS/MMS"
},
{
"granted": true,
"id": "email",
"title": "E-Mail"
},
{
"granted": true,
"id": "phone",
"title": "Telefon"
},
{
"granted": false,
"id": "letter",
"title": "Brief"
}
],
"client": "App",
"configId": "99df8e86-2e24-4974-80da-74f901ba6a0d",
"date": "2018-03-08T14:48:27.024Z",
"granted": true,
"name": "bestandsdaten-alle-produkte",
"version": "1.0.0",
"versionId": "bd002dcd-fee6-42f8-aafe-22d0209a0646"
}
],
"createdAt": "2018-03-08T14:48:27.054Z",
"id": "7fc1f087-2139-4494-bad7-161b0c6231a9",
"updatedAt": "2018-03-08T14:48:27.054Z",
"username": "demo-app"
},
]
The way i go is the following. But i need a way to append the channels to each Consent. Is there a way to solve this?
consentsList.forEach((consent, index, array) => {
consent.consents.forEach((c) => {
Object.keys(c).forEach((key) => {
dd.content.push(
{
columns: [
{
text: `${key}: `, style: 'text'
},
{
text: c[key], style: 'text'
}
]
}
);
});
});
Consents.push(consent);
if (index !== array.length - 1) {
dd.content.push({
margin: [0, 0, 0, 5],
canvas: [{
type: 'line', x1: 0, y1: 5, x2: 595 - (2 * 40), y2: 5, lineWidth: 0.6
}]
});
}
});
I want to output the individual channels where channels is on the top of each entry
You can extract the titles using map. And concantanate them using join like this.
let value = "";
if(key === "channels"){
value = c[key].map(x => x.title).join(" ,");
}
else {
value = c[key];
}
columns: [
{
text: `${key}: `, style: 'text'
},
{
text: value, style: 'text'
}
]
I have written a piece of code, hope this is what you're looking for. It is not optimized, try to optimize at your will
var a = responseData;
a.forEach(function(items) {
var allChannels = [];
items.consents.forEach(function(innerItems){
innerItems.channels.forEach(function(value){
allChannels.push(value.title);
})
items.allChannels = allChannels.join();
})
});
console.log(a);
this picture is i use dTree.js created a family tree chart; there is two mother; but this is not I want;
this is my code
[
{
"name": "granddad",
"class": "man",
"textClass": "emphasis",
"marriages": [
{
"spouse": {
"name": "grandmother",
"class": "woman"
},
"children": [
{
"name": "aunt",
"class": "woman"
},
{
"name": "uncle",
"class": "man"
},
{
"name": "father",
"class": "man",
"marriages": [
{
"spouse": {
"name": "mother",
"class": "woman",
"id": 3
},
"children": [
{
"name": "sister",
"class": "woman"
},
{
"name": "me",
"class": "man"
},
{
"name": "brother",
"class": "man",
"hidden": true
}
]
}
]
}
]
}
]
},
{
"name": "grandfather",
"class": "man",
"textClass": "emphasis",
"marriages": [
{
"spouse": {
"name": "grandmother",
"class": "woman"
},
"children": [
{
"name": "mother",
"class": "woman",
"id": "3"
},
{
"name": "aunt",
"class": "woman"
}
]
}
]
}
]
<script>
var data_json = '/admin/test/json';
treeJson = d3.json(data_json, function (error, treeData) {
dTree.init(treeData, {
target: "#graph",
debug: true,
height: 800,
width: 1200,
callbacks: {
nodeClick: function (name, extra) {
console.log(name);
}
}
});
});
i want to create a chart like this : there is only one mother marry to father;
https://i.stack.imgur.com/db8I3.jpg
how can I do it?
How can i bind my child data in one column?
I want to write "Technology,Economy,Life" in same column and same row. But i think i need to loop in "Category". How can i do this, any idea?
My Data:
{
"ParentId": "00000000-0000-0000-0000-000000000000",
"Title": null,
"UserGroupModel": null,
"EntityAccessData": [
{
"EntityTitle": "User",
"Access": {
"Id": "59d0c6f7-8f93-497a-854d-bdd4a42ade94",
"Title": "Can Delete"
},
"Category": [
{
"Id": "00000000-0000-0000-0000-000000000000",
"Title": "Technology"
},
{
"Id": "00000000-0000-0000-0000-000000000000",
"Title": "Economy"
},
{
"Id": "00000000-0000-0000-0000-000000000000",
"Title": "Life"
}
],
"HasAccess": true
},
{
"EntityTitle": "UserGroup",
"Access": {
"Id": "7c65be44-11b0-4cf4-9104-0ad999e7e280",
"Title": "Can Edit"
},
"Category": [
{
"Id": "00000000-0000-0000-0000-000000000000",
"Title": "Technology"
},
{
"Id": "00000000-0000-0000-0000-000000000000",
"Title": "Economy"
},
{
"Id": "00000000-0000-0000-0000-000000000000",
"Title": "Life"
}
],
"HasAccess": true
}
]
}
My Script:
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: "/getData" },
schema: {
data: "EntityAccessData"
},
group: [{
field: "EntityTitle"
}],
},
columns: [
{
field: "Access.Id",
title: "ID"
},
{
field: "Access.Title",
title: "Access title"
},
{
field: "HasAccess",
title: "has access"
},
{
field: "Category.Title", // ***wrong***
title: "Category"
},
]
});
Define the schema as follow:
schema: {
data : "EntityAccessData",
model: {
CategoryTitle: function () {
var category = [];
$.each(this.Category, function(idx, elem) {
category.push(elem.Title);
});
return category.join(",");
}
}
},
Where I add an additional field CategoryTitle that is the result of joining the Title of the Category array and then define the column as:
{
field: "CategoryTitle()",
title: "Category"
}