Day 15 – Ternary Operators or Conditional Expressions

Goal: show off a simple use of conditional expressions in KRL

ruleset a60x501 {
  meta {
    name "conditional-expressions-example"
    description <<
      conditional-expressions-example
    >>
    author "Mike Grace"
    logging on
  }

  global {
    // YQL query => select * from newegg.search where query="hard drive"
    dataset neweggSearch:JSON <- "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20newegg.search%20where%20query%3D%22hard%20drive%22&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=";

    css <<
      .item {
        border: 1px solid #AAAAAA;
        padding: 5px;
      }

      .item p {
        margin: 0px;
      }

      .within-budget {
        background-color: #D7E9C3;
      }

      .out-of-budget {
        background-color: #F7DFDF;
      }
    >>;
  }

  rule explain_what_i_am_doing {
    select when pageview ".*"
    {
      replace_html("body *","");
      notify("What am I doing?","Looking for a new hard drive that is within my budget of $90.00") with sticky = true;
    }
  }

  rule look_for_hard_drives_within_my_budget {
    select when pageview ".*"
    foreach neweggSearch.pick("$..item") setting (item)
    pre {
      name = item.pick("$.name");
      link = item.pick("$.link");
      totalPrice = item.pick("$.totalPrice");
      image = item.pick("$.image");
      priceRangeClass = (totalPrice < 90.00) => "within-budget" | "out-of-budget";

      product =<<
        <div class="item #{priceRangeClass}">
          <p><a href="#{link}">#{name}</a></p>
          <img src="#{image}"/>
          <p>Total Price: #{totalPrice}</p>
        </div>
      >>;
    }
    {
      append("body", product);
    }
  }
}
  • 13 query YQL table for newegg hard drives setting results to ‘neweggSearch’ variable available in all rules because it is declared in the global block
  • 15-32 CSS block
  • 35-41 simple rule that shows a notify to explain what the following rule will be showing
  • 38 clearing the page to make it easier to read the results
  • 45 looping through each newegg item that is returned from the search result
  • 45 pick operator is used to navigate the JSON tree, and with this particular dataset, returns an array of newegg items
  • 45 through each iteration through the array of items, the current item is set to a local variable named ‘item’
  • 47-50 pick out pieces of the data from the current item to be used in displaying information about the deal
  • 51 conditional expression that returns ‘within-budget’ when totalPrice is less than 90 and returns ‘out-of-budget’ when totalPrice is not less than 90
  • 53-58 build HTML to display
  • 54 using results from conditional expression to set a CSS class on the item’s containing DOM element to change the way the item is being displayed

App run on example.com with bookmarklet

  • although conditional expressions can be ternary, the conditions can be chained as long as you like which is why they are called conditional expressions and not just ternary operators in KRL
  • this is one of my favorite additions to the KRL language and I find myself using it all the time to increase the functionality of my apps and decrease the complexity of what I have to write

Example returned HTML from 2 newegg items

<div class="item out-of-budget">
  <p>
    <a href="http://www.newegg.com/Product/Product.aspx?Item=N82E16822148503">Seagate Expansion 2TB 3.5" External Hard Drive</a>
  </p><img src="http://images17.newegg.com/is/image/newegg/22-148-503-TS?$S125W$">
  <p>
    Total Price: 99.99
  </p>
</div>
<div class="item within-budget">
  <p>
    <a href="http://www.newegg.com/Product/Product.aspx?Item=N82E16822148409">Seagate 500GB 2.5" External Hard Drive</a>
  </p><img src="http://images17.newegg.com/is/image/newegg/22-148-409-TS?$S125W$">
  <p>
    Total Price: 64.99
  </p>
</div>

Get the bookmarklet to try it out yourself!

Gratuitous day 15 Grace face

About these ads
This entry was posted in Kynetx. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s