JS-файл не может получить доступ к переменной laravel

Question

Я передаю массив из моего контроллера.

Теперь я поместил этот код в свой Laravel 6. * Blade View,

<script>
    var app = <?php echo json_encode($array); ?>;
</script>

Это работает просто отлично.

Однако, если я помещу тот же фрагмент строки (или любую из следующих строк) в свой файл app.js, это не сработает.

var app = <?php echo json_encode($array); ?>;

var app = {!! json_encode($array->toArray()) !!};

var app = '<?php echo json_encode($array); ?>';

Каждый раз, когда я получаю недопустимую синтаксическую ошибку.

Я не уверен, является ли это действительным заданием для StackOverflow, но я уже пробовал все другие подобные решения и ни одно изони работают на меня.

Answer 1

Это потому, что у вас нет доступа к записи php-кода в js-файл, или вы можете использовать Ajax для получения переменной php.

В своем заявлении, если вы добавили свой код в свой blade-файл до включения app.js файл вы сможете получить переменную app в вашем файле js. Пример:

<script>
var app = @json($array)
</script>
<script src="path to your app js file"></script>

А теперь в вашем js-файле приложения, если вы напечатаете переменную app, вы увидите результат console.log(app); в вашем файле app.js

Answer 2

Одна вещь, которую вы можете сделать, это переместить javascript в шаблон и создать маршрут к нему как:

Route::get('/app.js', function () {
    $result = view('app', ['array' => [1,2,3,5,8]]);
    return Response::make($result, 200)
        ->header('Content-Type', 'application/javascript');
});

Затем в resouces \ views

<script>
    var app = <?php echo json_encode($array); ?>;
</script>

Обычный способ сделать этосоздать конечную точку, которая возвращает только json, а затем использовать, например, библиотеку api или axios на стороне клиента.

Примерно так:

Route::get('/app', function () {
    return [1,2,3,5,8];
});

<script>
    fetch(endPointUrl("/app")).then(response => {
        console.log(response);
    }).catch(error => {
        console.error(error);
    })
</script>

Где endPointUrl - просто вспомогательная функция, которая создает полнуюURL-адрес.