【JavaScript】JSON文字列の整形

はじめに

今回はJavaScriptを使って、JSON文字列の整形を行います。

是非、参考にしてみてください。

関連

LaravelにTypeScriptを導入

今回は、Laravel8で作成したプロジェクトに、TypeScriptを導入します。

【FullCalendar】プレミアム機能

FullCalendarのプレミアム機能を評価してみました。

【Django】FullCalendarでスケジュールのDB登録・表示【実践向け】

FullCalendarを利用して、スケジュールを登録しカレンダーに表示する簡単なWebアプリケーションを作成してみます。

【Laravel】Vue.js v3導入とComposition API実装【Vite】

LaravelプロジェクトにVue3を導入し、Composition APIの実装を行いました。

JSON文字列の整形

整形

JSON形式の文字列を整形してみます。
まずは JSON.parse を使い、オブジェクトに変換します。

JSON.stringify を利用して整形を行います。

const jsonString = '{"name":"tanaka","age":25}';
const jsonObj = JSON.parse(jsonString);
const json = JSON.stringify(jsonObj, null, 4);
console.log(json);

整形結果は以下のようになりました。

{
    "name": "tanaka",
    "age": 25
}

JSON.stringify の第三引数はスペースを指定できます。
4を指定すると、半角スペース4つ分のインデントになります。

JSON.stringify(jsonObj, null, 4);

タブ文字列を指定することもできます。

JSON.stringify(jsonObj, null, "\t");

0を指定すると、改行もインデントもされません。

{"name":"tanaka","age":25}

JSON文字列不正チェック

文字列がJSON形式かどうかチェックしてみましょう。

try {
    const jsonString = "[aaa";
    const jsonObj = JSON.parse(jsonString);
} catch (error) {
    console.log(error);
}

もし、不正な文字列の場合は例外が発生します。

SyntaxError: Unexpected token 'a', "[aaa" is not valid JSON

チグサツール

JSONの整形につきまして、以下のツールでも確認ができます。

JSON整形 | チグサツール

JSON文字列の整形を行うことができるツールです。

chigusa-web.com

ブラウザ上で動作するため、簡単に試すことができます。

さいごに

今回はJavaScriptを使って、JSON文字列の整形を行いました。

関連

【JavaScript】Base64 エンコード・デコード(UTF-8/SJIS)【js-base64】

JavaScriptを使って、Base64エンコード・デコードを行います。

【Evernote】暗号化テキストを復号【JavaScript/Python】

Evernoteの暗号化されたテキストを、プログラミングで復号してみました。

【Django】FullCalendarでスケジュールのDB登録・表示【実践向け】

FullCalendarを利用して、スケジュールを登録しカレンダーに表示する簡単なWebアプリケーションを作成してみます。

【Laravel】Vue.js v3導入とComposition API実装【Mix】

LaravelプロジェクトにVue3を導入し、Composition APIの実装を行いました。