title: Ag-grid - Data does not load in laravel view
body: <p>I am using <code>Laravel Framework 5.7.19</code> and the latest version of <a href="https://www.ag-grid.com/javascript-getting-started/" rel="nofollow noreferrer">ag-grid</a>.</p>
  
  <p>I am loading the needed libraries from the example in my <code>app.blade.php</code>:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="{{ str_replace('_', '-', app()-&gt;getLocale()) }}"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;!-- CSRF Token --&gt;
      &lt;meta name="csrf-token" content="{{ csrf_token() }}"&gt;
  
      &lt;title&gt;{{ config('app.name', 'Laravel') }}&lt;/title&gt;
  
      &lt;!-- Scripts --&gt;
      &lt;script src="{{ asset('js/app.js') }}" defer&gt;&lt;/script&gt;
  
      &lt;!-- Fonts --&gt;
      &lt;link rel="dns-prefetch" href="//fonts.gstatic.com"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css"&gt;
  
      &lt;!-- Styles --&gt;
      &lt;link href="{{ asset('css/app.css') }}" rel="stylesheet"&gt;
  
      &lt;!-- ag-grid --&gt;
      &lt;script src="https://unpkg.com/ag-grid-enterprise/dist/ag-grid-enterprise.min.noStyle.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css"&gt;
      &lt;link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="app"&gt;
      @include('layouts.nav.mainNav')
  
      &lt;main class="py-4"&gt;
          @yield('content')
      &lt;/main&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My <code>grid.blade.php</code> looks like the following:</p>
  
  <pre><code>@extends('layouts.app')
  
  @section('content')
      &lt;div class="container"&gt;
          &lt;div class="row justify-content-center"&gt;
              &lt;div class=""&gt;
  
                  &lt;h1&gt;Hello from ag-grid!&lt;/h1&gt;
                  &lt;button onclick="getSelectedRows()"&gt;Get Selected Rows&lt;/button&gt;
                  &lt;div id="myGrid" style="height: 600px;width:500px;" class="ag-theme-balham"&gt;&lt;/div&gt;
  
                  &lt;script type="text/javascript" charset="utf-8"&gt;
                      // specify the columns
                      var columnDefs = [
                          {headerName: "Make", field: "make", rowGroupIndex: 0 },
                          {headerName: "Price", field: "price"}
                      ];
  
                      var autoGroupColumnDef = {
                          headerName: "Model",
                          field: "model",
                          cellRenderer:'agGroupCellRenderer',
                          cellRendererParams: {
                              checkbox: true
                          }
                      }
  
                      // let the grid know which columns and what data to use
                      var gridOptions = {
                          columnDefs: columnDefs,
                          enableSorting: true,
                          enableFilter: true,
                          autoGroupColumnDef: autoGroupColumnDef,
                          groupSelectsChildren: true,
                          rowSelection: 'multiple'
                      };
  
                      // 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 &amp; data we want to use
                      new agGrid.Grid(eGridDiv, gridOptions);
  
                      fetch('https://api.myjson.com/bins/ly7d1').then(function(response) {
                          return response.json();
                      }).then(function(data) {
                          gridOptions.api.setRowData(data);
                      })
  
                      function getSelectedRows() {
                          const selectedNodes = gridOptions.api.getSelectedNodes()
                          const selectedData = selectedNodes.map( function(node) { return node.data })
                          const selectedDataStringPresentation = selectedData.map( function(node) { return node.make + ' ' + node.model }).join(', ')
                          alert('Selected nodes: ' + selectedDataStringPresentation);
                      }
                  &lt;/script&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  @endsection
  </code></pre>
  
  <p>It is basically the simple example from the <a href="https://www.ag-grid.com/javascript-getting-started/" rel="nofollow noreferrer">Ag-grid JS example</a>.</p>
  
  <p><a href="https://i.stack.imgur.com/zaWeL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zaWeL.png" alt="enter image description here"></a></p>
  
  <p>The data does not load within the example. Any suggestions what I am doing wrong?</p>
  
  <p>I appreciate your replies!</p>