Web Development

25-Apr-17 8:44

ticker.client.updateStockPrice = function (stock) {
      var displayStock = formatStock(stock),
          $row = $(rowTemplate.supplant(displayStock));

      $stockTableBody.find('tr[data-symbol=' + stock.Symbol + ']')
          .replaceWith($row);
      }

The line that starts with "$row =" - supplant appears to be similar to C#'s String.Replace() function. Am I understanding this?

What I don't understand is what that line is attached to the previous line with a ','

var displayStock = formatStock(stock),
            $row = $(rowTemplate.supplant(displayStock));

If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.

Richard Deeming25-Apr-17 8:52

25-Apr-17 8:52

It's using a regular expression, so closer to Regex.Replace with a match evaluator function[^]:

JavaScript

// A simple templating method for replacing placeholders enclosed in curly braces.
if (!String.prototype.supplant) {
    String.prototype.supplant = function (dataObject) {
        return this.replace(
            /{([^{}]*)}/g, // The regular expression to match (see links below)
            function (wholeMatch, propertyName) {
                var dataValue = dataObject[propertyName];
                return typeof dataValue === 'string' || typeof dataValue === 'number' 
                    ? dataValue 
                    : wholeMatch;
            }
        );
    };
}

String.prototype.replace() - JavaScript | MDN[^]
Regexper - /{([^{}]*)}/g[^]
Refiddle - /{([^{}]*)}/g[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Kevin Marois25-Apr-17 10:51

25-Apr-17 10:51

Thank you again!

If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.

Kevin Marois25-Apr-17 12:29

25-Apr-17 12:29

While we're at it, could you take a look at my question from yesterday?

I've been Googling this but can't figure out what to do.

If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.

Jon McKee25-Apr-17 9:53

Jon McKee

25-Apr-17 9:53

Richard already tackled supplant and the question below answers the comma (it's just combining variable declarations). I imagine you're also wondering why the variable "$row" has a "$" though which I can answer - it's a naming style. Not required, but frequently I see JS developers use a "$" to indicate that a variable holds a jQuery object (as opposed to a DOM object or primitive or something). Similar to how some C# devs use a "_" to indicate a variable is private to it's containing object.

modified 25-Apr-17 16:01pm.

Kevin Marois25-Apr-17 10:51

25-Apr-17 10:51

Thank you!

If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.

Kevin Marois25-Apr-17 10:54

25-Apr-17 10:54

Quick follow up question:

var displayStock = formatStock(stock);

$row = $(rowTemplate.supplant(displayStock));

One line uses 'var' and the other doesn't. Why is this?

If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.

Richard Deeming25-Apr-17 12:31

25-Apr-17 12:31

In the original code, the first row ends with a comma, not a semi-colon.

JavaScript

var displayStock = formatStock(stock),
    $row = $(rowTemplate.supplant(displayStock));

It's the same thing as below - multiple variables declared on a single line.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Kevin Marois25-Apr-17 12:32

25-Apr-17 12:32

Ya I figured that out by fiddling with it

Thanks

If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.

Next JavaScript Question

Kevin Marois25-Apr-17 7:50

25-Apr-17 7:50

Looking at this article.

In the JS code there is

var ticker = $.connection.stockTickerMini, // the generated client-side hub proxy
    up = '▲',
    down = '▼',
    $stockTable = $('#stockTable'),
    $stockTableBody = $stockTable.find('tbody'),
    rowTemplate = '<tr data-symbol="{Symbol}"><td>{Symbol}</td><td>{Price}</td><td>{DayOpen}</td><td>{Direction} {Change}</td><td>{PercentChange}</td></tr>';

Can someone please break this down for me?

I understand that the first line is a reference to the SignalR hub, but other than that, I have zero clue what's happening here.

If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.

Richard Deeming25-Apr-17 8:14

25-Apr-17 8:14

It's creating and assigning multiple variables in a single statement:

JavaScript

var ticker = $.connection.stockTickerMini; // the generated client-side hub proxy
var up = '▲';
var down = '▼';
var $stockTable = $('#stockTable');
var $stockTableBody = $stockTable.find('tbody');
var rowTemplate = '<tr data-symbol="{Symbol}"><td>{Symbol}</td><td>{Price}</td><td>{DayOpen}</td><td>{Direction} {Change}</td><td>{PercentChange}</td></tr>';

AFAIK, the only benefit is for "minified" scripts, where you save four characters ("var ") per variable.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Kevin Marois25-Apr-17 8:16

25-Apr-17 8:16

Oh, I see. So it's a set og global variables?

If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.

Richard Deeming25-Apr-17 8:22

25-Apr-17 8:22

Not quite. You can't access them from outside of the containing function, so they're only "global" to the rest of that block.

JavaScript

$(function(){
    var foo = 42;
    
    function bar(){
        alert(foo); // 42
    }
    
    bar();
    
    (function(){
        alert(foo); // 42
    })();
    
    $("form").on("submit", function(){
        alert(foo); // 42
    });
    
    alert(foo); // 42
});

alert(foo); // undefined

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Kevin Marois25-Apr-17 8:23

Quick JavaScript Question

25-Apr-17 8:23

I see, thank you

If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.

Kevin Marois25-Apr-17 6:27

Re: Quick JavaScript Question

25-Apr-17 6:27

I found this piece of code

function formatStock(stock) {
        return $.extend(stock, {
            Price: stock.Price.toFixed(2),
            PercentChange: (stock.PercentChange * 100).toFixed(2) + '%',
            Direction: stock.Change === 0 ? '' : stock.Change >= 0 ? up : down
        });
    }

After some research, I THINK it's a function called formatStock that extends a stock object by adding 3 properties to it.

Am I right here?

If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.

Richard Deeming25-Apr-17 6:59

Re: Quick JavaScript Question

25-Apr-17 6:59

Close - it's replacing the existing Price and PercentChange properties with formatted values, and either adding or replacing the Direction property.

(I assume the missing quotes around up and down are copy/paste errors, or those symbols are defined elsewhere. If not, the code won't work.)

jQuery.extend() | jQuery API Documentation[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Kevin Marois25-Apr-17 7:09

Re: Quick JavaScript Question

25-Apr-17 7:09

OK, I see.

The Up/Down are images

See this about halfway down

Thanks

If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.

Kevin Marois25-Apr-17 7:16