【JavaScript】JSON文字列の整形

はじめに

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

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

関連

【JavaScript】AES暗号・復号【CryptoJS】

JavaScriptを使って、AESで暗号化・復号を実装します。

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

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

【Laravel】Viteの使い方

LaravelでViteを使ってみました。

【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整形

便利なツールを公開

chigusa-web.com

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

さいごに

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

関連

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

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

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

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

Chart.jsの導入と実装

Chart.jsを利用して、グラフを表示する簡単なWebアプリケーションを作成してみます。とても高機能でカスタマイズしやいので、ぜひ活用してみましょう。

【Laravel】Viteの使い方

LaravelでViteを使ってみました。