(intermediate value).then is not a function

Question

I am reasonable new to Javascript. Currently I am converting some ES6 code back to ES5 code, because of some legacy systems. I converted the following code:

$row.find('.gridCellDetailAction')
 .each((i, elem) => $translate('Grid.Show' + $(elem).attr('data-title') + 's')
.then(trans => $(elem).attr('title', trans)));

To this

   $row.find('.gridCellDetailAction')
        .each(function (i, elem) {
              $translate('Grid.Show' + $(elem).attr('data-title') + 's')
   }.then(function (trans) { $(elem).attr('title', trans) }));

Now I am getting the following error:

(intermediate value).then is not a function

Now I know that I do something wrong with the then. But how can I get the same result?

Answer 1

With a bit of formatting you can easily see the difference. One time you are calling then on the result of $translate and the other time you are calling then on a function definiton.

$row.find('.gridCellDetailAction')
.each(
  (i, elem) => {
    $translate(
     'Grid.Show' + $(elem).attr('data-title') + 's'
    )
    .then(
      trans => $(elem).attr('title', trans)
    )
  }
);

$row.find('.gridCellDetailAction')
.each(
  function (i, elem) {
    $translate('Grid.Show' + $(elem).attr('data-title') + 's')
  }// <-- The error is here
  .then(
    function (trans) { 
      $(elem).attr('title', trans) 
    }
  )
);

This would be correct:

$row.find('.gridCellDetailAction')
.each(
  function (i, elem) {
    $translate('Grid.Show' + $(elem).attr('data-title') + 's')
    .then(  //Now then is called on the result of $translate
      function (trans) { 
        $(elem).attr('title', trans) 
      }
    )
  }
);