I am trying to build a table dynamic table using Icanhazjs (Mustache). The table data is always being rendered outside the table tag and thus does not put my data in the table.
You can see the output in my JSfiddle Here
Here is my HTML:
<script id="display_row" type="text/html">
<tr>
<td>{{data1}}</td>
<td>{{data2}}</td>
<td>{{data3}}</td>
</tr>
</script>
<h1>Icanhazjs & Mustache Table Test</h1>
<table border="1">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<div id="table_list"></div>
</tbody>
</table>
And here is the Javascript:
$(document).ready(function () {
var user_data, user;
user_data = [
{
data1: "foo1",
data2: "foo2",
data3: "foo3"
},
{
data1: "foo4",
data2: "foo5",
data3: "foo6"
}
];
for (i=0; i<user_data.length; i++) {
user = ich.display_row(user_data[i]);
$('#table_list').append(user);
}
});
Can anybody explain why the data is not being rendered within my html table at the <div id="table_list"></div> point. The icanhazjs is working but just put the rendered html before my table.
Instead of
<tbody>
<div id="table_list"></div>
</tbody>
Try this:
<tbody id="table_list">
</tbody>
JSFiddle:
http://jsfiddle.net/sapy7/1/
Related
How can I get v-for to display table data in the same form as the following html:
<tr>
<th scope="col">Name</th>
<th scope="col">Price</th>
<th scope="col">Product ID</th>
<th></th>
</tr>
Currently I am using the following vue v-for code(below) but it is adding the table header(th) one below another. I would like the table header to display side by side.
<tr v-for="(column, index) in schema" :key="index">
<th scope="col">{{column}}</th>
</tr>
You just need to place v-for on the element you want to repeat, not it's parent.
For loop should be put on <th></th>
<tr>
<th v-for="(column, index) in schema" :key="index">{{column}}</th>
</tr>
Here is the official vue doc for list rendering: https://v2.vuejs.org/v2/guide/list.html
bind grid header and data separately.
<template>
<table>
<thead>
<tr>
<th v-for="(header,index) in gridHeader" :key="index">
{{header.displayName}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(data, index) in gridData" :key="index" >
<td>
{{data.name}}
</td>
<td>{{data.age}}
</td>
<td>{{data.place}}
</td>
</tr>
</tbody>
</table>
</template>
<script lang="ts">
import Vue from 'vue';
export default class HelloWorld extends Vue {
private gridHeader: object[] = [
{name: 'Name', displayName: 'Name'},
{name: 'Age', displayName: 'Age'},
{name: 'Place', displayName: 'Place'}
];
private gridData: any =[{name:'Tony',age:'31',place:'India'},
{name:'Linju',age:'26',place:'India'},
{name:'Nysa',age:'12',place:'India'}];
};
</script>
<style scoped>
</style>
I am an absolute newbie to angularjs and i have been making my hands dirty from the past 3 days. Now, the requirement is to convert a json string from the rest end point to tabular data. Here is the code i am trying.
$scope.getDataCatalogue = function(){
$http.get('http://api.geosvc.com/rest/US/84606/nearby?apikey=485a35b6b9544134b70af52867292071&d=20&pt=PostalCode&format=json')
.success(function(data, status, headers, config){
//do something with your response
$scope = data;
})
.error(function(error){
console.log("not world");
});
}
$scope.getDataCatalogue = function(){
alert('getDataCatalogue');
}
Now,how can i convert the json to grid from the data. Is this the right way to approach the problem.
If you have a fixed structure coming out of the data then you can simply make use of ng-repeat to iterate through the object(data) and display it on your pre-created table. Fiddle
Example shown below:
Considering this is your object which your assigning to a $scope variable name people. $scope.people = data;
[
{
id: 1,
firstName: "Peter",
lastName: "Jhons"
},
{
id: 2,
firstName: "David",
lastName: "Bowie"
}
]
In your controller:
.success(function(data, status) {
$scope.people = data;
});
In your HTML :
<table>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr ng-repeat="person in people">
<td>{{person.id}}</td>
<td>{{person.firstName}}</td>
<td>{{person.lastName}}</td>
</tr>
</table>
Either do it yourself in the view:
<table>
<thead>
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data">
<td>{{row.attribute1}}</td>
<td>{{row.attribute2}}</td>
</tr>
</tbody>
</table>
Or use a library like ui-grid to render a more advanced table.
I need to vertically populate data cells with array.
This is a simple html table
<table>
<th>Name</th>
<th>Value</th>
</table>
Existing table:
Name Value
X
Y
Expected output:
Name Value
X 54
Y 48
I need to fill the data cells for value. I have calculated values for it and stored in array. How to populate the values using angularjs?
You want to use ngRepeat to add a new row for each element in your list. See the docs here for examples of how to use this directive.
<tr ng-repeat="row in data">
<td>{{row.name}}</td>
<td>{{row.value}}</td>
</tr>
Use directive for this. Look
var app = angular.module("App", []);
app.controller("AppController", function($scope) {
$scope.data = [1, 2, 3, 4, 5];
}).directive('indexItemTable', function($timeout) {
return {
link: function(scope, element, attrs) {
var data = scope.data;
angular.element(element).find("td").each(function(index, item){
console.log(item)
angular.element(this).parent().append('<td>' + data[index] + '</td>');
});
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="App" ng-controller="AppController">
<table index-item-table>
<thead>
<th>Name</th>
<th>Value</th>
</thead>
<tbody>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
<tr>
<td>D</td>
</tr>
<tr>
<td>E</td>
</tr>
</tbody>
</table>
</div>
Im trying to figure out if its possible to get the width of the parent my directive is going to be placed in.
Keeping it simple I have some directive my-directive which Im placing inside of a table:
<table>
<tr>
<td><my-directive ..../></td>
<td><my-directive ..../></td>
<td><my-directive ..../></td>
<td><my-directive ..../></td>
</tr>
</table>
And inside my-directive Iwant to know the width of my parent <td> so I could display my content properly - with more or less data according to the width
Can it be done?
Update:
My HTML code:
<table class="table">
<thead>
<tr>
<td width="5%"></td>
<td width="5%"></td>
<td width="85%"></td>
</tr>
<tr>
<th>Col 5</th>
<th>Col 5</th>
<th>Col C 85</th>
</tr>
</thead>
<tbody>
<tr>
<td><trim value="Some value a"></trim></td>
<td>Some value b</td>
<td>Some value c</td>
</tr>
</tbody>
</table>
My directive:
angular.module('ui.directives', []).directive('trim', function() {
return {
restrict: 'E',
scope: {
value: '#'
},
template: "{{value | limitTo:6}}"
};
}
);
From within the template I can limit by a constant I define (or pass by, from outside. But I want to change that, to know myself, from within that directive if I should trim the text or not
Yes you can get the parent element using angular's jqlite, a subset of jquery in the link function. The link function is to provide the behavior to your directive, in this function you can get the directive element and modify it at run time according to your need.
angular.directive('myDirective', [function($document) {
return {
restrict:'E',
link: function(scope, element, attribute) {
var parent = element.parent();// will give an array
var parentWidth = parent[0].offsetWidth;
//modify/truncate your attribute.value depending upon the parentWidth.
}
}
}]);
I was having some trouble with the Angular ng-repeat directive. The attached is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController as me" >
<button ng-click="myData.doClick(item, $event)">Send AJAX Request</button>
<br/>
<tr>
<th>Test Suite Name</th>
<th>Test Suite Key</th>
<th>Date</th>
<th>Start Time</th>
<th>End Time</th>
<th>Total Tests</th>
<th>Passed</th>
<th>Failed</th>
<th>Quarantined</th>
</tr>
<tr ng-repeat="data in myData">
<th>{{data.name}}</th>
<th>{{data.plan_key}}</th>
<th>{{data.start_date}}</th>
<th>{{data.start_time}}</th>
<th>{{data.end_time}}</th>
<th>{{data.total_test}}</th>
<th>{{data.test_passed}}</th>
<th>{{data.test_failed}}</th>
<th>{{data.test_quarantined}}</th>
</tr>
<h1>Data from server: {{myData[0].name}}</h1>
</div>
<script>
var $received_data;
var test = angular.module("myapp", []);
// .config(['$httpProvider', function($httpProvider) {
// $httpProvider.defaults.useXDomain = true;
// delete $httpProvider.defaults.headers.common['X-Requested-With'];
// }
// ])
test.controller("MyController", function($scope, $http) {
$scope.myData = {};
$scope.myData.doClick = function(item, event) {
var responsePromise = $http.get("http://127.0.0.1:5000/home");
responsePromise.success(function(data, status, headers, config) {
console.log("ok")
$scope.myData = data.result;
//$scope.received_data = data.reault;
});
responsePromise.error(function(data, status, headers, config) {
alert("error?");
});
}
} );
</script>
</body>
</html>
So basically it gets a list of JSON and I want it to be printed in table form.
I am trying to do it with ng-repeat with tr ng-repeat="data in myData" but it somehow didn't show up.
However, the <h1>Data from server: {{myData[0].name}}</h1> did get printed out correctly.
I am new to AngularJS so I suppose it must be something really stupid mistake that I have made.
Thank you
I think there are a couple problems here.
1 your HTML structure should be reworked. Ideally it should look like this:
<table>
<thead>
<tr>
<th>Name</th>
<th>Start Date</th>
<th>Start Time</th>
<th>End Time</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in myData.result">
<td>{{data.name}}</td>
<td>{{data.start_date}}</td>
<td>{{data.start_time}}</td>
<td>{{data.end_time}}</td>
</tr>
</tbody>
</table>
2 This refers to #blowsies comment. You are using the same $scope.myData to handle the function & the data. Which is fine, but you're missing a level of nesting. Currently you have a $scope.myData.doClick() which loads the data from the server. And then you assign it at $scope.myData which is most likely having a problem. Instead, assign it to $scope.myData.result` and change your HTML accordingly.
Working example