How do I add lambdas function into the AJAX

JavaScript
1

Hi all

I’m trying to add a basic lambdas into the AJAX call, just can’t figure out how this fits together.

Example:
The below works and display data in my Mustache template.

$.ajax({
    url: '../jsonfile.json',
    dataType: 'jsonp',
    success: function (data) {
      var template = $('#resultstpl').html();
      var html = Mustache.render(template, data);
      $('#results').html(html);
    },
    data: {},
    async: false
});

And from an example I have, the function I need is formatted like:

{
  "name": "Willy",
  "wrapped": function() {
    return function(text, render) {
      return "<b>" + render(text) + "</b>"
    }
  }
}

I need to pull/move the "wrapped": function() {} and add it to the AJAX above.

I was thinking something like:

$.ajax({
    url: '../jsonfile.json',
    dataType: 'jsonp',
    success: function (data) {
      var template = $('#resultstpl').html();
      var html = Mustache.render(template, data);
      $('#results').html(html);
    },
    data: {
      
    },
    "wrapped": function() {
    return function(text, render) {
      return "<b>" + render(text) + "</b>"
    }
  },
    async: false
});

But it doesn’t work :upside_down:

Any ideas how I can achieve this, the correct way to add this function to the AJAX?

Thanks,
Barry

2

Can anybody help with this?
Not sure if I’m doing things correctly if this makes sense, thanks.

Barry

4

I’m not… entirely sure what this object (which is what you’ve got, with {} around a thing)) is… not meant to do, but rather… what you’re expecting to have happen? Are you expecting the function to get called? Are you trying to pass this object to some other function?

5

Thanks @m_hutley

As explained on the Mustache documentation, as you can see, the wrapped function/object will be used as part of the templating.

Lambdas

When the value is a callable object, such as a function or lambda, the object will be invoked and passed the block of text. The text passed is the literal block, unrendered. {{tags}} will not have been expanded - the lambda should do that on its own. In this way you can implement filters or caching.

Template:

{{#wrapped}}
  {{name}} is awesome.
{{/wrapped}}
Hash:

{
  "name": "Willy",
  "wrapped": function() {
    return function(text, render) {
      return "<b>" + render(text) + "</b>"
    }
  }
}

Output:

<b>Willy is awesome.</b>

Again, still unsure how this fits together. I did add a function similar to this a while back, though lost the code and forget how this works. In time I’ll need multiple functions like wrapped, once I understand the workings.

Thanks :nerd:

6

Not quite sure either… do you mean you want to augment the response data with that wrapped render function, so that it’s available in the template? In this case you might do this with Object.assign() (or as you’re using jQuery anyway, $.extend() for x-browser compatibilty):

var renderFuncs = {
  'wrapped': function () {
    return function (text, render) {
      return '<b>' + render(text) + '</b>'
    }
  }
}

$.ajax({
  url: '../jsonfile.json',
  dataType: 'jsonp',
  success: function (data) {
    $.extend(data, renderFuncs)

    var template = $('#resultstpl').html()
    var html = Mustache.render(template, data)

    $('#results').html(html)
  }
})

At any rate, your approach won’t work as the $.ajax() settings object only takes the properties as described in the documentation – everything else will be ignored.

(x-post)

2 Likes
7

Yes, exactly that I think :slight_smile:
I need this argument(s) to run against the json returned on the page.

Generally, I’ll be building some functions to format the json date, and other cool stuff needed along the way.

Example:
Similar approach to wrapped.

{{#formatDate}}
{{submitted}}
{{/formatDate}}

Which will ouput:
14th April 2018

Update
I’ve just ran some tests, what you suggest is perfect!
Working just how I need it :grin:

Yes, this will explain why I couldn’t get things to work :upside_down:

Moving forward @m3g4p0p
Is it ok to add multiple functions into renderFuncs like:

var renderFuncs = {
  'wrapped': function () {
    return function (text, render) {
      return '<b>' + render(text) + '</b>'
    }
  }
'double': function () {
    return function (number, render) {
      return render(number) * 2;
    }
  }
'bolder': function () {
    return function (text, render) {
      return '<strong>' + render(text) + '</strong>'
    }
  }
}

Is this the best way?

Barry

1 Like
8

Yup, absolutely. :-)

9

Cool, so now every function inside the renderFuncs object is available to use within the template.
It looks so simply now you have explained :sunglasses:

Thanks alot!
Been causing a lot of headaches over the past couple of days trying to get this to work.

Cheers,
Barry

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.