how can I create an html table from a json file, which I do not know the number of columns or the number of rows (the number of row ng-repeat enough),
this json file is editable and the number of column and row change
You would need to load your JSON file into your app with either the $http or $resource service. This is best done in a service, which you would inject whereever you need your data.
this.getJson = function() { // real json get
$http.get('/api/GetJson').then(function(data) {
return data;
});
};
I created a small plunker with a service that holds my fake getJson function which returns the json data with the rows. Then I injected the service into my HomeController and put the rows on the $scope.
$scope.rows = loadJsonService.getFakeJson().rows;
When the rows are on the $scope, you only have to use the ngRepeat directive to create your table structure.
<table class="table table-striped">
<tr class="row" ng-repeat="row in rows">
<th>row {{$index + 1}}</th>
<td class="column" ng-repeat="column in row.column">{{column}}</td>
</tr>
</table>
Related
i managed to retrieve non-null json data from backend and i want to display this in table form, can anyone help me, how to display json data like below into table in angular?
{"2020-12-17":
{"tanggal": "2020-12-17", "kurs_jual": "10781.030615606935", "kurs_beli": "10673.605766653045"},
"2020-12-18":
{"tanggal": "2020-12-18", "kurs_jual": "10790.980751228397", "kurs_beli": "10682.253685484742"}
}
this is the html code to display the json data in the table
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Date</th>
<th>Sell</th>
<th>Buy</th>
</tr>
</thead>
<tbody>
<tr *ngFor="forecast_table let data">
<td>{{data['tanggal'].tanggal}}</td>
<td>{{data['tanggal'].kurs_jual}}</td>
<td>{{data['tanggal'].kurs_beli}}</td>
</tr>
</tbody>
</table>
If you have the data in JSON format you could parse the data first. This will parse the json to a js Object.
const obj = JSON.parse(jsonData);
Then you could extract the entries that you want to display in your table.
const rows = Object.values(obj);
Finally use the variable rows to iterate in your table.
<tr *ngFor="let data of rows">
<td>{{data.tanggal}}</td>
<td>{{data.kurs_jual}}</td>
<td>{{data.kurs_beli}}</td>
</tr>
Note that if you got the json response with HTTPClient and the responseType is json, you dont need to do the parsing. The response will be already parsed and you could use it directly as a js Object.
I have a large table in WordPress, I need to change the order of the columns, but I have to do it manually every time, when I need. Is there any plugin out there, in which all table loads up and I drag and drop the whole column from there as my choice?
The website is here
Based on your question, i can give you a demo to show you how to move forward with your requirements.
Please check this UPDATED FIDDLE. As you requested we are using Dragtable js.
Once sorting is completed we checks each row of the table finds each column of the respective row and create a json tree structure.
Html
<table id="sort_table">
<thead>
<tr>
<th></th>
<th class="draggable">Col1</th>
<th class="draggable">Col2</th>
<th class="draggable">Col3</th>
<th class="draggable">Col4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row1</td>
<td>Data11</td>
<td>Data12</td>
<td>Data13</td>
<td>Data14</td>
</tr>
<tr>
<td>Row2</td>
<td>Data21</td>
<td>Data22</td>
<td>Data23</td>
<td>Data24</td>
</tr>
<tr>
<td>Row3</td>
<td>Data31</td>
<td>Data32</td>
<td>Data33</td>
<td>Data34</td>
</tr>
<tr>
<td>Row4</td>
<td>Data41</td>
<td>Data42</td>
<td>Data43</td>
<td>Data44</td>
</tr>
</tbody>
</table>
JS (UPDATED)
$(document).ready(function() {
$('#sort_table').dragtable({
dragaccept: '.draggable',
beforeStop: function() {
var tree = {};
var rows = [];
$('#sort_table tr').each(function() {
var col_count = 0;
var cols = [];
$(this).children().each(function() {
cols[col_count] = $(this).html();
col_count++;
});
rows.push(cols);
});
tree.data = rows;
var tree_json = JSON.stringify(tree); // use the variable to save to DB
console.log(tree_json);
}
});
});
You can save the variable tree_json to database (Call ajax to php and save to DB)
On each page load you could take the value from database to a variable and using json_decode to make the string a json object
$table_structure = ; // Code to take from db
$table_structure = json_decode($table_structure);
You can copy and paste json from console to check if its valid using JSONLint
I'm working on a project where I created a table component which is used on multiple pages with different configuration. Every table has it's configuration in a separate file where I store keys, titles and size classes for each column.
Data for each table body come from REST calls and they are loaded dynamically, paginated and then displayed.
<template slot="thead">
<tr>
<th v-for="item in headers" :key="item.id" :class="item.classes">{{item.title}}</th>
</tr>
</template>
<template slot="tbody">
<tr v-for="skill in paginatedSkills"
:key="skill.id"
v-on:click="selectRow(skill)"
v-bind:class="{selectedRow: selectedSkill === skill}"
>
<td class="cell-l">{{skill.name}}</td>
<td class="cell-m">{{skill.owner}}</td>
<td class="cell-s">{{skill.complexity}}</td>
<td class="cell-full">{{skill.description}}</td>
</tr>
</template>
What I want to do is to avoid writing size class for every single cell in the tbody loop. I was hoping to get index of looped object and use it to retrieve the class from config object which is used to populate cells in thead.
<tr v-for="(skill, index) in paginatedSkills" ...>
<td class="{headers[index].classes}">{{skill.name}}</td>
Using index on headers will return the correct item but as a string so obviously classes are not accessible. Any idea how to tweak it?
This options are no go, failing on compile
<td :class="{JSON.parse(headers[index]).classes}">{{skill.name}}</td>
<td :class="{JSON.parse(headers)[index].classes}">{{skill.name}}</td>
<td :class="{{JSON.parse(headers[index]).classes}}">{{skill.name}}</td>
To set class from a variable/property you have two options:
<td v-bind:class="headers[index].classes">{{skill.name}}</td>
<td :class="headers[index].classes">{{skill.name}}</td>
No need for curly braces here since v-bind already expects JS expression.
Update:
What you can also do, is to associate keys of skill object (name, owner, complexity, description) with their header, so each item of headers array will also have for example key property used to access value from skill object:
headers: [
{ id: 1, classes: 'cell-l', title: 'title', key: 'name' },
{ id: 2, classes: 'cell-s', title: 'title', key: 'owner' },
...
]
Thus, your code can be simplified the following way:
<tr v-for="skill in paginatedSkills" ...>
<td v-for="header in headers" v-bind:class="header.classes">{{skill[header.key]}}</td>
</tr>
I have a table I am creating that looks like this:
<table>
<thead>
<tr>
<th>Value1</th>
<th>Value2</th>
<th>Value3</th>
<th>Value4</th>
</tr>
</thead>
<tbody>
{{#each []}}
<tr>
<td>{{this.val1}}</td>
<td>{{this.val2}}</td>
<td>{{this.val3}}</td>
<td>{{this.val4}}</td>
</tr>
{{/each}}
</tbody>
I want it to be the case that if val1, for instance, is greater than some value X, it will appear red.
How can I pass HTML into the template once some pre-defined condition - like the above example - is satisfied?
Ideally you should be driving this functionality using your models.
You could achieve the desired functionality using Marionette CollectionView. Each model in the collection should look something like:
var Model = Backbone.Model.extend({
initialize: function(){
/* On initialize, we call our method to set additional computed properties */
this.setProperty();
}
setProperty: function() {
if (this.get("someProperty") > x) {
this.set("className", "css-class")
}
}
});
Then from within your ItemView template you should be able to set the class on your table row item
<tr class="{{this.className}}">
<td>{{this.val1}}</td>
<td>{{this.val2}}</td>
<td>{{this.val3}}</td>
<td>{{this.val4}}</td>
</tr>
I have a Shopping Website I want to be able to display two model names "jeans" and "shirt" in a view
I need to pass data from two models I know how to access data from two models in one controller but I do not know how to send data from that controller
Controller:
var mongoose = require('mongoose'),
errorHandler = require('./errors.server.controller'),
Shirt = mongoose.model('Shirt'),
Jeans = mongoose.model('Jeans');
exports.list = function(req, res) {
Jeans.find().sort('-created').populate('user', 'displayName').exec(function(err, jeans) {
Ajean = jeans;
});
Shirt.find().sort('-created').populate('user', 'displayName').exec(function(err, shirts) {
Ashirt = shirts;
});
Shirt.find().sort('-created').populate('user', 'displayName').exec(function(all) {
// res.jsonp(Ashirt);
// res.jsonp(Ajean);
});
};
View:
<div class="list-group">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="item in items">
<td data-ng-bind="item.name"></td>
<td data-ng-bind="item.color"></td>
</tr>
</tbody>
</table>
</div>
I know that I cannot use "res.jsonp();" more than once .
when I use "Ajean" it give me data for "jeans" and
when I use "Ashirt" it give me data from "shirts" model
But I want to be able to show both data from both "shirt" model and "jean" model
How Can I do That?
Do I need to merge two Json?
How should I change my view to see that data?
Thanks!
You could try nesting the queries and then merge the resulting arrays with Array.concat:
Jeans.find().sort('-created').populate('user', 'displayName').exec(function(err, jeans) {
Shirt.find().sort('-created').populate('user', 'displayName').exec(function(err, shirts) {
var all = shirts.concat(jeans);
res.jsonp(all);
});
});