How can I display json to html using node-json2html? - javascript

I'm trying to display a more complex json output into html and I haven't been able to figure out how the transform should be constructed using node-json2html
My json looks like this:
[
{
"name": "flight.LOL123 ",
"columns": [
"time",
"sequence_number",
"vert_rate",
"messages",
"squawk",
"altitude",
"lat",
"lon",
"validposition",
"track",
"validtrack",
"speed",
"seen",
"hex"
],
"points": [
[
1434558860921,
98792710001,
-512,
1018,
"4543",
3325,
15.74181,
71.60743,
1,
290,
1,
207,
0,
"4692d4"
],
[
1434558000838,
98401040001,
0,
4,
"0000",
25550,
0,
0,
0,
0,
0,
0,
0,
"4692d4"
]
]
}
]
I was able to get this:
var transform = {'tag':'li','html':'${name}, ${points}'};
but it will produce a first line containing the name and then the points are all on a single, long line.
Can anyone help me try to get the transformation right?

For what I see, you use quite different formatting compared from the example of the library you mention.
Once again the official example format:
var data = [{'male':'Bob','female':'Jane'},{'male':'Rick','female':'Ann'}];
Your formatting is nested, not flat as it should be.

Found another faster and pretty solution by using mustache.js
This code is for my original JSON:
{{#.}}
<div class="panel panel-info">
<div class="panel-heading"><h2>Data for {{name}}</h2></div>
<div class="panel-body"></div>
<table class="table table-striped">
{{#columns}}
<th>{{.}}</th>
{{/columns}}
{{#points}}
<tr>
{{#.}}
<td>{{.}}</td>
{{/.}}
</tr>
{{/points}}
{{/.}}
</table>
</div>
With only these I'm populating tables of >5k lines in a heart beat. Pretty cool stuff!

Related

DataTables in Django modify columns ordering

I write Django app, where I have a base.html template and I defined var table where I declared order by column 0 with 'desc' (look below) So I currently use it some templates, where I extend base.html. But now I need to sort in new template firstly by the second column, and after that by the first column (like this: "order": [1, 0, 'desc'] ). I don't know how I modify this variable without a duplicate code. Could somebody help me?
var table = $('#example').dataTable( {
"columnDefs": [ {
"targets": 0,
"searchable": false,
"order": [0, 'desc'],
"ordering": true,
} ]
} );
In template which extends 'base.html'
<script>
//modify order method
</script>
You can set the ordering using .order() then redraw the table:
table.order( [ 1, 'desc' ], [ 0, 'desc' ] ).draw();

How to redraw Datatable after selecting another page in JQuery Datatable?

I have a DataTable which I fill with data from the server side. The table is being filled the right way. When I use pagination, the server side is called again and produces the JSON data for the next page. The data is right. But the table isn't refreshing. According to the Datatables documentation I know that I should use the draw() function somehow, but I don't know where to call it.
This is my html table:
<table id="table-esemenyLista" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Id</th>
<th>Dátum</th>
<th>Esemény</th>
</tr>
</thead>
<tbody id="esemenyListBody" class="text-primary">
</tbody>
</table>
This is the Jquery-datatable code connected to it:
$( document ).ready(function() {
esemenyListaTable = $("#table-esemenyLista").DataTable({
"processing" : true,
"serverSide" : true,
"paging" : true,
"searching" : false,
"lengthChange" : false,
"drawCallback": function( settings ) {
console.log('redrawn');
},
"ajax" : contextPath + "/historyContent.do"
});
});
This is the JSON object I get from the server-sid for the first time (appears right):
{
"draw":1,
"recordsTotal":16,
"recordsFiltered":16,
"data":[
[
1,
"2016-07-23",
"text1"
],
[
12,
"2016-10-04",
"text2"
],
[
13,
"2016-10-04",
"text3"
],
[
16,
"2016-10-18",
"text4"
],
[
17,
"2016-11-05",
"text5"
],
[
18,
"2016-11-14",
"text6"
],
[
19,
"2016-11-15",
"text7"
],
[
20,
"2016-11-16",
"text8"
],
[
22,
"2016-11-16",
"text9"
],
[
23,
"2016-11-17",
"text10"
]
]
}
After turning to the second page, I get the following JSON object, which is which syntax is right, but doesn't appear:
{
"draw":1,
"recordsTotal":16,
"recordsFiltered":16,
"data":[
[
24,
"2016-11-17",
"text11"
],
[
25,
"2016-11-23",
"text12"
],
[
26,
"2016-11-23",
"text13"
],
[
27,
"2016-11-23",
"text16"
],
[
28,
"2016-11-24",
"text17"
],
[
29,
"2016-11-25",
"text18"
]
]
}
The drawCallBack function only writes the log the first time. How should I call the draw method? After I red some other questions related to mine here on StackOverflow, I know I should clear, and then redraw the table, but how? Could someone help me please?
You have to return the right draw index.
So the second one has to be "draw":2.
I don't know your serverside language, in PHP you can get the draw index with $_GET['draw']

Looping over two arrays for each row in a table

I have the following set of json
[
{
"drink_name": "Ananascocktail",
"ingredients": [
"Ananas",
"Färskpressad limesaft",
"Apelsinjuice",
"Farinsocker",
"Rom"
],
"alternatives": [
"",
"Limesaft",
"",
"Socker",
null
]
},
{
"drink_name": "Blå Pilthammer",
"ingredients": [
"Blåbärsvodka",
"Apelsinjuice",
"Bonaqua Citron"
],
"alternatives": [
"Vodka",
"",
""
]
}
]
How do I loop over the ingredients and alternatives to place each element in separate <td>'s on the same <tr>?
I've tried putting a ng-repeat on the row, but that makes a new row for each element.
I must, however, use a ng-repeat on the <tr> since I have multiple ingredients/alternatives.
I've googled around for over an hour but can't find anything that quite fit my needs.
Any suggestions?
I solved it by doing the following
<tbody>
<tr ng-repeat="ingredient in json.ingredients">
<td>{{ingredient}}</td>
<td ng-repeat="alternative in json.alternatives track by $index" ng-if="$parent.$index === $index">{{alternative}}</td>
</tr>
</tbody>
I only allow alternatives to place a <td> if its $index is the same as its $parent's $index. Why that solved it is beyond me

Datatable returns No data available in table when the JSON I give it looks valid

I am trying to initialize data tables and feed it an array of objects. I am getting an error saying that there is No data available in table. But I can print it out to the console and see that that is incorrect.
//JS
get_notes().done(funciton(){
console.log(my_json)//what its format is below
//my_json = [
{
"username": "thomas",
"fullname": "Thomas familyname"
},
/*...*/]
_.isArray(my_json) //true
$("#note_table").DataTable({
data: my_json,
columns: [
{title: "fullname"},
{title: "username"}
]
});
});
<!--HTML-->
<table id="note_table">
<thead>
<tr>
<th>fullname</th>
<th>username</th>
</thead>
<tobdy>
</tbody>
</table>
How can I prevent this error?
Your biggest problem is this:
columns: [
{title: "fullname"},
{title: "username"}
]
it should be
columns: [
{data: "fullname"},
{data: "username"}
]
You also have to make sure your table is properly defined (typo <tobdy>)
Here's a link to a working fiddle for your example:
http://jsfiddle.net/bmartinelle/bjppck3d/1/

Dust.js multi level array data

My JSON data looks something like this:
{
data:[
[
{"title": "Text1"},
{"title": "Text2"},
{"title": "Text3"}
],
[
{"title": "Text4"},
{"title": "Text5"},
{"title": "Text6"}
]
]
}
I want to use the data to generate a table. So far, I only manage to get it generate rows.
{#data}
<tr>
<td>{title}</td>
</tr>
{/data}
How can I get it generate columns? Thanks.
You need to add an extra loop as each value in the first array is also an array:
{#data}
<tr>
{#.}
<td>{.title}</td>
{/.}
</tr>
{/data}

Categories