EloquentStudio / filter.js

Complete solution for client side filtering and rendering using JSON data
http://eloquentstudio.github.io/filter.js
MIT License
664 stars 183 forks source link

Conditional formatting of JSON data rendered by template #156

Open schmidtl4 opened 7 years ago

schmidtl4 commented 7 years ago

Is there a way to conditionally format a row or a field in the rendered data? The goal is to provide a visual cue without having to filter the results.

Say, for instance, the data had a field "Priority" and you wanted to display all data with "Priority" : "high". Currently all data is rendered the same if using the same template.

Thanks.

jiren commented 7 years ago

In template, you can add conditional statements

<% if Priority == "hight" {> 
   <h4><%= name %></h4>
<% } %>
schmidtl4 commented 7 years ago

Thanks Jiren. This throws an error in the javascrpt console: "Unexpected identifier"

I've tried variants of your suggested code and get the same error. I've tried:

<% if Priority == "high" { %> 
   <h4><%= name %></h4>
<% } %>

<% if Priority == "high" { 
   <h4><%= name %></h4>
 } %>
schmidtl4 commented 7 years ago

Ok. I got this code to process without errors (no % before closing > ):

<% if Priority == "High" {>
    <h4><%=name%></h4>
< }>

I also attempted to create an "else" portion of the if statement but could not get it to work. So I'm using too "if" statements like this:

<% if Priority == "High" {>
    <h4><%=name%></h4>
< }>
<% if Priority != "High" {>
    <%=name%>
< }>

Thoughts on why the conditionals are not being executed?

jiren commented 7 years ago

Try like this

<% if Priority == "High" {>
    <h4><%=name%></h4>
< }else {>
    <%=name%>
< }>
justinmedas commented 5 years ago

Hi Jiren,

I am having the same issue, however, the above solution does not work: the browser is interpreting this as text and prints the carets, brackets, and %s

<% if position != "" {> <%= position %> < }>

when rendered in my browser this is output as: "<% if position != "" {> Position 1,Position 2,Position 3 < }>"

I am wondering if there is perhaps a JS lib I might be missing?

justinmedas commented 5 years ago

I ended up figuring out the solution to my issue: <% if (src.length) { %> Weird that this syntax works and is different than the syntax above.