Laravelのblade内のscriptでphpからのデータを受け取る

laravelのbladeにJSを書いてその中でphpからのデータを受け取りたいとき

以下のようなデータをViewに返すとする。

view(html, ['value'=>$value]);


値の場合

$value = 'string';

エスケープするかは自由

文字列もしくは数値として受け取れる。

const val = "{{ $value }}"


配列の場合

$value = ['a','b'];
const val = {!! json_encode($value) !!}


このまま配列として扱える

val.forEach(item => {
 console.log(item);
});

連想配列の場合

$value = ['a'=>'aa', 'b'=>'bb'];

PHPでは連想配列だが、JSではJsonオブジェクト扱いになる

const val = {!! json_encode($value) !!}
  Object.keys(val).forEach(item =>{
  console.log(item);
});

もしくは

for (const key in val) {
 if (Object.hasOwnProperty.call(val, key)) {
  const value = val[key];
  console.log(key, value);
 }
}



JSONを解析すれば、オブジェクトだが、配列として扱える
JSON.parseをすれば配列として扱える

Json文字列を解析する

const val = JSON.parse('{!! json_encode($value))!!}')
jsonを文字列にしないとparseできない。


このまま配列として扱える
val.forEach(item => {
 console.log(item);
});

しかし、最初の連想配列の中で、値にJsonを持っている場合、

$value = [
 'a'=>'{\"key\":\"value\"}',
 'b'=> ['key'=>'val']
];

普通ない。bのように配列でもたせる。
仮にaのようなJsonで値を持っていた場合、
JSに渡したときは、JSON.parseできないので、json_encodeしたらそのままオブジェクトとして扱うしかない。

JSにどのように渡すかによって処理が変わる。

配列とオブジェクトのforEach

配列を展開するときforEachを使うことがあるが、

要素の取り出しに注意する。

配列の場合、elementでとれるのは値の方であるが、

オブジェクトの場合、elementでとれるのはキーのほうである。

$value = ['a'=>'aa', 'b'=>'bb']; 
const val = {!! json_encode($value) !!} // jsonにした場合
 Object.keys(val).forEach(item =>{
  console.log(item); // a , b
});
const val = JSON.parse('{!! json_encode($value))!!}') // 配列にした場合
val.forEach(item =>{
  console.log(item); // aa , bb
});