【JavaScript】JSON文字列の整形

はじめに

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

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

関連

【FullCalendar】プレミアム機能

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

【VS Code】Node.js環境のリモート開発・デバッグ【Dockerコンテナ】

VS CodeでDockerを使ったリモート開発を試してみました。Dockerを使いNode環境を用意し、VS Codeでリモートデバッグを行います。

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

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

【JavaScript】URLエンコード・デコード (UTF-8/SJIS)【encoding.js】

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

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文字列の整形を行いました。

関連

【FullCalendar】導入とスケジュールの登録【実装】

FullCalendarを使って、Webアプリケーションにカレンダー機能を実装してみました。カレンダー機能が簡単に導入でき、便利な機能が沢山ありますので、スケジュール機能の実装などに役立つと思います。

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

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

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

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

【Laravel】Viteの使い方

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