使用HTML数据属性将刀片阵列注入脚本

Question

I have a blade template, which has a script included in it. That script needs access to language strings, which are accessible in a @lang('intro') variable. I am wondering if there is way of injecting the whole array into the script via a html data attribute, and then retrieve it in the script using jquery.

So far I have the following:

../en/intro.php:

<?php
return [
    'step1' => 'Welcome',
    'step2' => 'Step 2',
];

../de/intro.php

<?php
return [
    'step1' => 'Willkommen',
    'step2' => 'Schritt 2',
];

In the blade template I am injecting each string:

<script data-id="intro-script" 
        data-introStep1="@lang('intro.step1')" 
        data-introStep2="@lang('intro.step2')" 
        src="{{ mix('js/intro.js') }}">

And retrieve it using jQuery in the script intro.js:

document.querySelector('script[data-id="intro-script"]').getAttribute('data-introStep1');

This works so far, but isn't great for many more strings. I am wondering if its possible to combine data-introStep1 and data-introStep2 in a single data attribute which contains the whole @lang('intro') array, not just a single string per attribute.

Answer 1

Your translation file can be packed as JSON encoded string like so:

<script data-id="intro-script" 
    data-intro='@json(__('intro'))'
    src="{{ mix('js/intro.js') }}"
></script>

Then, retrieve using Javascript.

const intro = JSON.parse(
  document.querySelector('script[data-id="intro-script"]').dataset.intro
);