Passing data from PHP to javascript in Drupal 8

in this article, I'll show you how to pass data from PHP to javascript in Drupal 8.

mymodule.libraries.yml

first create your librarie as in example below :

mymodule-js:
  version: 1.x
  js:
    js/mymodule.js: {}
  dependencies:
    - core/jquery
    - core/drupalSettings

mymodule.module

use $variables['#attached']['drupalSettings'] to pass variable to javascript like the below example :

<?php


/**
 * @param $variables
 */
function mymodule_preprocess_page(&$variables)
{
  $color_body = 'red';
  //Add a JS library
  $variables['#attached']['library'][] = 'mymodule/mymodule-js';
  // pass variable to Drupal.Settings
  $variables['#attached']['drupalSettings']['mymodule']['color_body'] = $color_body;
}

js/mymodule.js

We can access this data in javascript by drupalSettings:

(function ($, Drupal, drupalSettings) {
  Drupal.behaviors.MyModuleBehavior = {
    attach: function (context, settings) {
      // get color_body value with "drupalSettings.mymodule.color_body"
      var color_body = drupalSettings.mymodule.color_body;
      $('body').css('background', color_body);
    }
  };
})(jQuery, Drupal, drupalSettings);