How to read JSON inside script tag on Laravel + AngularJs

Question

I'm confused that it failed to use JSON on Angular + Laravel(5.2.11)

My plan is,
1. Convey JSON to a blade file
2. Get JSON inside script tag, and set it to a variable
3. Display each data

I added interpolateProvider to avoid duplicating Laravel and Angular description. But actual displayed data is

I checked the following was display I expected.

var json = {!! $contents !!};

Controller.php

public function show()
{
    $champions = DB::table('Champion')
        ->select('ChampionName', 'ChampionKey')
        ->orderBy('ChampionKey')
        ->get();

    return view('allChampionsPage')->with('contents', json_encode($champions));
}

allChampionsPage.blade.php

@extends('layouts.defaultAngular')

@section('menuItem1', 'When buy')
@section('menuItem2', 'When killed')
@section('menuItem3', 'Where lane')
@section('menuItem4', 'How many CS')
@section('menuItem5', 'Search')

defaultAngular.blade.php

<!DOCTYPE html>
<html lang="ja" ng-app="itemBuildStatisticsApp">
<head>
  <link rel="stylesheet" href="{{{asset('/css/bootstrap.css')}}}" type="text/css">
  <link rel="stylesheet" href="{{{asset('/css/default.css')}}}" type="text/css">
</head>

<body ng-controller="ChampionsController as ChampionsCtrl">
  <?php include_once("analytics/analyticstracking.php") ?>
  <div id="container">

    <div id="header" class="middleContentItem"></div>

    <div id="middle">
      <div id="menu" class="middleContentItem"></div>

      <div id="contents" class="middleContentItem">
        <ul ng-repeat="champion in ChampionsCtrl.champions">
          <% champion.ChampionKey + ', ' + champion.ChampionName %>
        </ul>
      </div>
    </div>

    <div id="right"></div>

    <div id="footer" class="middleContentItem"></div>
  </div>

  <script type="text/javascript">
    var json = {!! $contents !!};

    var app = angular.module('itemBuildStatisticsApp', [], funtion($interpolateProvider){
      $interpolateProvider.startSymbol('<%');
      $interpolateProvider.endSymbol('%>');
    });

    app.controller('ChampionsController', function(){
      this.champions = json.query();
    });
  </script>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
</body>
</html>

Look in browser console for errors. You will find angular a lot simpler if you just think of Laraval as a back end api and use $http to make data requests. There is no need to have 2 template engines. json.query() is most likely not a function also — charlietfl
– charlietfl, Commented Jan 28, 2016 at 3:37
Also... angular.min.js must load before your code or angular will be undefined when your code runs — charlietfl
– charlietfl, Commented Jan 28, 2016 at 3:38
Thanks. I didn't see how to directly convey from Laravel to AngularJS, I applid a way, var json = {!! $contents !!};. Two templated engines was created on purpose for trying extends blade, it is ok. Amount of Console error is two, First, Uncaught Error: [$injector:modulerr] Failed to instantiate module itemBuildStatisticsApp due to: Error: [$injector:nomod] Module 'itemBuildStatisticsApp' is not available, Second, Uncaught SyntaxError: missing ) after argument list (line is var app = ....). i consider to suspend because of no advances. I have to foucs learning Angularjs. — hikozuma
– hikozuma, Commented Jan 28, 2016 at 22:06
links in console for those errors will explain them or use development version of angular for verbose output. Obviously have some dependency and syntax issues — charlietfl
– charlietfl, Commented Jan 28, 2016 at 22:10
Based on your advice, I rewrite a programming, which worked!! 1. typo function(funtion), 2. replace json.query() with angular.fromJson(json) — hikozuma
– hikozuma, Commented Jan 28, 2016 at 22:44

hikozuma · Accepted Answer · 2016-01-28 22:55:08Z

1

Modified code

  <script type="text/javascript">
var json = {!! $contents !!};

var app = angular.module('itemBuildStatisticsApp', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');
});

app.controller('ChampionsController', function(){
  this.champions = angular.fromJson(json);
});

answered Jan 28, 2016 at 22:55

hikozuma

798 bronze badges

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

Collectives™ on Stack Overflow

How to read JSON inside script tag on Laravel + AngularJs

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