Q&A
json化までは問題なくできていますのでbladeとjqueryを追記してください。
controller
1class UserController extends Controller 2{ 3 public function userlist() 4 { 5 6 $all = User::all(); 7 $items = json_encode($all,JSON_UNESCAPED_UNICODE); 8//var_dump($items); 9 return view('userlist',['items'=>$items]); 10 11 } 12}
laravelでdatatableのリストを作成しています。
jsonデータをjqueryのライブラリのdatatableを使ってbladeに表示させたいのですが、マニュアル通りなどいろいろ試してみたのですがエラーが出てしまいます。
dumpで$itemがjsonの形式になっていることは確認できています。
またcontrollerから渡された$itemの代入ではエラーになりますが、直接jsonの配列をbladeに書いた場合はしっかりテーブルに表示され機能していました。
そのため、自分には他の原因がわからず手詰まりです。他に何か問題になるようなことがあれば教えていただきたいです。
$itemの中身を念のため書いておきます。
var_dump($items);
string(207480) "[{"id":1,"name":"古屋千里","name_kana":"フルヤチサト","gender_id":1,"mail_address":"darwin@example.net","birthday":"1962-07-29","birthplace":"神奈川県","blood_type":"O","staff_number":"788"}, .........
//以下略(実在しない情報なので問題ありません)
追記
blade
1<HTML> 2 3<HEAD> 4 5<script src="https://code.jquery.com/jquery-3.3.1.min.js" 6integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"> 7</script> 8 9<link rel="stylesheet"type="text/css" 10href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css"> 11 12<script type="text/javascript" charset="utf8" 13src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"> 14</script> 15 16<script> 17 18 $(document).ready(function() { 19 20 var jsonData = $('#hidden').val(); 21 22 $('#users').DataTable( 23 { 24 'data' :jsonData, 25 26 'columns' :[ 27 {data:"id",width:100}, 28 {data:"name",width:100}, 29 {data:"name_kana",width:100}, 30 {data:"gender_id",width:100}, 31 {data:"mail_address",width:100}, 32 {data:"birthday",width:100}, 33 {data:"birthplace",width:100}, 34 {data:"blood_type",width:100}, 35 {data:"staff_number",width:100}, 36 ], 37 38 "language":{"url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Japanese.json"}, 39 40 'columnDefs': [ 41 { 42 'targets': 9, 43 'width': '10px', 44 'searchable': false, 45 'orderable': false, 46 'render': function (){ 47 return '<input type="button" name="edit" value="変更">' 48 } 49 } 50 ], 51 52 }); 53 }); 54 55 function del_confirm(id){ 56 57 if(window.confirm('この内容を削除しますか？')){// 「OK」時の処理開始 ＋ 確認ダイアログの表示 58 59 window.location.href="/delete/"+id; 60 61 return true; 62 63 }// 「OK」時の処理終了 64 else{// 「キャンセル」時の処理開始 65 66 window.alert('キャンセルされました'); // 警告ダイアログを表示 67 return false; 68 69 }// 「キャンセル」時の処理終了 70 71 } 72 73</script> 74 75</HEAD> 76 77<BODY> 78 79<input id="hidden" type="hidden" value="{{$items}}"> 80 81 <table id="users" class="display" style="width:100%"> 82 <thead> 83 <tr> 84 <th>ID</th> 85 <th>名前</th> 86 <th>カナ</th> 87 <th>性別</th> 88 <th>メール</th> 89 <th>生年月日</th> 90 <th>都道府県</th> 91 <th>血液型</th> 92 <th>担当No</th> 93 <th></th> 94 <th></th> 95 </tr> 96 </thead> 97 <tbody> 98 99 100 101 </tbody> 102 <tfoot> 103 <tr> 104 <th>ID</th> 105 <th>名前</th> 106 <th>カナ</th> 107 <th>性別</th> 108 <th>メール</th> 109 <th>生年月日</th> 110 <th>都道府県</th> 111 <th>血液型</th> 112 <th>担当No</th> 113 <th></th> 114 <th></th> 115 </tr> 116 </tfoot> 117 </table> 118 119</BODY> 120 121</HTML>
回答2件
0
ベストアンサー
Controller
diff
1class UserController extends Controller 2{ 3 public function userlist() 4 { 5 6- $all = User::all(); 7- $items = json_encode($all,JSON_UNESCAPED_UNICODE); 8+ $items = User::all(); 9 //var_dump($items); 10 return view('userlist',['items'=>$items]); 11 12 } 13}
blade
diff
1$(document).ready(function() { 2- var jsonData = $('#hidden').val(); 3+ var jsonData = @json($items); 4 5+ console.log(jsonData);
こうしてみてエラーになるか試してください。
エラーになった場合はコンソールの出力も追記お願いします。
投稿2021/03/29 07:12
編集2021/03/29 07:36総合スコア133
0
$itemsはphpの連想配列なのでJSONではありません。
javascriptにJSONとして渡すのであれば、JSONにエンコードして埋め込んで下さい。
php
1(例) 2$json_str = json_encode($items);
HTML
1<?= $json_str ?>
また、javascript側がJSONではなくObjectにしないといけないのであれば、javascript側でJSON文字列をオブジェクトに変換して下さい。
javascript
1(例) 2const json = '<?= $json_str ?>'; 3const obj = JSON.parse(json);
投稿2021/03/29 05:34
編集2021/03/29 05:35
総合スコア6
回答ありがとうございます。
自分の質問文に書いてあるjson_encodeでエンコードはできてないということでしょうか？訂正箇所がどこなのかわかりませんでした....
この$itemsは連想配列なんでしょうか？
あなたの回答
tips
プレビュー
