【javascript】JSON.stringify()でjsonを文字列に変換する方法

asaba 著者:asaba

【javascript】JSON.stringify()でjsonを文字列に変換する方法

自分のための備忘録ということで今回はjson.stringify()の使い方をちょこっと書いていきます。

javascriptでjsonファイルを扱ってあれこれするということはよくあります。というのも自分は今まで

あまり意識せず(理解をあいまいにして)使っていました。でもなあなあにしていると後で困るかなと思い

jsonを成形するときに使うであろうjson.stringify()の使い方をさくっとおさらいすることにしました。

 


console.log(JSON.stringify({ num: 5, class: 1 }));

{"num":5,"class":6}

基本的な動きとしてはこんな感じ。

またJSON.stringify()は、三つまで引数を指定することができます。一つ目は成形対象のオブジェクト、

二つ目はコールバック(決められたタイミングで発火する関数)

三つめはインテントを指定することができます。

例えば

<div id="crayon-5d5ba94fea7ae091061679-1" class="crayon-line">const <span class="crayon-i">json_obj</span> = <span class="crayon-sy">{</span><span class="crayon-s">"ID"</span><span class="crayon-sy">:</span> <span class="crayon-cn">1</span><span class="crayon-sy">,</span><span class="crayon-s">"name"</span><span class="crayon-sy">:</span> <span class="crayon-s">"asaba"</span><span class="crayon-sy">,</span><span class="crayon-s">"gender"</span><span class="crayon-sy">:</span> <span class="crayon-s">"male"</span><span class="crayon-sy">}</span></div>
<div id="crayon-5d5ba94fea7ae091061679-2" class="crayon-line crayon-striped-line"></div>
<div id="crayon-5d5ba94fea7ae091061679-3" class="crayon-line"><span class="crayon-t">const</span> <span class="crayon-i">decoded_json</span> = <span class="crayon-i">JSON</span><span class="crayon-sy">.</span><span class="crayon-e">stringify</span><span class="crayon-sy">(</span><span class="crayon-i">json_obj</span><span class="crayon-sy">,</span> <span class="crayon-t">null</span><span class="crayon-sy">,</span> <span class="crayon-s">" 2"</span><span class="crayon-sy">)</span></div>
<div id="crayon-5d5ba94fea7ae091061679-4" class="crayon-line crayon-striped-line"><span class="crayon-i">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-i">decoded_json</span><span class="crayon-sy">)</span></div>

 

第三引数に2を指定していますが、ここではインテントを2つ付与するという意味になります。

つまり、成形されたjson全てにインテントがついて出力されます。

 

<div id="crayon-5d5ba94fea7b5405248571-1" class="crayon-line"><span class="crayon-sy">{</span></div>
<div class="crayon-line"><span class="crayon-s">  "ID"</span><span class="crayon-sy">:</span> <span class="crayon-cn">1</span><span class="crayon-sy">,</span></div>
<div id="crayon-5d5ba94fea7b5405248571-3" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-s">"name"</span><span class="crayon-sy">:</span> <span class="crayon-s">"asaba"</span><span class="crayon-sy">,</span></div>
<div id="crayon-5d5ba94fea7b5405248571-4" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-s">"gender"</span><span class="crayon-sy">:</span> <span class="crayon-s">"male"</span></div>
<div id="crayon-5d5ba94fea7b5405248571-5" class="crayon-line"><span class="crayon-sy">}</span></div>

このように、第三引数を上手く使うことで整列された文字列を作ることができます。

こんな感じですがおさらい終了になります。

※夏休みボケで色々忘れていそうですが気合で乗り切ります。それでは!

 

  • この記事いいね! (0)

著者について

asaba

asaba author

好きなもの:RPG、チョコミント 少しずつ頑張ります。