Load db data into javascript file

Question

I am using Laravel 5.5 and I am trying to work with ag-grid and want to load my data that is coming from my db directly into the Javascript file.

My Migration looks like the following:

public function up()
{
    Schema::create('tasks', function (Blueprint $table) {
        $table->increments('id');
        $table->string('name');
        $table->timestamps();
    });
}

My Frontend looks like the following:

example.js

// specify the columns
var columnDefs = [
    {headerName: "Name", field: "name"},
    {headerName: "Created_At", field: "created_at"},
    {headerName: "Updated_At", field: "updated_at"}
];

// specify the data
var rowData = [
    {name: "TODO 1", created_at: "01.01.2018", updated_at: "05.11.2016"},
    {name: "TODO 1", created_at: "01.01.2018", updated_at: "05.11.2016"} // here I would like to replace this dummy data with my db data
];

// let the grid know which columns and what data to use
var gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
    onGridReady: function () {
        gridOptions.api.sizeColumnsToFit();
    }
};

// used in our jasmine test
function selectAllRows() {
    gridOptions.api.selectAll();
}

// wait for the document to be loaded, otherwise ag-Grid will not find the div in the document.
document.addEventListener("DOMContentLoaded", function () {
    // lookup the container we want the Grid to use
    var eGridDiv = document.querySelector('#myGrid');

    // create the grid passing in the div to use together with the columns & data we want to use
    new agGrid.Grid(eGridDiv, gridOptions);
});

home.blade.php

<html>

<head>
    <script src="https://www.ag-grid.com/dist/ag-grid/ag-grid.js"></script>
    <script src="example.js"></script>
</head>

<body>
    <h1>Ag-Grid Example</h1>
    <div id="myGrid" style="height: 115px;width:500px" class="ag-fresh"></div>

    <!-- Own Scripts -->
    <script src="{{ asset('js/example.js') }}"></script>
</body>

</html>

Any suggestions how to insert my data that I load from the database into the the variable rowData in my example.js file?

I appreciate your replies!

Alexey Mezenin · Accepted Answer · 2018-01-02 07:14:25Z

3

If you're getting the data as a collection, you can just pass the data like this:

<script>
    var app = {{ $collection }};
</script>

If it's an array, you can use @json directive:

<script>
    var app = @json($array);
</script>

You also could use one of the available packages or put the data into a hidden input HTML element to be able to use this data in JS.

edited Jan 2, 2018 at 7:14

answered Jan 1, 2018 at 9:48

Alexey Mezenin

164k27 gold badges309 silver badges287 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Load db data into javascript file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related