Unable to Bind Json to TreeTable Js using knockout.js - javascript

I am using the TreeTable plugin:
http://ludo.cubicphuse.nl/jquery-treetable/#examples
<table id="example-basic">
<thead>
<tr>
<th>Name</th> <th>Status</th> <th>id</th>
</tr>
</thead>
<tbody data-bind="foreach: TreeView">
<tr data-bind="attr: { 'data-tt-id': id ,'data-tt-parent-id': Parentid}">
<td data-bind="text: Name"></td>
<td data-bind="text: Status"></td>
<td data-bind="text: id"></td>
</tr>
</tbody>
</table>
<button type="button" name="test" onclick="test()"></button>
The below works if I HardCode as is and the result is shown as a nicely formatted TreeView.
ko.applyBindings({ TreeView: [{ "id": "1", "Parentid": null, "Name": "test1", "Status": "OK" }, { "id": "2", "Parentid": 1, "Name": "test2", "Status": "OK" }] }
But, I am getting the value from the server(put the value obtained from server in "str" variable) and doing the binding as below:
str = '[{ "id": "1", "Parentid": null, "Name": "parent1", "Status": "OK" }, { "id": "2", "Parentid": 1, "Name": "child1", "Status": "OK" }]',
json = JSON.stringify(eval("(" + str + ")")),
ko.applyBindings({ TreeView: json})
function reload() {
//ko.applyBindings({ TreeView: {} });
str = '[{ "id": "1", "Parentid": null, "Name": "parent1", "Status": "OK" }]'
json = JSON.parse(str),
ko.applyBindings({ TreeView: json})
I get the following error:
Error: Unable to parse bindings.
Message: ReferenceError: 'id' is undefined;
Bindings value: attr: { 'data-tt-id': id ,'data-tt-parent-id': Parentid}
Can someone please help. Thanks!
The Json object returned had to be converted to type string and then parsed. This resolved the above issue
New Issue:
I was just playing around with the treetable plugin. I wish to reload the data from server on button click(or ajax call every 5 sec). The data is duplicated.

You are stringifying the JSON instead of parsing it, and using eval() when you don't need it. Instead, just use JSON.parse().
var str = '[{ "id": "1", "Parentid": null, "Name": "parent1", "Status": "OK" }, { "id": "2", "Parentid": 1, "Name": "child1", "Status": "OK" }]';
var json = JSON.parse(str);
ko.applyBindings({ TreeView: json });

Related

How to manipulate two json array ojects using javascript

This function
public function groups_priviledges($user_id = NULL){
$data['groups'] = $this->priviledges_model->admin_groups();
$data['member'] = $this->priviledges_model->empAdminGroup($user_id);
echo json_encode($data);
}
has returned this json array on my browser
{
"groups": [
{
"id": "1",
"description": "Human Resources",
"added": "2018-06-21 16:27:20",
"status": "1"
},
{
"id": "2",
"description": "Purchasing",
"added": "2018-06-21 16:31:47",
"status": "1"
},
{
"id": "4",
"description": "Warehouse",
"added": "2018-06-21 16:31:47",
"status": "1"
}
],
"member": [
{
"id": "41",
"admin_group_id": "4",
"employee_id": "16"
}
]
}
I am having a serious challenge using ajax to list all the groups, and a checkbox checked only if a member belongs to a particular group.
My html currently looks likr this
<table class="table table-striped">
<thead>
<tr>
<th> Priviledge </th>
<th> Options </th>
</tr>
</thead>
<tbody id="priviledges"></tbody>
</table>
And my ajax... I'm so lost here, doesn't return anything
<script>
$(function(){
priviledges();
function priviledges(){
$.ajax({
type: 'ajax',
url: '<?php echo base_url() ?>users/groups_priviledges/<?php echo $tuser['employeeId'] ?>',
async: false,
dataType: 'json',
success: function(data){
var html = '';
var groups;
for(groups=0; groups<data.length; i++){
html += '<tr>'+
'<td>'+data[groups].description+'</td>'+
'<td>'+'<label class="check"><input type="checkbox" name="group[]" class="icheckbox" checked=""/>'+
'</tr>';
}
$('#priviledges').html(html);
},error: function(){
alert('Could not retrieve data');
}
});
}
});
Thanks all in anticipation.
Your problem is that data is an object which contains an array (stored within the "groups" property of the object). However when you write data.length and data[groups] you're treating data itself as if it were the array, which it isn't.
The solution is to refer to the groups property of the data object and then refer to a specific array item within that:
var data = {
"groups": [{
"id": "1",
"description": "Human Resources",
"added": "2018-06-21 16:27:20",
"status": "1"
},
{
"id": "2",
"description": "Purchasing",
"added": "2018-06-21 16:31:47",
"status": "1"
},
{
"id": "4",
"description": "Warehouse",
"added": "2018-06-21 16:31:47",
"status": "1"
}
],
"member": {
"id": "41",
"admin_group_ids": ["1", "4"],
"employee_id": "16"
}
};
var html = '';
for (var count = 0; count < data.groups.length; count++) {
html += '<tr>' +
'<td>' + data.groups[count].description + '</td>' +
'<td>' + '<label class="check"><input type="checkbox" name="group[]" class="icheckbox"';
for (var ids = 0; ids < data.member.admin_group_ids.length; ids++) {
if (data.member.admin_group_ids[ids] == data.groups[count].id) {
html += "checked=checked";
break;
}
}
html += '/></tr>';
}
$('#privileges').html(html);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th> Privilege </th>
<th> Options </th>
</tr>
</thead>
<tbody id="privileges"></tbody>
</table>
N.B. In the above I have also:
corrected the spelling of "privilege"
corrected the error in the definition of the for loop (i was not defined)
changed the loop variable name to "count", so it's not confused with the "groups" property in the data.
assumed that the JSON structure of "member" will now be changed to make sense when the member is in more than one admin group, and will be like this: "member": { "id": "41", "admin_group_ids": ["1", "4"], "employee_id": "16" } (see comments below)

React native json response

I am trying to print json responce in via console.log ,below is my json response but i want each element to print one by one like user.id or product.name
{
"user": [{
"id": "1",
"name": "User 1"
}, {
"id": "2",
"name": "User 2"
}],
"user_pictures": false,
"products": [{
"id": "1",
"name": "test abc"
}, {
"id": "2",
"name": "test abc 1"
}],
"purpose": ""
}
I am trying like this:
responseData.map((item)=>{
console.log(item.user.id)
})
but error is show in console
TypeError: responseData.map is not a function
responseData is the response in json when i call my fetch method
You can access id like this input.user[0].id.
Below is working code:
let input = {
"user": [{
"id": "1",
"name": "User 1"
}, {
"id": "2",
"name": "User 2"
}],
"user_pictures": false,
"products": [{
"id": "1",
"name": "test abc"
}, {
"id": "2",
"name": "test abc 1"
}],
"purpose": ""
};
console.log(input.user[0].id);
responseData is an object... you cant map over an object... responseData has 4 properties... users, user_pictures, products, purpose... of which, responseData.users and responseData.products are arrays that can be mapped over. user_pictures is a boolean and purpose is a string.
Its Works like this:
JSON.parse(responseData).user.map((item)=>{
console.log(item.id)
})
Thank guys

Default value in angular js select from Server

Here is the Scenario
I am getting Data from server in this form
$scope.data=[
{"name":"xyz","status":"pending"},
{"name":"abc","status":"completed"},
{"name":"pqr","status":"completed"}
]
This Data is Seprate GET call for different status
$scope.statusValues=[
{"statusName":"pending","id":"1"},
{"statusName":"completed","id":"2"},
{"statusName":"cancelled","id":"3"},
{"statusName":"custom","id":"4"}
]
In HTML:-
<div ng-repeat="t in data">{{t.name}}</div>
How to Display t.status value inside Select method with more $scope.statusValues
Use key value pair for combine them.
I have created plunker it may helpful.
Plunker
You can use ng-options to display all the status and ng-model to bind to your data status
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data = [{
"name": "ABC",
"statusId": "1",
"status": "completed"
}, {
"name": "XYZ",
"statusId": "2",
"status": "pending"
}, {
"name": "PQR",
"statusId": "3",
"status": "assigned"
}];
$scope.statusValues = [{
"statusId": "1",
"status": "completed"
}, {
"statusId": "2",
"status": "pending"
}, {
"statusId": "3",
"status": "assigned"
}, {
"statusId": "4",
"status": "cancelled"
}, {
"statusId": "5",
"status": "customstatus"
}, {
"statusId": "6",
"status": "customstatus2"
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="t in data">
{{t.name}}
<select ng-model="t.status" ng-options="s.status as s.status for s in statusValues"></select>
</div>
</div>
EDIT
Update arrays as discussed in comments

How to convert table data into Json format in Angular

I am trying to convert data present in an HTML table into JSON link. I'm getting undefined values in object.
HTML code:
<table colspan="2" border="1">
<tr>
<th>Source</th>
<th>Destination</th
</tr>
<tr ng-repeat="col in MapCol">
<td>
<select ng-model="col.value" ng-init="col.value=MainData.headers[$index].header">
<option ng-selected="{{head.header == col.value}}" ng-repeat="head in MainData.headers">{{head.header}}
</option>
</select>
</td>
<td>{{col.ColName}}</td>
</tr>
</table>
<br/>
<button ng-click="map();">Map</button>
Controller code:
var app = angular.module("ShrTest", []);
app.controller("Test1", function ($scope) {
$scope.MainData = { "name": "1-06082015185338.txt", "headers": [{ "header": "Name" }, { "header": "Age" }, { "header": "Address" }], "records": [{ "Name": "Paul", "Age": "23", "Address": "1115 W Franklin" }, { "Name": "Bessy the Cow", "Age": "5", "Address": "Big Farm Way" }, { "Name": "Zeke", "Age": "45", "Address": "W Main St" }] };
$scope.MapCol = [{ "ColName": "Col1" }, { "ColName": "Col2" }, { "ColName": "Col3" }];
$scope.map=function(){
$scope.fields=[{"source":$scope.value,"destination":$scope.ColName}];
console.log(" $scope.fields..", $scope.fields);
}
});
JS
$scope.map=function(){
$scope.fields = [];
for(i in $scope.MapCol){
var obj = $scope.MapCol[i]; $scope.fields.push({"source":obj.value,"destination":obj.ColName})
}
console.log($scope.fields);
}
Here is Modified fiddle:
Demo Here
I hope this will help you.

Sorting is not working in ngTable when using nested json

I have created an application in angularjs with ngTable, The application is working fine but sorting is not working. My json structured is nested, but values are coming correctly with the table
Can anyone please tell me some solution for this
My code is as given below
JSFiddle
html
<div ng-controller="IndexCtrl">
<table border="1" ng-table="mytable">
<tbody ng-repeat="peop in peoples">
<tr ng-repeat="people in peop">
<td sortable="'id'" data-title="'Id'">{{people.id}}</td>
<td sortable="'desig'" data-title="'Desig'">{{people.desig}}</td>
<td sortable="'name'" data-title="'Name'">{{people.name}}</td>
<td sortable="'place'" data-title="'Place'">{{people.place}}</td>
</tr>
</tbody>
</table>
</div>
script
var app = angular.module('app', ['ngTable']);
app.controller('IndexCtrl', function ($scope, $filter, ngTableParams) {
$scope.peoples = {
"ime123": [{"id": 145,
"desig": "doctor",
"name": "Manu",
"place": "ABCD"
}],
"ime148": [{"id": 148,
"desig": "engineer",
"name": "John",
"place": "POLK"
},
{
"id": 150,
"desig": "scientist",
"name": "Mary",
"place": "USE"
}]
};
$scope.mytable = new ngTableParams({
sorting: {
name: 'desc'
}
}, {
getData: function($defer, params) {
$scope.peoples = $filter('orderBy')( $scope.peoples, params.orderBy());
$defer.resolve( $scope.peoples);
}
});
});
The way you work with nested array in ngtable is not suitable ,in your case you can make array one dim again and allow directive to groupping
html
<table border="1" ng-table="mytable">
<tbody ng-repeat="peop in $groups">
<tr ng-repeat="people in peop.data">
<td sortable="id" data-title="'Id'">{{people.id}}</td>
<td sortable="desig" data-title="'Desig'">{{people.desig}}</td>
<td sortable="name" data-title="'Name'">{{people.name}}</td>
<td sortable="place" data-title="'Place'">{{people.place}}</td>
</tr>
</tbody>
</table>
contoller
$scope.mytable = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
name: 'desc'
}
}, {
total: peoples.length,
groupBy:'group',
getData: function ($defer, params) {
peoples = $filter('orderBy')(peoples, params.orderBy());
$defer.resolve(peoples);
}
});
data
var peoples = [{
"id": 145,
"desig": "doctor",
"name": "Manu",
"place": "ABCD",
"group": "ime123" //for grouping
}, {
"id": 148,
"desig": "engineer",
"name": "John",
"place": "POLK",
"group": "ime148" //for grouping
}, {
"id": 150,
"desig": "scientist",
"name": "Mary",
"place": "USE",
"group": "ime148" //for grouping
}];
here almost working jsfiddle.
default desc not working yet (ver 0.3.1)

Categories