I want to show last object of each tab in default tab. Now my interface is like this: tab[0] last object is {"id": 8, "status": 1}, tab[1] last object is {"id": 8, "status": 1} but it is wrong. I want it to look like this: tab[0] last object is {"id": 5, "status": 0}, tab[1]last object is{"id": 8, "status": 1}`.
Image of my wrong interface: [1]: https://i.stack.imgur.com/MhvKX.png
My json data like this:
[
{
"tab":[
[
{"id": 1, "status": 1},
{"id": 2, "status": 1},
{"id": 3, "status": 1},
],
[
{"id": 4, "status": 1},
],
[
{"id": 5, "status": 0}
]
]
},
{
"tab":[
[
{"id": 6, "status": 1},
{ "id": 7, "status": 1},
],
[
{"id": 8, "status": 1}
]
]
},
];
My js:
for(let i = 0; i < $scope.data.length; i++) {
for(let j = 0; j < $scope.data[i].tab.length; j++) {
$scope.selecttab = $scope.data[i].tab[j];
}
}
$scope.getTab = function(obj) {
$scope.selecttab = obj;
};
My html
<div ng-repeat="obj in data">
<ul class="nav nav-tabs">
<li ng-class="{ active: selecttab == obj1 }" ng-repeat="obj1 in obj.tab track by $index">
<a href ng-click="getTab(obj1)">{{ $index }}</a>
</li>
</ul>
<div class="tab-content" ng-repeat="obj1 in selecttab">
ID: {{obj1.id}}<br>
Status : {{obj1.status}}
</div>
</div>
Can someone please help in identifying what am i doing wrong?
You have to correct your last tab selection logic.
Since selectedTab is specific to each node in your data array, I parsed the array and added a selectedTab property to each data node which holds its first.
Working fiddle
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.data = [
{
"tab": [
[{ "id": 1, "status": 1 }, { "id": 2, "status": 1 }, { "id": 3, "status": 1 }],
[{ "id": 4, "status": 1 }],
[{ "id": 5, "status": 0 }]
]
},
{
"tab": [
[{ "id": 6, "status": 1 }, { "id": 7, "status": 1 }],
[{ "id": 8, "status": 1 }]
]
},
];
for (let i = 0; i < $scope.data.length; i++) {
$scope.data[i].selectedTab = $scope.data[i].tab[$scope.data[i].tab.length - 1];
}
$scope.setSelectedTab = function (node, tab) {
tab.selectedTab = node;
};
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="obj in data">
<ul class="nav nav-tabs">
<li ng-class="{ active: obj1[0] && obj.selectedTab == obj1 }" ng-repeat="obj1 in obj.tab track by $index">
<a href ng-click="setSelectedTab(obj1, obj)">{{ $index }} </a>
</li>
</ul>
<div class="tab-content" ng-repeat="tab in obj.selectedTab track by $index">
ID: {{tab.id}}<br>
Status : {{tab.status}}
</div>
</div>
</div>
Related
I have two arrays in one array item and inside one i only need to show 10 items
my array is like this
this.groupedData = [{
"title": true,
"name": "related",
"list": [{
"id": 30,
"text": "CIGA",
"related": true,
"list": [
]
},
{
"id": 34,
"text": "GAP",
"related": true,
"list": [
]
},
{
"id": 35,
"text": "LEVIS",
"related": true,
"list": [
]
},
{
"id": 36,
"text": "MANGO",
"related": true,
"list": [
]
},
{
"id": 37,
"text": "Nigel",
"related": true,
"list": [
]
},
{
"Id": 39,
"text": "Test",
"related": true,
"list": [
]
}
],
"selected": false,
"disabled": false
},
{
"title": true,
"name": "unrelated",
"list": [{
"id": 29,
"text": "Burger",
"related": false,
"list": [
]
}
],
"selected": false,
"disabled": false
}
]
i am looping list array and need to set only 10 items in one <Ul> tag list items in both arrays and need to loop 10 item list <ul> according to that optionColumnLength has number of columns need to show and that array looks like [0, 1, 2] html is look like this
<div *ngFor="let colindex of optionColumnLength">
<ul class="item2">
<div *ngFor="let group of groupedData let j = index;">
<label>{{group.name}}</label>
<li *ngFor="let item of group.list | slice: colindex * 10: colindex * 10 + 10 | multiSelectFilter:filter; let i = index;" (click)="onItemClick($event,item)" class="multiselect-item-checkbox">
<div class="dd-list-row">
<div class="dd-list-block">
<input type="checkbox" aria-label="multiselect-item" [class.disabled-selected]="disabled"
[checked]="isSelected(item)" [disabled]="disabled || (isLimitSelectionReached() && !isSelected(item)) || item.isDisabled" />
<div>{{item.text}}</div>
</div>
</div>
</li>
<li class='no-data' *ngIf="_data.length == 0">
<h5>{{_settings.noDataAvailablePlaceholderText}}</h5>
</li>
</div>
</ul>
</div>
this is the current view and i only need to show 10 items in one column and if more than that it need to show in another 10 item column
current view image
I have an nested json object in which I need to remove empty values and create new json which should contain only data objects.
json file:
myData = [{
"id": 1,
"values": [{
"value": ""
}]
}, {
"id": 2,
"values": [{
"value": 213
}]
}, {
"id": 3,
"values": [{
"value": ""
}, {
"value": ""
}, {
"value": "abc"
}]
},{
"id": 4,
"values": [{
"value": ""
}]
},{
"id": 33,
"values": [{
"value": "d"
}]
}];
Output should be:
myNewData = [{
"id": 2,
"values": [{
"value": 213
}]
}, {
"id": 3,
"values": [{
"value": "abc"
}]
},{
"id": 33,
"values": [{
"value": "d"
}]
}];
So far I have created this:
angular.module('myapp',[])
.controller('test',function($scope){
$scope.myData = [{
"id": 1,
"values": [{
"value": ""
}]
}, {
"id": 2,
"values": [{
"value": 213
}]
}, {
"id": 3,
"values": [{
"value": ""
}, {
"value": ""
}, {
"value": "abc"
}]
},{
"id": 4,
"values": [{
"value": ""
}]
},{
"id": 33,
"values": [{
"value": "d"
}]
}];
})
.filter('filterData',function(){
return function(data) {
var dataToBePushed = [];
data.forEach(function(resultData){
if(resultData.values && resultData.values != "")
dataToBePushed.push(resultData);
});
return dataToBePushed;
}
});
Html:
<div ng-app="myapp">
<div ng-controller="test">
<div ng-repeat="data in myData | filterData">
Id:{{ data.id }}
</br>
Values: {{ data.values }}
</div>
</div>
</div>
I am not able to access and remove value inside values object. Right now i am simply showing the data using ng-repeat but i need to create a new json file for that.
You work with the array in your AngularJS Controller doing Array.prototype.map() and Array.prototype.filter(). Map all objects doing a filter to exclude the items with empty values item.values.value, and than a filter to get the array elements that have values with value:
var myData = [{"id": 1,"values": [{ "value": ""}]}, {"id": 2,"values": [{"value": 213}]}, {"id": 3,"values": [{"value": ""}, {"value": ""}, {"value": "abc"}]}, {"id": 4,"values": [{"value": ""}]}, {"id": 33,"values": [{"value": "d"}]}],
myDataFiltered = myData
.map(function (item) {
item.values = item.values.filter(function (itemValue) {
return itemValue.value;
});
return item;
})
.filter(function (item) {
return item.values.length;
});
console.log(myDataFiltered);
.as-console-wrapper { max-height: 100% !important; top: 0; }
ES6:
myDataFiltered = myData
.map(item => {
item.values = item.values.filter(itemValue => itemValue.value);
return item;
})
.filter(item => item.values.length);
Here you go with a multiple for-loop.
myData = [{
"id": 1,
"values": [{
"value": ""
}]
}, {
"id": 2,
"values": [{
"value": 213
}]
}, {
"id": 3,
"values": [{
"value": ""
}, {
"value": ""
}, {
"value": "abc"
}]
},{
"id": 4,
"values": [{
"value": ""
}]
},{
"id": 33,
"values": [{
"value": "d"
}]
}];
function clone(obj){ return JSON.parse(JSON.stringify(obj));}
var result = [];
for(var i = 0; i < myData.length; i++){
var current = clone(myData[i]);
for(var j = 0; j < current.values.length; j++){
if(current.values[j].value == null || current.values[j].value == ""){
current.values.splice(j, 1);
j--;
}
}
if(current.values.length > 0) result.push(current);
}
console.log(myData);
console.log(result);
If you want to delete them completely, you can iterate over the array like this;
angular.forEach($scope.myData, function(data){
for(var i=0; i < data.values.length; i++){
if(data.values[i] !== ""){
break;
}
delete data;
}
});
The if statement checks all values in the array, and breaks if it's not equal to "", otherwise if all values are = "" it deletes the object.
Hope it helps!
Here's a recursive function to do the job.
This will only work if myData is an array and the value inside it or its children is a collection of object.
var myData = [{"id": 1, "values": [{"value": ""}] }, {"id": 2, "values": [{"value": 213 }] }, {"id": 3, "values": [{"value": ""}, {"value": ""}, {"value": "abc"}] },{"id": 4, "values": [{"value": ""}] },{"id": 6, "values": ""},{"id": 33, "values": [{"value": "d"}] }];
function removeEmptyValues (arr) {
var res = false;
/* Iterate the array */
for (var i = 0; i < arr.length; i++) {
/* Get the object reference in the array */
var obj = arr[i];
/* Iterate the object based on its key */
for (var key in obj) {
/* Ensure the object has the key or in the prototype chain */
if (obj.hasOwnProperty(key)) {
/* So, the object has the key. And we want to check if the object property has a value or not */
if (!obj[key]) {
/*
If it has no value (null, undefined, or empty string) in the property, then remove the whole object,
And reduce `i` by 1, to do the re-checking
*/
arr.splice(i--, 1);
/* Amd set whether the removal occurance by setting it to res (result), which we will use for the next recursive function */
res = true;
/* And get out from the loop */
break;
}
/* So, the object has a value. Let's check whether it's an array or not */
if (Array.isArray(obj[key])) {
/* Kay.. it's an array. Let's see if it has anything in it */
if (!obj[key].length) {
/* There's nothing in it !! Remove the whole object again */
arr.splice(i--, 1);
/* Amd set whether the removal occurance by setting it to res (result), which we will use for the next recursive function */
res = true;
/* Yes.. gets out of the loop */
break;
}
/*
Now this is where `res` is being used.
If there's something removed, we want to re-do the checking of the whole object
*/
if ( removeEmptyValues(obj[key]) ) {
/* Something has been removed, re-do the checking */
i--;
}
}
}
}
}
return res;
}
removeEmptyValues (myData);
Try this:
var myData = [{"id": 1,"values": [{ "value": ""}]}, {"id": 2,"values": [{"value": 213}]}, {"id": 3,"values": [{"value": ""}, {"value": ""}, {"value": "abc"}]}, {"id": 4,"values": [{"value": ""}]}, {"id": 33,"values": [{"value": "d"}]}]
let result=[],p=[];
myData.filter(el => {
p=[];
el.values.filter(k => {k.value != '' ? p.push({value : k.value}) : null});
if(p.length) result.push({id : el.id, values : p})
})
console.log('result', result);
You are going to right way but need some more operation like this :
angular.module('myapp',[])
.controller('test',function($scope){
$scope.myData = [{
"id": 1,
"values": [{
"value": ""
}]
}, {
"id": 2,
"values": [{
"value": 213
}]
}, {
"id": 3,
"values": [{
"value": ""
}, {
"value": ""
}, {
"value": "abc"
}]
},{
"id": 4,
"values": [{
"value": ""
}]
},{
"id": 33,
"values": [{
"value": "d"
}]
}];
})
.filter('filterData',function($filter){
return function(data) {
var dataToBePushed = [];
data.forEach(function(resultData){
var newValues=resultData;
var hasData=$filter('filter')(resultData.values,{value:'!'},true);
if(resultData.values && resultData.values.length>0 && hasData.length>0){
newValues.values=hasData;
dataToBePushed.push(newValues);
}
});
debugger;
return dataToBePushed;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-controller="test">
<div ng-repeat="data in myData | filterData:''">
Id:{{ data.id }}
</br>
Values: {{ data.values }}
</div>
</div>
</div>
Here is the Json message:
{"title": {"default":"hello 3", "position":[2,12,0]},
"description":{"default":"description hello 3", "position":[1,12,0]},
"option": [{"default":"1","position":[3,12,0]}, {"default":"2", "position":[0,12,0]}]
},
I am new to angularjs, I am trying to load the json message in ascending order according to the position first element by angularjs and print them in html. ("0" means load firstly, so on so far. )
Could someone help me on that? Thanks in advance!
Take a look at this
Working demo
html
<div ng-controller="MyCtrl">
<ul ng-repeat="value in data">Default:{{value.title.default}}
<li ng-repeat="pos1 in value.title.position|orderBy:orderByValue">{{pos1}}</li>Default:{{value.description.default}}
<li ng-repeat="pos2 in value.description.position|orderBy:orderByValue">{{pos2}}</li>
<li ng-repeat="val in value.option">Default:{{value.option[$index].default}}
<div ng-repeat="pos3 in val.position|orderBy:orderByValue">{{pos3}}</div>
</li>
</ul>
</div>
script
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function ($scope) {
$scope.orderByValue = function (value) {
return value;
};
$scope.data = [{
"title": {
"default": "hello 3",
"position": [2, 12, 0]
},
"description": {
"default": "description hello 3",
"position": [1, 12, 0]
},
"option": [{
"default": "1",
"position": [3, 12, 0]
}, {
"default": "2",
"position": [0, 12, 0]
}]
}];
});
How can I populate Kendo UI grid with nested JSON.
I mean my JSON is like
var myJson:
[{"oneType":[
{"id":1,"name":"John Doe"},
{"id":2,"name":"Don Joeh"}
]},
{"othertype":"working"},
{"otherstuff":"xyz"}]
}];
and I want Kendo UI Grid with columns as Id, Name, OtherType and OtherStuff.
Thanks in advance.!
For complex JSON structures, you might use schema.parse
var grid = $("#grid").kendoGrid({
dataSource : {
data : [
{
"oneType": [
{"id": 1, "name": "John Doe"},
{"id": 2, "name": "Don Joeh"}
]
},
{"othertype": "working"},
{"otherstuff": "xyz"}
],
pageSize: 10,
schema : {
parse : function(d) {
for (var i = 0; i < d.length; i++) {
if (d[i].oneType) {
return d[i].oneType;
}
}
return [];
}
}
}
}).data("kendoGrid");
If you slightly change your JSON to:
{
"oneType" : [
{"id": 1, "name": "John Doe"},
{"id": 2, "name": "Don Joeh"}
],
"othertype" : "working",
"otherstuff": "xyz"
}
then you can use:
var grid = $("#grid").kendoGrid({
dataSource: {
data : {
"oneType" : [
{"id": 1, "name": "John Doe"},
{"id": 2, "name": "Don Joeh"}
],
"othertype" : "working",
"otherstuff": "xyz"
},
pageSize: 10,
schema : {
data: "oneType"
}
}
}).data("kendoGrid");
I just wanted to submit another answer based on OnaBai's.
http://jsfiddle.net/L6LwW/17/
The HTML:
<script id="message-template" type="text/x-kendo-template">
#for (var i = 0; i
< ddl.length; i++) {# <li><span>#=ddl[i].value#</li>
#}#
</script>
<div id="grid"></div>
The JS:
var grid = $("#grid").kendoGrid({
dataSource: {
data: [
[{
"id": 1,
"name": "John Doe",
"ddl": [{
"key": 1,
"value": "hello"
}, {
"key": 1,
"value": "hello"
}]
}, {
"id": 2,
"name": "Don Joeh",
"ddl": [{
"key": 1,
"value": "hello"
}, {
"key": 1,
"value": "hello"
}]
}]
],
pageSize: 10,
schema: {
parse: function(d) {
for (var i = 0; i < d.length; i++) {
if (d[i]) {
return d[i];
}
}
return [];
}
}
},
columns: [{
field: "id",
title: "ID"
}, {
field: "name",
title: "Name"
}, {
field: "ddl",
title: "DDL",
width: "180px",
template: kendo.template($("#message-template").html())
} //template: "#=ddl.value#" }
]
}).data("kendoGrid");
I have a list of records and i convert it to json:
[ { "id": 1, "name": "A", "parentID": 0, "hasItems": "true" },
{ "id": 2, "name": "B", "parentID": 1, "hasItems": "false" },
{ "id": 3, "name": "C", "parentID": 1, "hasItems": "false" },
{ "id": 4, "name": "D", "parentID": 0, "hasItems": "false" }
]
Now i want create a KendoTreeView from above json data:
<div id="treeview55"></div>
<script>
dtSrc = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "http://localhost:1132/Discontent/GetTreeNodes",
dataType: "json"
}
},
,
schema:{
model: {
id: 'id',
parentId: 'parentID',
name: 'name'
}
}
});
$("#treeview55").kendoTreeView({
dataSource: dtSrc,
dataTextField: "name",
dataValueField: 'id',
});
Result:
A
B
C
D
My Expected Result:
> A
B
C
D
My question:
Is there any way to create a KendoTreeView with above expected result (cascade children and parents) by above json data???
Refer below part of code will hep you to solve your problem
<div id="tree"></div>
<script>
var flatData = [ { "id": 1, "text": "A", "parent": 0, "hasItems": "true" },
{ "id": 2, "text": "B", "parent": 1, "hasItems": "false" },
{ "id": 3, "text": "C", "parent": 1, "hasItems": "false" },
{ "id": 4, "text": "D", "parent": 0, "hasItems": "false" }
];
function processTable(data, idField, foreignKey, rootLevel) {
var hash = {};
for (var i = 0; i < data.length; i++) {
var item = data[i];
var id = item[idField];
var parentId = item[foreignKey];
hash[id] = hash[id] || [];
hash[parentId] = hash[parentId] || [];
item.items = hash[id];
hash[parentId].push(item);
}
return hash[rootLevel];
}
// the tree for visualizing data
$("#tree").kendoTreeView({
dataSource: processTable(flatData, "id", "parent", 0),
loadOnDemand: false
});
</script>
i just prepare a sample based on your sample data, i hopes it helps to you.
Find answer from this jsbin
At this moment, no. The Kendo UI TreeView works with hierarchical data, and the above is a flattened hierarchy. You need to process the data it so that it becomes hierarchical, like shown in this excellent answer by Jon Skeet.