The following line of code generates a the warning below:
<span>{{prac.dateShown | amAdd: i : 'd' | amDateFormat:'dddd D MMM'}}</span>
Deprecation warning: moment construction falls back to js Date.
Both of the following line of code do not. Does anyone know what is going on?
<span>{{prac.dateShown | amAdd: i : 'd'}}</span>
<span>{{prac.dateShown | amDateFormat:'dddd D MMM'}}</span>
i is a number from the array: [0,1,2,3,4,5,6,]
prac.dayShownis a moment variable in my controller.
Adding more code
<div ng-repeat="prac in practices">
<table>
<thead>
<tr>
<th ng-repeat="i in [0,1,2,3,4,5,6]">
<span>{{prac.dateShown | amAdd: i : 'd' | amDateFormat:'dddd D MMM'}}</span>
</th>
</tr>
</thead>
<tbody>
[...]
</tbody>
</table>
</div>
When using prac.dateShown you have to make sure the type is Date to allow Moment.js to understand the format of the value, do something like this in your component:
this.prac.dateShow = new Date(YOUR_VAR);
then prac.dateShow will be a valid date
Related
I want to loop through the following json object:
{countryId: 1, countryName: 'Bangladesh4', countryShortName: 'BD4', authStatus: 'U', createdBy: 'nasir', …}
I want to show this json object as follows:
Country Id: 1
Country Name: Bangladesh
and so on. Actually I need to add a space at every capital letter of a camel case word and make the first letter capital. How can I do this in vue 3?
My try:
<table>
<tbody>
<tr v-for="(value, key) in data">
<th>{{ key }} </th>
<td>{{ value }}</td>
</tr>
</tbody>
</table>
I have not tested this code. But I would create a computed property, which creates an object with the correct labels based on the keys in the data:
const labels = computed(() => {
const newLabels = {}
data.forEach(item => {
Object.key(key => {
newLabels[key] = key.replace( /([A-Z])/g, " $1" );
})
})
return newLabels;
})
The object created should look like this: {countryId: 'country Id', countryName: 'country Name', ...}. It is flexible as it will run over all objects in the data array, collecting and converting all possible keys. Downside may be performance when you have a huge array. If all keys are the same for the objects in data, you also just might create a labels object manually.
Now you can use this in your template:
<th style="text-transform: capitalize;">{{ labels[key] }} </th>
I added the style to transform the first letter to a capital.
As said, I did not have an opportunity to test this, but I hope it helps you any further.
you can display name as below
<table>
<tbody>
<tr v-for="(value, key) in data">
<th v-if="key=='countryId'">Country Id</th>
<th v-if="key=='countryName'">Country Name</th>
...
<td>{{ value }}</td>
</tr>
</tbody>
</table>
Here is that list of JSONObject which is coming from Spring MVC Controller.
List<JSONObject> jsonDataList =
[{"key1":"value1","key2":"value2","key3":"value3","key4":"value4"}, {"key1":"value1","key2":"value2","key3":"value3","key4":"value4"}]
How to Iterate List of JSONObject in Thymeleaf using th:each?
Code IN HTML FILE below:=>
<tr th:each="data: ${jsonDataList}">
<td align="center"><span th:text="${data.key1}"></span></td> // getting exception here
</tr>
Getting Exception as :
Caused by: org.attoparser.ParseException: Exception evaluating SpringEL expression: "data.key1"
Here is one approach, but it makes some assumptions:
a) Each JSON object has the same number of entries (otherwise you could have a ragged table, containing different numbers of cells in each row).
b) Each JSON object has the same keys in the same order (if you want the table to have consistent column headings).
Also, the sample JSON in the question assumes all values are strings (value1 and so on). If you have different types of objects in your JSON values, then you will need to ensure they have the required string representations (e.g. using toString()).
The approach:
<table>
<tr>
<th:block th:each="heading : ${jsonDataList.get(0).names()}">
<th th:text="${heading}"></th>
</th:block>
</tr>
<tr th:each="item : ${jsonDataList}">
<th:block th:each="name : ${item.names()}">
<td th:text="${item.get(name)}"></td>
</th:block>
</tr>
</table>
The first <tr> section handles reading the JSON object keys from the first object in the list:
${jsonDataList.get(0).names()}
The final <tr> section is similar, but uses the keys to look up their related values:
${item.get(name)}
The resulting HTML gives you a simple table:
<table>
<tr>
<th>key1</th>
<th>key2</th>
<th>key3</th>
<th>key4</th>
</tr>
<tr>
<td>value1</td>
<td>value2</td>
<td>value3</td>
<td>value4</td>
</tr>
<tr>
<td>value1</td>
<td>value2</td>
<td>value3</td>
<td>value4</td>
</tr>
</table>
References:
The th:block tag is documented here.
The methods available to be used for JSONObject are documented here.
how about this?
<tr th:each="data: ${jsonDataList}">
<td align="center"><span th:text="[[${data.key1}]]"></span></td>
</tr>
My filter for the column is working, what I want to do now is make a default filter, that will applied on table creation.
<table id="testTable"
data-side-pagination="server">
<thead>
<tr>
<th class="question" data-field="UserFullName" data-sortable="false" data-filter-control="select">Name: </th>
<th class="question" data-field="UserJobTitle" data-sortable="false" data-filter-control="select" data-filter-data="var:userJobTitles">JobTitle: </th>
</tr>
</thead>
<script>
var userJobTitles = {
Admin: 'Admin',
IT: 'IT',
General : 'General',
Security : 'Security',
CEO : 'CEO',
};
</script>
In this example, I want to make IT Jobtitle a default job title.
This seems to be close to the solution bootstrap-table / How to add filter-control in table configuration , the issue is that i dont want to do it on the javascript side.
I think this feature is available out of the box in Bootstrap Table. Please see: filterDefault column option documentation
There is no need to write JavaScript for that, you could just use data-filter-default attribute on the <th> element corresponding to the column which you want to filter. So in your case it would be:
<th class="question"
data-field="UserJobTitle"
data-sortable="false"
data-filter-control="select"
data-filter-data="var:userJobTitles"
data-filter-default="IT">JobTitle: </th>
Important: It is necessary to use the "key" of your data-filter-data (see: filterData column option documentation).
Hopefully this helps :).
I use a chain of
knitr::knit2html("test.Rmd") # generates test.md & test.html
rmarkdown::render("test.md") # overwrites test.html
to generate an html report.
This chain provides good functionality as my report usually combines pictures, tables & text. If I ran only
knitr::knit2html("test.Rmd")
"test.html" will be generated, but it looks awkward, i.e. pictures not shown correctly.
Normally, this works fine, but this time sample names that are headers of a table contain '+' or '-'.
| | IP_gene8-_1st| IP_gene8+_1st|
|:--------------|-------------:|-------------:|
|IP_gene8-_1st | 1.0000000| 0.4357325|
|IP_gene8+_1st | 0.4357325| 1.0000000|
"test.html" generated by knit2html("test.Rmd") will contain a valid table, but other pictures are not shown correctly.
<table><thead>
<tr>
<th align="left"></th>
<th align="right">IP_Rad18-_1st</th>
<th align="right">IP_Rad18_1st</th>
</tr>
</thead><tbody>
<tr>
<td align="left">IP_Rad18_1st</td>
<td align="right">1.0000000</td>
<td align="right">0.4357325</td>
</tr>
<tr>
<td align="left">IP_Rad18_1st</td>
<td align="right">0.4357325</td>
<td align="right">1.0000000</td>
</tr>
</tbody></table>
Running rmarkdown::render("test.md") produces a "test.html" with a table as text only, but e.g. pictures shown correctly. The crappy table output looks like this:
| | IP_gene8-_1st| IP_gene8+_1st|
|:-------------|-------------:|-------------:|
|IP_Rad18_1st | 1.0000000| 0.4357325|
|IP_Rad18_1st | 0.4357325| 1.0000000|
Usually, '+' and '-' can be protected using '/', but this does not have any effect in the table context.
Is there any way to trick rmarkdown::render() to create a valid html-table?
You can use below unicode entity code for +/- sign in markdown as well as html:
±
±
±
I have 2 objects results and headers being headers generated from _.keys(result[0])
r{
data:{
headers:['head1','head2']
result:[
{head1:'content1',head2:'content2'}
{head1:'content3',head2:'content4'}
{head1:'content5',head2:'content6'}
]
}
I have to create a table dinamically so I create this:
<table class="ui celled table segment">
<thead>
<tr>
{{#headers}}
<th>{{.}}</th>
{{/headers}}
</tr></thead>
<tbody>
{{#result:i}}
<tr>
{{#headers:h}}
<td>{{????}}</td> <-- Here is where I fail to know what to put into
{{/headers}}
</tr>
{{/result}}
</tbody>
</table>
Can someone help me to fill in the blanks. So I can create a table that display the contents
If I remove the {{#headers}} part and I already know the elements <td>{{.head1}}</td> work perfectly the problem is that I'am generating different objects on the fly.
{{#result:i}}
<tr>
{{#headers:h}}
<td>{{result[i][this]}}</td>
{{/headers}}
</tr>
{{/result}}
The reason this works is that the <td> is repeated for each item in the headers array, because it's inside a headers section - so far, so obvious. Because of that, we can use this to refer to the current header (head1, head2 etc). The trick is to get a reference to the current row - and because you've already created the i index reference, we can do that easily with result[i]. Hence result[i][this].
Here's a demo fiddle: http://jsfiddle.net/rich_harris/dkQ5Z/