i want make cascade filter in Angular Js with ng-options
i have html
<div class="selection">
<div class="form-group">
<label for="size" class="col-sm-2 control-label">{{'logSize' | translate}}</label>
<div class="col-sm-10">
<select id="size" class="form-control" ng-model="logbook.size" ng-options="size as size.name | translate for size in versions track by size.id"></select>
</div>
</div>
<div class="form-group">
<label for="pages" class="col-sm-2 control-label">{{'logSize' | translate}}</label>
<div class="col-sm-10">
<select id="pages" class="form-control" ng-model="logbook.pages" ng-options="pages as pages.name | translate for pages in logbook.size.pages track by pages.id"></select>
</div>
</div>
<div class="form-group">
<label id="typeof" for="logSize" class="col-sm-2 control-label">{{'logSize' | translate}}</label>
<div class="col-sm-10">
<select id="typeof" class="form-control" ng-model="logbook.typeofsiding" ng-options="typeofsiding as typeofsiding.name | translate for typeofsiding in logbook.pages.typeofsiding track by typeofsiding.id"></select>
</div>
</div>
<div class="form-group">
<label for="terms" class="col-sm-2 control-label">{{'logSize' | translate}}</label>
<div class="col-sm-10">
<select id="terms" class="form-control" ng-model="logbook.terms" ng-options="terms as terms.name | translate for terms in logbook.typeofsiding.terms track by terms.id"></select>
</div>
</div>
</div>
and js
$scope.versions = [
{
id: "20cm",
name: "20 cm",
pages: [
{
id: "doublesided",
name: "Double-sided",
typeofsiding: [
{
name: "Two-side",
id: "twoside",
terms: [
{
name: "QR",
id: "QR"
},
{
name: "Text",
id: "Text"
},
{
name: "Link",
id: "Link"
}]
}
]
},
{
id: "onesided",
name: "One-sided",
typeofsiding: [
{
name: "none",
id: "none",
terms: [
{
name: "QR",
id: "QR"
},
{
name: "Text",
id: "Text"
},
{
name: "Link",
id: "Link"
}]
}
]
}]
},
{
id: "15cm",
name: "15 cm",
pages: [
{
id: "doublesided",
name: "Double-sided",
typeofsiding: [
{
name: "Two-side",
id: "twoside",
terms: [
{
name: "QR",
id: "QR"
},
{
name: "Text",
id: "Text"
},
{
name: "Link",
id: "Link"
}]
}
]
},
{
id: "onesided",
name: "One-sided",
typeofsiding: [
{
name: "none",
id: "none",
terms: [
{
name: "QR",
id: "QR"
},
{
name: "Link",
id: "Link"
}]
}
]
}]
},
{
id: "10cm",
name: "10 cm",
pages: [
{
id: "doublesided",
name: "Double-sided",
typeofsiding: [
{
name: "fold",
id: "fold",
terms: [
{
name: "QR",
id: "QR"
},
{
name: "Text",
id: "Text"
},
{
name: "Link",
id: "Link"
}]
},
{
name: "Two-side",
id: "twoside",
terms: [
{
name: "QR",
id: "QR"
},
{
name: "Text",
id: "Text"
},
{
name: "Link",
id: "Link"
}]
}
]
},
{
id: "onesided",
name: "One-sided",
typeofsiding: [
{
name: "none",
id: "none",
terms: [
{
name: "Link",
id: "Link"
}]
}
]
}]
},
{
id: "5cm",
name: "5 cm",
pages: [
{
id: "doublesided",
name: "Double-sided",
typeofsiding: [
{
name: "fold",
id: "fold",
terms: [
{
name: "QR",
id: "QR"
},
{
name: "Link",
id: "Link"
}]
},
{
name: "Two-side",
id: "twoside",
terms: [
{
name: "QR",
id: "QR"
},
{
name: "Link",
id: "Link"
}]
}
]
},
{
id: "onesided",
name: "One-sided",
typeofsiding: [
{
name: "none",
id: "none",
terms: [
{
name: "Link",
id: "Link"
}]
}
]
}]
}];
when i use ng-option without track by it perfect but i need my id values.
When i use track by the selects don't refresh and don't work properly.
Please help me. I spend whole day at this problem.
Related
Is there a way in vue-good-table to show dropdown where-ever the data type is array?
Rows given below:
[
{
name: "test",
fqdn: "test",
SystemCustodianId: "test",
SystemCustodianName: "test",
freqency: ["Weekly", "Monthly", "Bi-Weekly", "Twice Monthly"],
},
{
name: "test",
fqdn: "test",
SystemCustodianId: "test",
SystemCustodianName: "test",
freqency: ["Weekly", "Monthly", "Bi-Weekly", "Twice Monthly"],
},
]
Columns given below:
[
{
label: "NAME",
field: "name",
},
{
label: "Platform Name",
field: "fqdn",
},
{
label: "System Custodian",
field: "SystemCustodianName",
},
{
label: "System Custodian ID",
field: "SystemCustodianId",
},
{
label: "Frequency",
field: "frequency",
}
]
you need to use the table-row slot.
Here is the code
<template>
<div id="app">
<vue-good-table :columns="columns" :rows="rows">
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field == 'freqency'">
<span style="font-weight: bold; color: blue">
<select>
<option
v-for="(val, index) in props.formattedRow.freqency"
:value="val"
:key="props.column.field + ' ' + index"
>
{{ val }}
</option>
</select>
{{ props.row.age }}
</span>
</span>
<span v-else>
{{ props.formattedRow[props.column.field] }}
</span>
</template>
</vue-good-table>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
columns: [
{
label: "NAME",
field: "name",
},
{
label: "Platform Name",
field: "fqdn",
},
{
label: "System Custodian",
field: "SystemCustodianName",
},
{
label: "System Custodian ID",
field: "SystemCustodianId",
},
{
label: "Frequency",
field: "freqency",
},
],
rows: [
{
name: "test",
fqdn: "test",
SystemCustodianId: "test",
SystemCustodianName: "test",
freqency: ["Weekly", "Monthly", "Bi-Weekly", "Twice Monthly"],
},
{
name: "test",
fqdn: "test",
SystemCustodianId: "test",
SystemCustodianName: "test",
freqency: ["Weekly", "Monthly", "Bi-Weekly", "Twice Monthly"],
},
],
};
},
};
</script>
Working sandbox
Can you help me please to flat this tree?
I have tried a few things and it didn't work.
I would like to get the fastest way(Algorithm).
const source = [
{
item: { id: 1, name: "item name", code: "1d4g4" },
children: [
{
item: { id: 2, name: "item name 2", code: "1d4g4" },
children: [
{
item: { id: 2, name: "item name 2", code: "1d4g4" },
children: [
{
item: { id: 3, name: "item name 2", code: "1d4g4" },
children: [
{ item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] },
{ item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] },
{ item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] },
],
},
],
},
],
},
],
},
];
This is result that i expect to have:
{ id: 1, name: 'item name', code: '1d4g4' },
{ id: 2, name: 'item name 2', code: '1d4g4' },
{ id: 2, name: 'item name 2', code: '1d4g4' },
{ id: 3, name: 'item name 2', code: '1d4g4' },
{ id: 4, name: 'item name 2', code: '1d4g4' },
{ id: 4, name: 'item name 2', code: '1d4g4' },
{ id: 4, name: 'item name 2', code: '1d4g4' }
]```
You could take Array#flatMap and a callback which calls itself.
const
flat = ({ item, children = [] }) => [item, ...children.flatMap(flat)],
data = [{ item: { id: 1, name: "item name", code: "1d4g4" }, children: [{ item: { id: 2, name: "item name 2", code: "1d4g4" }, children: [{ item: { id: 2, name: "item name 2", code: "1d4g4" }, children: [{ item: { id: 3, name: "item name 2", code: "1d4g4" }, children: [{ item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] }, { item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] }, { item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] }] }] }] }] }],
result = data.flatMap(flat);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
After fixing your syntax to be actually valid JavaScript, you'll need a recursive function:
function flatten(destArray, nodeList) {
nodeList.forEach((node) => {
destArray.push(node.item);
flatten(destArray, node.children || []);
});
}
const source = [
{
item: { id: 1, name: "item name", code: "1d4g4" },
children: [
{
item: { id: 2, name: "item name 2", code: "1d4g4" },
children: [
{
item: { id: 2, name: "item name 2", code: "1d4g4" },
children: [
{
item: { id: 3, name: "item name 2", code: "1d4g4" },
children: [
{ item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] },
{ item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] },
{ item: { id: 4, name: "item name 2", code: "1d4g4" }, children: [] },
],
},
],
},
],
},
],
},
];
const dest = [];
flatten(dest, source);
console.log(dest);
outputs
[
{ id: 1, name: 'item name', code: '1d4g4' },
{ id: 2, name: 'item name 2', code: '1d4g4' },
{ id: 2, name: 'item name 2', code: '1d4g4' },
{ id: 3, name: 'item name 2', code: '1d4g4' },
{ id: 4, name: 'item name 2', code: '1d4g4' },
{ id: 4, name: 'item name 2', code: '1d4g4' },
{ id: 4, name: 'item name 2', code: '1d4g4' }
]
You could write an internal visit method to handle traversing the tree and adding items to an internal results list.
Note: Make sure your JS/JSON data is structured correctly.
const tree = [{
item: {id: 1, name: "item name", code: "1d4g4"},
children: [{
item: {id: 2, name: "item name 2", code: "1d4g4"},
children: [{
item: {id: 2, name: "item name 2", code: "1d4g4"},
children: [{
item: {id: 3, name: "item name 2", code: "1d4g4"},
children:[
{item: {id: 4, name: "item name 2", code: "1d4g4"}, children: []},
{item: {id: 4, name: "item name 2", code: "1d4g4"}, children: []},
{item: {id: 4, name: "item name 2", code: "1d4g4"}, children: []},
]
}]
}]
}]
}];
const treeToList = (tree, results = []) => {
const visit = ({ item, children = [] }, res) => {
if (item) res.push(item);
children.forEach(child => visit(child, res));
}
visit({ children: tree }, results);
return results;
}
console.log(treeToList(tree));
.as-console-wrapper { top: 0; max-height: 100% !important; }
const flatten = (data) => data.map(({ children }) => ([...flatten(children)]));
Your current code does traverse the whole tree, but never actually extracts item from the data. Another issue is that you currently use map, which means the resulting value will always have the same amount of elements as the initial array. Use flatMap to increase or reduce the amount of elements in the array.
Changing your code as little as possible it might look like this:
const flatten = (data) => data.flatMap(({item, children}) => ([item, ...flatten(children)]));
const flatten = (data) => data.flatMap(({item, children}) => ([item, ...flatten(children)]));
const data = [{
item: {id: 1, name: "item name", code: "1d4g4"},
children: [{
item: {id: 2, name: "item name 2", code: "1d4g4"},
children: [{
item: {id: 2, name: "item name 2", code: "1d4g4"},
children: [{
item: {id: 3, name: "item name 2", code: "1d4g4"},
children:[
{item: {id: 4, name: "item name 2", code: "1d4g4"}, children: []},
{item: {id: 4, name: "item name 2", code: "1d4g4"}, children: []},
{item: {id: 4, name: "item name 2", code: "1d4g4"}, children: []},
]
}]
}]
}]
}];
console.log(flatten(data));
if (CarrotSearchFoamTree.supported) {
var foamtree = new CarrotSearchFoamTree({
id: "visualization",
dataObject: {
groups: [
{ id: "1", label: "Group 1", groups: [
{ id: "1.1", label: "Group 1.1" },
{ id: "1.2", label: "Group 1.2" }
]},
{ id: "2", label: "Group 2", groups: [
{ id: "2.1", label: "Group 2.1" },
{ id: "2.2", label: "Group 2.2" }
]},
{ id: "3", label: "Group 3", groups: [
{ id: "3.1", label: "Group 3.1" },
{ id: "3.2", label: "Group 3.2" }
]},
{ id: "4", label: "Group 4", groups: [
{ id: "4.1", label: "Group 4.1" },
{ id: "4.2", label: "Group 4.2" }
]},
{ id: "5", label: "Group 5", groups: [
{ id: "5.1", label: "Group 5.1" },
{ id: "5.2", label: "Group 5.2" }
]}
]
}
});
} else {
console.log("Visualization not supported.");
}
carrot search issue in carrotsearch.foamtree.js :Uncaught FoamTree: element has zero dimensions: 522 x 0.
this is a sample code for carrotsearch any help will be appreciated
you need to define an HTML element in which FoamTree should be embedded. The element must have non-zero dimensions.
see example:
<html>
<body>
<div id="visualization" style="width: 800px; height: 600px"></div>
<script src="https://get.carrotsearch.com/foamtree/demo/carrotsearch.foamtree.js">
</script>
<script>
window.addEventListener("load", function() {
var foamtree = new CarrotSearchFoamTree({
id: "visualization",
dataObject: {
groups: [
{ label: "Your", weight: 1.0 },
{ label: "First", weight: 3.0 },
{ label: "FoamTree", weight: 2.0 },
{ label: "Visualization", weight: 4.0 }
]
}
});
});
</script>
I have a object array
list Format like this
var myFormData = [
{
id: 1,
name: "first name",
type: "test",
root: "/myfolder"
},
{
id: 3,
name: "your name",
type: "test 2",
root: "/myfolder2"
}, {
id: 4,
name: "your test",
type: "test 3",
root: "/myfold",
child: [
{
id: 5,
name: "name",
type: "testf",
root: "/myfoldertr"
},
{
id: 6,
name: "first-name",
type: "test",
root: "/myfolderoot",
child: [
{
id: 8,
name: "sub first name",
type: "test5",
root: "/myfoldertest"
}, {
id: 9,
name: "first name root",
type: "test9",
root: "/myfolder",
child: [
{
id: 10,
name: "normal first name",
type: "test5",
root: "/myfoldertest"
}, {
id: 11,
name: "last first name",
type: "test5",
root: "/myfoldertest"
}
]
},
{
id: 12,
name: "name Name",
type: "testf",
root: "/myfoldertr"
}
]
},
{
id: 7,
name: "first name",
type: "test",
root: "/myfolder"
}
]
}]
This format is created with database so i cant conform that the datas are exact.Some times they have child or not.
I want to delete one object if id is equal to given id (get from programatically) Eg: i want to delete id=11.
The key point is that you have to look deep into the target array. This code snippet sample used the recursive call to deep into the nested array.
function deleteObj(target, id) {
if (!Array.isArray(target)) return;
target.forEach(function(item, index) {
if (item.child) {
target = deleteObj(item.child, id);
}
if (item.id === 11) {
target.splice(index, 1);
}
});
}
var myFormData = [{
id: 1,
name: "first name",
type: "test",
root: "/myfolder"
},
{
id: 3,
name: "your name",
type: "test 2",
root: "/myfolder2"
}, {
id: 4,
name: "your test",
type: "test 3",
root: "/myfold",
child: [{
id: 5,
name: "name",
type: "testf",
root: "/myfoldertr"
},
{
id: 6,
name: "first-name",
type: "test",
root: "/myfolderoot",
child: [{
id: 8,
name: "sub first name",
type: "test5",
root: "/myfoldertest"
}, {
id: 9,
name: "first name root",
type: "test9",
root: "/myfolder",
child: [{
id: 10,
name: "normal first name",
type: "test5",
root: "/myfoldertest"
}, {
id: 11,
name: "last first name",
type: "test5",
root: "/myfoldertest"
}]
},
{
id: 12,
name: "name Name",
type: "testf",
root: "/myfoldertr"
}
]
},
{
id: 7,
name: "first name",
type: "test",
root: "/myfolder"
}
]
}
];
function deleteObj(target, id) {
if (!Array.isArray(target)) return;
target.forEach(function(item, index) {
if (item.child) {
target = deleteObj(item.child, id);
}
if (item.id === 11) {
target.splice(index, 1);
}
});
}
deleteObj(myFormData, 11);
console.log(myFormData);
guys i have this json
var menu = [{
name: 'Computers',
children: [{
name: 'Notebook'
children: [{
name: 'Apple'
}, {
name: 'Windows'
}]
}, {
name: Tablets
children: [{
name: 'Apple'
}, {
name: 'Android'
}, {
name: 'Windows'
}]
}]
}, {
name: 'Phones',
children: [{
name: 'Android'
children: [{
name: 'Samsung'
}, {
name: 'Nokia'
}, {
name: 'Lenovo'
}]
}, {
name: 'Windows Phones'
children: [{
name: 'Microsoft'
}, {
name: 'Nokia'
}]
}]
}, {
name: 'Cameras',
children: [{
name: 'Digital'
children: [{
name: 'Nikon'
}, {
name: 'Fuji'
}]
}, {
name: 'DSLR'
children: [{
name: 'Canon'
}, {
name: 'Nikon'
}]
}]
}];
it says it is not valid json ... so how to make it valid json ??
any help would be appreciated ... thanks a lot
btw i am beginner so please help me
any suggestions ?? thanks again :)
You have some missing commas, where noted and a suposed to be a string without delimiters in your object literal.
var menu = [{
name: 'Computers',
children: [{
name: 'Notebook', // missing ,
children: [{
name: 'Apple'
}, {
name: 'Windows'
}]
}, {
name: 'Tablets', // missing string delimiter and comma
children: [{
name: 'Apple'
}, {
name: 'Android'
}, {
name: 'Windows'
}]
}]
}, {
name: 'Phones',
children: [{
name: 'Android', // missing ,
children: [{
name: 'Samsung'
}, {
name: 'Nokia'
}, {
name: 'Lenovo'
}]
}, {
name: 'Windows Phones', // missing ,
children: [{
name: 'Microsoft'
}, {
name: 'Nokia'
}]
}]
}, {
name: 'Cameras',
children: [{
name: 'Digital', // missing ,
children: [{
name: 'Nikon'
}, {
name: 'Fuji'
}]
}, {
name: 'DSLR', // missing ,
children: [{
name: 'Canon'
}, {
name: 'Nikon'
}]
}]
}];
console.log(menu);
.as-console-wrapper { max-height: 100% !important; top: 0; }
There are two problems
After name property values, comma is missing (at various places)
Tablets is not in quotes
Correct syntax would be.
var menu = [{
name: 'Computers',
children: [{
name: 'Notebook',
children: [{
name: 'Apple'
}, {
name: 'Windows'
}]
}, {
name: 'Tablets',
children: [{
name: 'Apple'
}, {
name: 'Android'
}, {
name: 'Windows'
}]
}]
}, {
name: 'Phones',
children: [{
name: 'Android',
children: [{
name: 'Samsung'
}, {
name: 'Nokia'
}, {
name: 'Lenovo'
}]
}, {
name: 'Windows Phones',
children: [{
name: 'Microsoft'
}, {
name: 'Nokia'
}]
}]
}, {
name: 'Cameras',
children: [{
name: 'Digital',
children: [{
name: 'Nikon'
}, {
name: 'Fuji'
}]
}, {
name: 'DSLR',
children: [{
name: 'Canon'
}, {
name: 'Nikon'
}]
}]
}];
You can copy your code is chrome's console to see where the error is.
you need to put double quotes on key an value like this "key" : "value"
[{
"name": "Computers",
"children": [{
"name": "Notebook",
"children": [{
"name": "Apple"
}, {
"name": "Windows"
}]
}, {
"name": "Tablets",
"children": [{
"name": "Apple"
}, {
"name": "Android"
}, {
"name": "Windows"
}]
}]
}]
And after name property values, comma is missing (at various places)
key and value should be wrapped by double quotes
copy paste the code validate here https://jsonformatter.curiousconcept.com/
[
{
"name":"Computers",
"children":[
{
"name":"Notebook",
"children":[
{
"name":"Apple"
},
{
"name":"Windows"
}
]
},
{
"name":"Tablets",
"children":[
{
"name":"Apple"
},
{
"name":"Android"
},
{
"name":"Windows"
}
]
}
]
},
{
"name":"Phones",
"children":[
{
"name":"Android",
"children":[
{
"name":"Samsung"
},
{
"name":"Nokia"
},
{
"name":"Lenovo"
}
]
},
{
"name":"Windows Phones",
"children":[
{
"name":"Microsoft"
},
{
"name":"Nokia"
}
]
}
]
},
{
"name":"Cameras",
"children":[
{
"name":"Digital",
"children":[
{
"name":"Nikon"
},
{
"name":"Fuji"
}
]
},
{
"name":"DSLR",
"children":[
{
"name":"Canon"
},
{
"name":"Nikon"
}
]
}
]
}
]