[PHP-JavaScript] JSONでの連携処理

ホーム
アプリ関連ニュース
技術情報
[PHP-JavaScript] JSONでの連携処理

2020年3月13日
技術情報

PHPで配列をJSONエンコードして、JavaScriptに渡して、フロント側でparseして使用するといった状況を想定して処理を作成しました。

以下のような動作を想定しています。

PHP

//PHPで配列をJSONエンコードしてJSに渡す
$testlist = array('1' => 'Tokyo', '2' => 'Osaka');
$jsonlist = json_encode($testlist);

JavaScript

//JSONリストを取り出し、無事parseできているかを確認
let jsonlist = JSON.parse('<?php echo $jsonlist; ?>');
console.log(jsonlist);

上記の実行結果

次に「Osaka」のかわりに「!””#$%&'()=~|\^-@[{`]:;+*}\/.,<>?_”」といった文字列を使用した場合、動作するのかを確認しました。

単純に「Osaka」の文字列を「!””#$%&'()=~|\^-@[{`]:;+*}\/.,<>?_”」に置き換えただけで実行した場合、以下のエラーになりました。

上記のエラーの原因は「!””#$%&'()=~|\^-@[{]:;+*}\/.,<>?_"」の中に「'」が含まれているため「!""#$%&'()=~|\^-@[{]:;+*}\/.,<>?_”」がひとつの文字列として認識できなくなっているのが原因のようです。

「’」の手前に「\」の追加をおこない対応しました。

「\」の追加前

「\」の追加後

この状態で動作確認してみます。

JSONエンコードはうまくいきました。

しかしJavaScript側で取り出した時点で上記のエラーが発生してしまいました。

JavaScript側でJSON文字列を取り出す際のレンダリング後のソースコードを確認したところ、以下のようになっていました。

let jsonlist = JSON.parse('{"1":"Tokyo","2":"!\"\"#$%&'()=~|\\^-@[{`]:;+*}\\\/.,<>?_\""}');
console.log(jsonlist);

JavaScript側でエラーなくparseできるようにするには「$jsonlist」内の文字列をJavaScriptがひとつの文字列として認識できるように調整する必要がありそうです。

再度PHPに戻り、以下のコードの追加をおこないJavaScript側でparseできるように調整しました。

//バックスラッシュのエスケープを2重に
if(strpos($jsonlist,"\\") !== false){
    $jsonlist = str_replace("\\", '\\\\', $jsonlist);
}
//single-quotationのエスケープを追加
if(strpos($jsonlist,"'") !== false){
    $jsonlist = str_replace("'", "\'", $jsonlist);
}
//double-quotationのエスケープを追加
if(strpos($jsonlist,"\"") !== false){
    $jsonlist = str_replace("\"", '\\"', $jsonlist);
}

上記のコードを追加した上で実行したところ、無事JavaScript側でparseできるようになりました。

実行結果：