Angular create table from json resulting in sorted headings - json

I have an angular app in which i am creating a table based on the json as follows:
<thead>
<tr>
<th ng-repeat="(header, value) in resultData[0]">
{{header}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in resultData">
<td ng-repeat="cell in row">
{{cell}}
</td>
</tr>
</tbody>
Here the table creates the headings as well as the content from a json. But the result of this code is a table with sorted headings. Is there a way to keep the order the same as in the json file?

Your headers are in an object. JavaScript objects do not guarantee property order. See this question. To preserve order, you have to use an array in your JSON file.

Related

Make a table row span multiple columns using kable and kableExtra

I am trying to create an HTML table using R and the kable and kableExtra packages. I am having problems creating a row that spans several columns. I want to create a table where the last row contains the same values for all the columns without actually repeating this value. I've created a small example of what I am trying to do below.
library(kableExtra)
library(knitr)
summary_stats <- matrix(c(51,43,22,22),ncol=2,byrow=TRUE)
colnames(summary_stats) <- c("Mean","SD")
rownames(summary_stats) <- c("Age","Observations")
summary_stats
kable_table <- kable(summary_stats) %>%
kable_styling()
Instead of repeating the number 22 on the last row for the two columns, I'd like to center it between the two columns.
I am able to achieve what I want with the following HTML code using the colspan argument:
<table class="table" style="margin-left: auto; margin-right: auto;">
<thead>
<tr>
<th style="text-align:left;"> </th>
<th style="text-align:right;"> Mean </th>
<th style="text-align:right;"> SD </th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left;"> Age </td>
<td style="text-align:right;"> 51 </td>
<td style="text-align:right;"> 43 </td>
</tr>
<tr>
<td style="text-align:left;"> Observations </td>
<td style="text-align:center;" colspan = "2"> 22 </td>
</tr>
</tbody>
</table>
Note that the HTML code is just the output of the kable_table object I created in R where I've manually edited the HTML code to include the colspan argument. I would like to do this programmatically within R instead of having to manually change the code.
I've tried to use the row_spec function from the kableExtra package to add the necessary code but I am limited by the fact that the add_css option (as expected) only accepts arguments related to styling. In other words, I cannot pass the colspan argument to the option.
My question is if there is a reasonable way of adding the necessary HTML to the table after I've created it or if there is any option within the kable/kabeExtra framework that allows me to do this that I've missed?

Using multiple ng-repeat

<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th ng-repeat="header in headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="table in tables">
<td>{{$index+1}}</td>
<td ng-repeat="header in headers">{{$parent.table.header}}</td>
</tr>
</tbody>
</table>
I have a json array retrieved from a server. First ng-repeat: 'headers' contain keys in that json array which i extracted. It works fine in all cases.
Second ng-repeat: 'tables' contain the json array received. What i am trying to do is for each element of json array, find data by providing key values.
here is my multiple ng-repeat code. This doesn't work, no data is printed in the table but if i change {{$parent.table.header}} to {{$parent.table}} or {{header}} i can see data in the table.
The problem is {{$parent.table.header}} how can i do it correctly ?
Try to use $parent.table[header] - because header is already a string.

code reusability in HTML

I have three tables which are using using different variables for displaying the data.
Basic structure of the table
<table>
<thead>
<tr>
<th ng-repeat="var in array2"><i ng-show="array3[$index]=0"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="var in variable">
<td ng-repeat="var1 in var">{{var1.position}}</td>
</tr>
</tbody>
</table>
All the three tables are using different arrays for variable, array2 and array3. Is there any way I don't have to write the code thrice and I can loop the code for three tables.
Please suggest changes in data structures only when there are no other possible HTML solution to change it.
You need to check for directives, for instance <my-table-directive datas="array1"></my-table-directive>
This directive will hold the logic and templaces and you'll pass a variable to define the content.

Django: how to pass json data as url to template for table sort and search

I like bootstrap and I am trying to add a bootstrap sortable & searchable table(s) to my django site. like on http://wenzhixin.net.cn/
the example code looks fairly strait forward. except that i cannot figure out the very first part data-url="data1.json"
<table data-url="data1.json" data-height="299" data-sort-name="name" data-sort-order="desc">
<thead>
<tr>
<th data-field="id" data-align="right" data-sortable="true">Item ID</th>
<th data-field="name" data-align="center" data-sortable="true">Item Name</th>
<th data-field="price" data-sortable="true">Item Price</th>
</tr>
</thead>
</table>
I am able to create Json data bassed on this Stackoverflow Creating a JSON response using Django and Python but I cannot figure out how to format it as a url that django/table can access.

How can I make a HTML table with headers in one vertical column?

I want to make a HTML file that has the headers in one vertical column, and the data in the column to the right. There will only be 2 columns in total. I've looked at the html docs and seen stuff about scope, but I'm not entirely sure how to use it in this context. Example:
The HTML is pretty straightforward, just be sure to use the [scope] attribute to specify the correct orientation of the table.
<table>
<tbody>
<tr>
<th scope="row">City</th>
<td>$city</td>
</tr>
<tr>
<th scope="row">Latitude</th>
<td>$latitude</td>
</tr>
<tr>
<th scope="row">Longitude</th>
<td>$longitude</td>
</tr>
<tr>
<th scope="row">Country</th>
<td>$country</td>
</tr>
</tbody>
</table>
From the docs for the [scope] attribute:
The row state means the header cell applies to some of the subsequent cells in the same row(s).
You can create the tables with elements proceeded by elements like so:
<table>
<tr>
<th scope="row">Category 1</th><td>data1</td>
</tr>
<tr>
<th scope="row">Category 2</th><td>data2</td>
</tr>
<tr>
<th scope="row">Category 3</th><td>data3</td>
</tr>
Here is an example of it in action:
vertical headers