JavaScript JSON.parseのエラー探知/スキップ

Question

前提・実現したいこと

JSON.parseする際に文字列の形式が違いエラーが発生してるかどうかの分岐処理がしたいです
下記のように記述しましたがエラー探知はできません
やりたいことはエラーが出た場合に違う処理を実行するという事です
詳しい方教えていただけませんでしょうか

追記
このようなコードでエラーを探知させることはできた
しかしエラーのalertを表示したあとにhelloが実行されてしまう
どうしたらエラー発生時と発生してない状態で処理を分けられるのか

<script>
window.onload=function(){
str='{a":"b"}';
try {
  const json = JSON.parse(str);
} catch (error) {
  alert("error");
}
alert("hello");
}
</script>

該当のソースコード

<script>
window.onload=function(){
str='{a":"b"}';//わざとエラーを発生させる エラーが出るとalertは実行されず処理が止まる
str=JSON.parse(str);
alert("hello");
}
</script>


<script>
window.onload=function(){
str='{a":"b"}';
if(JSON.parse(str)){//エラーが出るかどうかの条件分岐を考えたけど動かず
alert(str.a);
}else{
alert("error");
}
</script>

Answer 1

try...catchを試してみてください。try-catchの参考

上記の場合だと

<script>
window.onload=function(){
str='{a":"b"}';
try{ 
  JSON.parse(str); 
} catch(error){
   alert("hello");
}
}
</script>

のようにすれば良いように思います。

Comments

[thiz]

勉強します

Answer 2

try-catch文というものはご存じでしょうか？？tryブロックの中（下のコードで言うとstr = JSON.parse(str);）でエラーが発生したときに、catchブロックの中の処理を実行するというものです。

try {
  str = JSON.parse(str);
} catch {
  alert(str.a);
}

（追記）質問の追記を見ました。（聞きたいことはコメントくださると助かります）
この場合はエラーが発生したらその場で関数の実行が終了すればよいのだと思うので、catchブロックの中でreturn false;してはいかがでしょう？？

Comments

[thiz]

教えて下さったコードですとundefinedとアラートがでますが、もし、undefinedであればエラーが出ているという記述を別途する必要がありますか？

[thiz]

条件分岐で処理を続けさせたいんですが、
例えば作りとしては下記のような形にしたいです
エラーは探知できますが、okが出ません
よろしければ教えていただけませんでしょうか

<script>
window.onload=function(){
str='{a":"b"}';// {"a":"b"}OKになるはずの記述
try {
str = JSON.parse(str);
} catch {
if(typeof str.a==='undefined') {
alert("error");
}else{
alert(str.a);//OK
}
}

}
</script>

[hallen0225]

ここで、"str.a"の値がundefinedなので、undefinedと出るのは当然です。
（strには、JSONから得られたオブジェクトが入るわけですが、ここでは変換に失敗しているので、strには元の文字列がそのまま入っています。よって、str.aに相当するものが存在しないためです）

undefinedかどうかを判定するまでもなく、catchブロックに到達した時点でエラーが出ていることは明らかなので、undefinedであることを判定する必要はありません。
"alert(str.a);"の代わりに、"alert("文字列の変換に失敗しました")のように、表示したいエラーメッセージを出せばよいのではないでしょうか？？？

[hallen0225]

"OK"というメッセージはどのようなときに出したいのですか？
JSON.parseに成功したときに出したいのであれば、回答に追記した通り、catchブロックに"return false;"を追記して、
try {
str = JSON.parse(str);
} catch {
alert(str.a);
return false;
}
alert("OK");

とすれば、エラーが発生していないときには"undefined"のアラートは出なくなります。

[thiz]

すみません、初心者でよくわかってなくて。。
retrun falseするとはこういうことですか？動きません

<script>
window.onload=function(){
str='{a":"b"}';
try {
const json = JSON.parse(str);
} catch (error) {
alert("error");
retrun false;
}
alert("hello");
}
</script>

[hallen0225]

"retrun"のスペルが間違っています。"return"です。
（もらったソースコードはコピペした方がよいです）

[thiz]

try {
str = JSON.parse(str);
} catch {
alert(str.a);
return false;
}
alert("OK");

できました。
もっと勉強します
ありがとうございました！

[hallen0225]

無事出来たようでよかったです。
「動きません」だけでなく、どこでどういうエラーが出て動かないのか見れるとよいですね。（ブラウザの「開発者ツール」というもので見られます。調べてみてください））

[thiz]

ありがとうございます。
新たな問題が発覚しました。
strにnullを設定したら、エラー探知がききません
なぜでしょうか？

<script>
window.onload=function(){
str=null;
try {
str = JSON.parse(str);
} catch {
alert("えらー");
return false;
}
alert("OK");
}
</script>

[thiz]

strがnullだったらエラーにしたい場合どうしたらいいんでしょうか？

[hallen0225]

JSON.parse("null")はエラーが出ないようですね。
ここでは、"str = JSON.parse(str);"ではstrにnull（文字列ではありません）が代入されて、処理が正常終了してしまっています。そのため、catchブロックに遷移せず、"OK"が出てしまうようです。

参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#examples

もし、（偶然にも）"null"という文字列が出ることがあり得るのであれば、
str = "null"; //わざとエラーを発生させる
try {
str = JSON.parse(str);
if (str === null) {
alert("えらー");
return false;
}
} catch {
alert(str.a);
return false;
}
でしょうか。

[hallen0225]

> strがnullだったらエラーにしたい場合どうしたらいいんでしょうか？
普通にif文でalertを出せばいいのだと思いますが。（入れ違いでソースを書いてしまいましたが）

[thiz]

ありがとうございました！
感謝します

[peyo]

try - catchを用いるのは非同期のイメージでしたが、今回の場合でも、try - catchを使用するのが一般的なのでしょうか？