I need to use angularjs datatables for showing JSON data gets from API, but my JSON have child object, and I can't get this data to table.
here is my json
{
"1009": {
"id": 1009,
"serial_number": "1009-U",
"campaigns": {
"52": {
"id": 52,
"name": "testSLOV"
},
"47": {
"id": 47,
"name": "IMA PODJELE"
},
"44": {
"id": 44,
"name": "TEST DUPLO"
},
"30": {
"id": 30,
"name": "ag3"
},
"26": {
"id": 26,
"name": "fdgdfsg"
}
}
},
"1051": {
"id": 1051,
"serial_number": "1051-U",
"campaigns": {
"52": {
"id": 52,
"name": "testSLOV"
},
"43": {
"id": 43,
"name": "test weather"
},
"39": {
"id": 39,
"name": "default2"
},
"37": {
"id": 37,
"name": "ag5"
}
}
},
"1500": {
"id": 1500,
"serial_number": "1500-U",
"campaigns": {
"51": {
"id": 51,
"name": "ag10"
}
}
}
}
Here is my ctrl
var vm = this;
vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('ajax', {
url: 'url',
type: 'GET'
})
.withDataProp('data')
.withOption('processing', true)
.withOption('responsive', true)
.withPaginationType('full_numbers')
vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('Id'),
DTColumnBuilder.newColumn('type').withTitle($translate('TYPE')),
DTColumnBuilder.newColumn('city').withTitle($translate('CITY')),
]
I try add this in ajax,
dataSrc: function ( d ) {
angular.forEach(d, function(k, v){
console.log(k);
return k;
})
},
In console i get data, but don't know how to get data from child to table in view.
Here is htm
<table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover" width="100%"></table>
I also try in newColumn add data.id but nothing happened.
DTColumnBuilder.newColumn('data.id').withTitle('Id'),
I get error in console
jquery.dataTables.min.js:48 Uncaught TypeError: Cannot read property 'length' of undefined
Related
[
{
"id": 1,
"title": "node1",
"nodes": [
{
"id": 11,
"title": "node1.1",
"nodess": [
{
"id": 111,
"title": "node1.1.1",
"nodes": []
}
]
},
{
"id": 12,
"title": "node1.2",
"nodes": []
}
]
},
{
"id": 2,
"title": "node2",
"nodrop": true,
"nodes": [
{
"id": 21,
"title": "node2.1",
"nodes": []
},
{
"id": 22,
"title": "node2.2",
"nodes": []
}
]
},
{
"id": 3,
"title": "node3",
"nodes": [
{
"id": 31,
"title": "node3.1",
"nodes": []
}
]
}
]
Fixed the above issue by writing a custom function in the ng-click event handler and in that function created the new nodes and pushed the data to that particular property....Example
var nodeData = scope.$modelValue.nodess[0];
nodeData.nodes.push({
id: scope.$modelValue.id+ '_' +1 * 10 + nodeData.nodes.length,
title:'test',
nodes: []
});
Use this awesome library, it has everything for nested json and tree that you need
https://github.com/wix/angular-tree-control
Example
<div id="treeview" treecontrol class="tree-classic"
tree-model="slides"
options="treeOptions"
selected-node="node"
on-selection="showSelected(node)"
filter-expression="node.children.length"
filter-comparator="comparator"
expanded-nodes="expandedNodes"
ng-click="">
<span>{{node.Title}}</span>
</div>
Controller Stuff
$scope.slides = [];
var treeOptions = {
nodeChildren: "children",
dirSelectable: false,
injectClasses: {
ul: "a1",
li: "a2",
liSelected: "a7",
iExpanded: "a3",
iCollapsed: "a4",
iLeaf: "a5",
label: "a6",
labelSelected: "a8"
},
isLeaf: function(node) {
return node.IsSlide;
},
allowDeselect: false
}
$scope.node = null; //select a by default node if you want
$scope.expandedNodes = []; //by default expand if you want
Check this JSFIDDLE out
I'm trying to implement treetable, using Laravel and Angular 4!
To achieve this task, after searching for good library supporting Treetable in Angular, I found, this library https://www.primefaces.org/primeng/#/treetable for my needs.
I have integrated everything and it looks fine so far.
The only problem is when I use my APIs to get data coming from my backend, the primifaces treetable, is not recognizing my json structure coming from Laravel Api. The reason is because the library supports a different structure of Json.
Bellow is the Json structure which Primifaces support.
{
"data":
[
{
"data":{
"name":"Documents",
"size":"75kb",
"type":"Folder"
},
"children":[
{
"data":{
"name":"Work",
"size":"55kb",
"type":"Folder"
},
"children":[
{
"data":{
"name":"Expenses.doc",
"size":"30kb",
"type":"Document"
}
},
{
"data":{
"name":"Resume.doc",
"size":"25kb",
"type":"Resume"
}
}
]
},
{
"data":{
"name":"Home",
"size":"20kb",
"type":"Folder"
},
"children":[
{
"data":{
"name":"Invoices",
"size":"20kb",
"type":"Text"
}
}
]
}
]
},
{
"data":{
"name":"Pictures",
"size":"150kb",
"type":"Folder"
},
"children":[
{
"data":{
"name":"barcelona.jpg",
"size":"90kb",
"type":"Picture"
}
},
{
"data":{
"name":"primeui.png",
"size":"30kb",
"type":"Picture"
}
},
{
"data":{
"name":"optimus.jpg",
"size":"30kb",
"type":"Picture"
}
}
]
}
]
}
And the json format which laravel returns from my apis looks like this.
{
"data": [
{
"uuid": 110,
"name": "Acuzyt Tablets",
"Parent_ID": 65,
"ContentStart_ID": 20026,
"children": [
{
"uuid": 275,
"name": "Hansenf",
"Parent_ID": 110,
"ContentStart_ID": 22608,
"children": []
}
]
},
{
"uuid": 111,
"name": "Pluserix",
"Parent_ID": 65,
"ContentStart_ID": 24050,
"children": [
{
"uuid": 276,
"name": "Manuel",
"Parent_ID": 111,
"ContentStart_ID": 22609,
"children": []
}
]
},
{
"uuid": 112,
"name": "Abbott - Vancomycin",
"Parent_ID": 65,
"ContentStart_ID": 19944,
"children": [
{
"uuid": 272,
"name": "Mozaicos",
"Parent_ID": 112,
"ContentStart_ID": 22605,
"children": []
}
]
},
{
"uuid": 113,
"name": "Abic Leucovorin Sol",
"Parent_ID": 65,
"ContentStart_ID": 19946,
"children": [
{
"uuid": 273,
"name": "Hansenm Mangole",
"Parent_ID": 113,
"ContentStart_ID": 22606,
"children": []
},
{
"uuid": 277,
"name": "Mangole",
"Parent_ID": 113,
"ContentStart_ID": 22610,
"children": []
}
]
},
{
"uuid": 114,
"name": "Abic Vincristine",
"Parent_ID": 65,
"ContentStart_ID": 19947,
"children": []
}
]
}
so when I use my Apis, Primifaces doesn't display the record value, I get undefined, on angular side.
The Laravel code which return my Apis look like this:
public function json(){
$page = $this->request->get('page',1);
$perPage = 5;
$projects = Project::find(65);
$childs = $projects->nestedProject($projects->uuid,$page, $perPage);
return response()->json(['data'=>$childs->toArray()],201);
}
And On Angular Side the Service looks like this.
getFileSystem(): any {
return this.http.get('http://apiurl/api/v1/treetable')
.toPromise()
.then(res => <TreeNode[]> res.json().data)
.then(data => { return data; });
}
And Component looks like this.
ngOnInit():void {
this.nodeService.getFileSystem().then(data => this.data = data);
let newdat = this.data;
console.log(newdat);
this.cols = [
{field: 'uuid', header: 'Uuid'},
{field: 'name',header: 'Name'},
{field: 'Parent_ID', header: 'ParentID'},
{field: 'ContentStart_ID', header: 'StartID'}
];
}
What I'm trying to achieve here is to get json format from Laravel Backend to be the same as the primifaces.
If you take a look at both json you'll find that the json from primifaces got data for each json object.
I'm assigned a task to get data using underscore js.
This is my JSON :
$scope.myData= {
"buslist":
{
"code":"1",
"message":"Success",
"fromStationCode":"71",
"searchResult": [
{
"arrivalTime": "17:00:00",
"availableSeats": "42",
"boardingPointDetails": [
{
"code": "1631",
"name": "Koyambedu",
"time": "09:30:00"
},
{
"code": "961296",
"name": "Nerkundram",
"time": "09:45:00"
}
]
},
{
"arrivalTime": "18:00:00",
"availableSeats": "32",
"boardingPointDetails": [
{
"code": "2084",
"name": "Adyar",
"time": "09:30:00"
},
{
"code": "961296",
"name": "Madurai",
"time": "09:45:00"
}
]
}
]
}
}
From this I want only "name" field. By doing this :
$scope.bdata = _.pluck($scope.myTest.buslist.searchResult, 'boardingPointDetails');
I got all "boardingPointDetails". The result looks like:
[ [
{
"code": "2084",
"name": "Adyar",
"time": "09:30:00"
},
{
"code": "961296",
"name": "Madurai",
"time": "09:45:00"
}
],[
{
"code": "1631",
"name": "Koyambedu",
"time": "09:30:00"
},
{
"code": "961296",
"name": "Nerkundram",
"time": "09:45:00"
}
],[
{
...
}
]
...
]
Help me to retrieve only "name" from this.
If you just want array of names like ['Koyambedu', 'Madurai'] then below code would work.
$scope.bdata = _.pluck($scope.myTest.buslist.searchResult, 'boardingPointDetails');
// Flatten the data.
$scope.flatbdata = _.flatten($scope.bdata, true);
$scope.flatbdata = $scope.flatbdata.filter(function(d){
return d != undefined && d.hasOwnProperty('name')
})
// map calls a provided callback function once for each element in an array, in order, and constructs a new array from the results
$scope.names = $scope.flatbdata.map(function(d){
return d.name;
});
Refer below links :
http://underscorejs.org/#flatten
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
If you just want the array of names, here it is:
$scope.bdata = _.pluck($scope.myTest.buslist.searchResult, 'boardingPointDetails');
var res= _.flatten($scope.bdata);
res=_.pluck(res,'name');
console.log(res);
var temp = _.pluck(_.flatten($scope.bdata),'name')
temp will have ["Koyambedu", "Nerkundram", "Adyar", "Madurai"]
Try this.
$scope = {}; // in real project you don't need this. it's just for snippet.
$scope.myData = {
"buslist": {
"code": "1",
"message": "Success",
"fromStationCode": "71",
"searchResult": [{
"arrivalTime": "17:00:00",
"availableSeats": "42",
"boardingPointDetails": [{
"code": "1631",
"name": "Koyambedu",
"time": "09:30:00"
}, {
"code": "961296",
"name": "Nerkundram",
"time": "09:45:00"
}]
}, {
"arrivalTime": "18:00:00",
"availableSeats": "32",
"boardingPointDetails": [{
"code": "2084",
"name": "Adyar",
"time": "09:30:00"
}, {
"code": "961296",
"name": "Madurai",
"time": "09:45:00"
}]
}]
}
};
$scope.names = _.chain($scope.myData.buslist.searchResult).pluck("boardingPointDetails").flatten(true).map(function(item) {
return item.name;
}).value();
console.log($scope.names);
<script src="http://underscorejs.ru/underscore-min.js"></script>
i have object value in JSON, within which it contains array.i am trying to group the subdocument but does not work. my plunk
The below is my controller code.
Controller
app.controller('MainCtrl', function($scope) {
$scope.list = {
"_id": "56c4758af801160e00d176e0",
"orderfood": [
{
"_id": "569d84f04834c10e003dff36",
"qty": "1",
"confirm": "placed",
"price": 125,
"name": "Paneer Tikka"
},
{
"_id": "569d869fff1fe20e00f8ba9b",
"qty": "1",
"confirm": "placed",
"price": 85,
"name": "Falooda"
},
{
"_id": "569d869fff1fe20e00f8ba9b",
"qty": "1",
"confirm": "placed",
"price": 85,
"name": "Falooda"
}
],
"title": "Status",
"created": "2016-02-17T13:28:42.226Z"
}
});
The below is my HTML code
HTML
<p ng-repeat="(key,value) in list.orderfood | groupBy:'name'">
{{key}}
</p>
my plunk
Dont know what you want your ouput to be but you need to do this with a custom function:
<div ng-app ng-controller="Main">
<div ng-repeat="list in itemsToFilter() | filter:filterNames">
<b>{{list.name}}</b>
<li ng-repeat="item in itemsToFilter() | filter: {name: list.name}">NAME: {{item.name}}- PRICE: {{item.price}}, etc...</li>
</div>
</div>
Then in your controller:
function Main($scope) {
$scope.list = {
"_id": "56c4758af801160e00d176e0",
"orderfood": [
{
"_id": "569d84f04834c10e003dff36",
"qty": "1",
"confirm": "placed",
"price": 125,
"name": "Paneer Tikka"
},
{
"_id": "569d869fff1fe20e00f8ba9b",
"qty": "1",
"confirm": "placed",
"price": 85,
"name": "Falooda"
},
{
"_id": "569d869fff1fe20e00f8ba9b",
"qty": "1",
"confirm": "placed",
"price": 85,
"name": "Falooda"
}
],
"title": "Status",
"created": "2016-02-17T13:28:42.226Z"
}
var indexedTeams = [];
$scope.itemsToFilter = function() {
indexedTeams = [];
return $scope.list.orderfood;
}
$scope.filterNames = function(item) {
var nameIsNew = indexedTeams.indexOf(item.name) == -1;
if (nameIsNew) {
indexedTeams.push(item.name);
}
return nameIsNew;
}
}
here is a link...js-fiddle exmple: http://jsfiddle.net/L6cQN/305/
After fighting with this for a couple of hours, I think I need to rephrase the question.
I have an object that contains and array of objects;
Playlist: [
{
"added_at": "2015-11-13T20:55:06Z",
"added_by": {
"external_urls": {
"spotify": "http://open.spotify.com/user/spotify_canada"
},
"href": "https://api.spotify.com/v1/users/spotify_canada",
"id": "spotify_canada",
"type": "user",
"uri": "spotify:user:spotify_canada"
},
"is_local": false,
"track": {
"album": {
"album_type": "album",
"available_markets": [
"CA",
"MX",
"US"
],
"external_urls": {
"spotify": "https://open.spotify.com/album/6Fr2rQkZ383FcMqFyT7yPr"
},
"href": "https://api.spotify.com/v1/albums/6Fr2rQkZ383FcMqFyT7yPr",
"id": "6Fr2rQkZ383FcMqFyT7yPr",
"images": [
{
"height": 640,
"url": "https://i.scdn.co/image/8b47495ce0c4a341f7196f70bcf4361e6257c1a0",
"width": 640
},
{
"height": 300,
"url": "https://i.scdn.co/image/da1e8958b6260e832660d0c5f3c80e9569c388c8",
"width": 300
},
{
"height": 64,
"url": "https://i.scdn.co/image/478dbfd0e579dee7392707b9a6848faff0cdfefd",
"width": 64
}
],
"name": "Purpose (Deluxe)",
"type": "album",
"uri": "spotify:album:6Fr2rQkZ383FcMqFyT7yPr"
},
"artists": [
{
"external_urls": {
"spotify": "https://open.spotify.com/artist/1uNFoZAHBGtllmzznpCI3s"
},
"href": "https://api.spotify.com/v1/artists/1uNFoZAHBGtllmzznpCI3s",
"id": "1uNFoZAHBGtllmzznpCI3s",
"name": "Justin Bieber",
"type": "artist",
"uri": "spotify:artist:1uNFoZAHBGtllmzznpCI3s"
}
],
"available_markets": [
"CA",
"MX",
"US"
],
"disc_number": 1,
"duration_ms": 205680,
"explicit": false,
"external_ids": {
"isrc": "USUM71511919"
},
"external_urls": {
"spotify": "https://open.spotify.com/track/4B0JvthVoAAuygILe3n4Bs"
},
"href": "https://api.spotify.com/v1/tracks/4B0JvthVoAAuygILe3n4Bs",
"id": "4B0JvthVoAAuygILe3n4Bs",
"name": "What Do You Mean?",
"popularity": 93,
"preview_url": "https://p.scdn.co/mp3-preview/13da79dc4803f65092d583f6e3bdf1fc4d8344e5",
"track_number": 3,
"type": "track",
"uri": "spotify:track:4B0JvthVoAAuygILe3n4Bs"
}
},
In side of each of these objects is another object I am trying to assign to scope.
So this - playlist {items [ {track {name: songname} } ] }
How do I go about assigning the track.name to scope?
Thanks!
I'm not sure if you just have a typo but why are you assigning your blank array to data.items instead of the other way around?
$scope.playListInfo = [];
$scope.getPlayList = function() {
Spotify.getPlaylistTracks('spotify_canada', '7ndCD5pklOTcrTcv4DErmI')
.then(function(data) {
var i = 0;
for(i; i < data.items.length; i++) {
var dataToKeep = {};
dataToKeep.name = data.items[i].track.name;
dataToKeep.artist = data.items[i].track.artist;
$scope.playListInfo[i] = dataToKeep;
}
});
};
Apparently, I don't have sufficient points to comment. So, I am creating this post.
The JSON data has items and not item. Also, I think you'd have to create a $scope.playlistTrack array outside the function.
$scope.playlistTrack = [];
$scope.getPlayList = function () {
Spotify.getPlaylistTracks('spotify_canada', '7ndCD5pklOTcrTcv4DErmI')
.then(function (datas) {
angular.forEach(datas, function(data){
data.items = $scope.playlistTrack;
});
});
};
Hope this answer helps.