gologiusの巣

プログラミング、モデリングなどのメモです。誰かの役に立てるとうれしいです。

【JavaScript】JSON.parse() がエラーになる

事象

下記のようなエラーが発生する

JSON.parse: unexpected character at line 1 column 1 of the JSON data

文字列(JSON形式)をJSON.parse()でJSのオブジェクト型に変換する際に、 JSON構文エラーになっている模様。 構文チェッカーでチェックしても普通に問題はない。

JSON Pretty Linter - JSONの整形と構文チェック

環境

  • サーバー側(PHP)とフロントエンド側(JavaScriptJQuery)でAjax的なことをする
  • サーバー側にPOSTでアクセスすると、結果がJSONで返却される

以下JavaScript側サンプルコード

//サーバー上のファイルを削除する
function cancel(){
    
    if(!confirm('サーバー上のファイルを削除します。よろしいですか?')){
        return false;
    }

    //サーバーに受け渡し
    $.ajax({
        type: 'POST',
        url: 'php/cancel.php' <<<<< ★
    }).done((result)=>{
        showResultMsg(result);  
    });
}

function showResultMsg(json){
    
    console.log(json);
    var result = JSON.parse(json); // <<<<<<こいつがエラーを吐く
        
    if (result.result != 'SUCCESS'){
        //エラー時
        $('#result').attr('class','warning');                    
        console.log(result);
    }
    else {
        //成功時
        $('#result').attr('class','');                   
    }
    $('#result').text(result); 
}

原因

サーバー側のcancel.phpが原因。 他ファイルは全てUTF-8で統一されていたが、こいつだけUTF-8-BOMになっていた。 なので、'echo`して返却したJSONがおかしいことに なっていたっぽい

BOMとは

uxmilk.jp

感想

クソハマったのでつらかった。