Geek Answers Handbook

Using JavaScript to Display Laravel Variable

In my code I use typeahead.js . I am using Laravel 5 and I need to replace the variables with var statesmy variable {{ $jobs }}. I need to list all the job names as an array.

In my controller I have

$jobs = Job::all(['job_title']);

I know the loop method in javascript, but I don't know how to "bind" my blade variable in javascript. Does anyone know how to do this?

I tried in my.js

var jobs = {{ $jobs }}

But that will not work.

+8
source share
6 answers

, , JSON, JavaScript. :

var jobs = JSON.parse("{{ json_encode($jobs) }}");

, PHP , . Blade. JavaScript ( !), script , . ( , JavaScript. document.ready - )

<script>
    var jobs = JSON.parse("{{ json_encode($jobs) }}");
</script>

, ajax.

+22

jobs = {!! json_encode($jobs) !!};
+12

:

var jobs = JSON.parse("{{ json_encode($jobs) }}");

escaped html , json- javascript, , :

var jobs = JSON.parse("{!! json_encode($jobs) !!}");

var jobs = JSON.parse(<?php echo json_encode($jobs); ?>);

+4

:

var job = {!! json_encode($jobs ) !!}

Java

+1

, window " <head> , , .

TL;DR

.env

GEODATA_URL="https://geo.some-domain.com"

/geodata.php

<?php

return [
    'url' => env('GEODATA_URL')
];

///root.blade.php

<head>
    <script>
        window.geodataUrl = "{{ config('geodata.url') }}";
    </script>
</head>

/JS// /geodataUrl.js

const geodataUrl = {
    data() {
        return {
            geodataUrl: window.geodataUrl,
        };
    },
};

export default geodataUrl;


<template>
    <div>
        <a :href="geodataUrl">YOLO</a>
    </div>
</template>

<script>
import geodataUrl from '../mixins/geodataUrl';

export default {
    name: 'v-foo',

    mixins: [geodataUrl],

    data() {
        return {};
    },

    computed: {},

    methods: {},
};
</script>

TL;DR

, , app.js app.js:

Vue.mixin({
    data() {
        return {
            geodataUrl: window.geodataUrl,
        };
    },
});

- , window ".

, , . grep, "window.geodataUrl" , , , .

, .

, JavaScript::put([]), , , , , , , , , .

, Vue, window.chartData, JavaScript::put([ 'chartData' => $user->chartStuff ]). chartData , , , PHP window.chartData, , JavaScript::put() .

:

/* data comes from poop.php via JavaScript::put */

"JavaScript::put" . , "" 6 , .

Vue:

props: {
    chartData: {
        type: Array,
        required: true,
    },
},

, JavaScript::put(), Vue , . Vue , Object , . GET / .

, Laravel Vue, / .

, , ES6:

/web.php

Route::get('/charts/{user}/coolchart', 'UserController@getChart')->name('user.chart');

/Http//UserController.php

public function getChart(Request $request, User $user)
{
    // do stuff
    $data = $user->chart;

    return response()->json([
        'chartData' => $data,
    ]);
}

Vue, :

created() {
    this.handleGetChart();
},

methods: {
    async handleGetChart() {
        try {
            this.state = LOADING;
            const { data } = await axios.get('/charts/${this.user.id}/coolchart');

            if (typeof data !== 'object') {
                throw new Error('Unexpected server response. Expected object, got: ${data}');
            }

            this.chartData = data.chartData;
            this.state = DATA_LOADED;
        } catch (err) {
            this.state = DATA_FAILED;
            throw new Error('Problem getting chart data: ${err}');
        }
    },
},

, Vue , , .

, :

computed: {
    isLoading() { return (this.state === LOADING); },
    isDataLoaded() { return (this.state === DATA_LOADED); },
    isDataFailed() { return (this.state === DATA_FAILED); },
},

, :

<div v-show="isLoading">Loading...</div>
<v-baller-chart v-if="isDataLoaded" :data="chartData"></v-baller-chart>
<button v-show="isDataFailed" type="button" @click="handleGetChart">TRY AGAIN</button>
0

laravel 6

var jobs = {!! json_encode($jobs) !!};

@json

var jobs = @json($jobs);

php

 var jobs = <?php echo json_encode($jobs); ?>
0

More articles:


All Articles