TransformData

gistfile1.js

// How to round number (exemple)

  transformData: function(hit) {
    hit.stars = [];
    for (var i = 1; i <= 5; ++i) {
      hit.stars.push(i <= hit.rating);
    }
    return hit;
  }


// What I have

  var hitTemplate =
  '<article class="content-article">' +
    '<div class="article-infos">' +
      '<image src="{{thumbnail_url}}">' +
      '<div class="article-description">' +
        '<h3>{{{_highlightResult.title.value}}}</h3>' +
        '<p>{{{_highlightResult.short_description.value}}}</p>' +
      '</div>' +
    '</div>' +
    '<div class="article-details">' +
      '<div class="details-rating">{{score}}</div>' +
      '<div class="details-popularity">{{popularity}}</div>' +
      '<div class="details-price">${{price}}</div>' +
    '</div>' +
  '</article>';

  search.addWidget(
    instantsearch.widgets.hits({
      container: '#hits-container',
      templates: {
       	empty: noResultsTemplate,
        item: hitTemplate
      },
      hitsPerPage: 20
     })
  );


// What I should have?

  search.addWidget(
     instantsearch.widgets.hits({
      container: '#hits-container',
      templates: {
      	empty: noResultsTemplate,
        item: hitTemplate
      },
      hitsPerPage: 20,
      transformData: function(hit) {
        hit.score = [];
        for (var i = 1; i <= 5; ++i) {
          hit.score.push(i <= hit.rating);
        }
        return hit;
      }
    })
  );

this is a function for creating an array of boolean based on a number. We use that for stars.

https://dayone.me/2twFzxf

Paint points
How to do DataTransform on:

Round rating Score
If price == 0 > translate into FREE
If popularity score > 999 == add comma like: 1,000

Round rating Score -> use a native javascript Math function http://www.w3schools.com/jsref/jsref_round.asp
so

transformData: function(hit) {
        hit.score = Math.round(hit.score);
        return hit;
      }

If price == 0 > translate into FREE
-> use a condition

transformData: function(hit) {
       if (hit.score === 0){
            hit.score = "FREE";
       }
        return hit;
      }

For adding readability to the numbers, you could use an external lib.
ex.

transformData: function(hit) {
       hit.score = humanize(hit.score);
        return hit;
      }

Oh ok much simpler than what I tried.

Then I guess for the price we should have something like:

transformData: function(hit) {
    if (hit.price == 0) {
        hit.price = "FREE";
    }
       return hit;
    }

For popularity, based on what you give me, I need to add :
var humanize = require('humanize'); and use humanize.numberFormat(number [, decimals = 2, decPoint = '.', thousandsSep = ',']);

To avoid issue with $ I changed for that:

transformData: function(hit) {
            if (hit.price === 0){
              hit.price = "FREE";
            }
            else 
              {
                hit.price = "$" + hit.price;
              }
            return hit;
          }

Thanks for your help @Shipow 👍
Still looking for why I can't use humanize : Uncaught ReferenceError: require is not defined but the rest is ok.
Moving everything into my existing development ;)