JSONから配列に変換

▶

編集

この記事の要点
JavaScript の `JSON.parse(text)` でJSON 文字列を配列やオブジェクトに変換逆方向（配列 → JSON 文字列）は `JSON.stringify(arr)` 不正な JSON は `SyntaxError` を投げるので、外部入力は `try/catch` で囲む fetch API のレスポンスは `response.json()` が便利（内部で parse される）

これはJavascriptのJSONから配列に変換する方法に関する記事です。サーバーから受け取ったJSON文字列や、localStorage に保存しておいた文字列を、JavaScriptで扱える配列やオブジェクトに変換します。

使用する関数

使用する関数
JSON.parse(text)

textにはJSONを入れます。戻り値として配列（またはオブジェクト）が返却されます。

基本の使い方

const text = '[1, 2, 3, 4]';
const arr = JSON.parse(text);
console.log(arr); // [1, 2, 3, 4]
console.log(arr[0]); // 1

オブジェクトの配列もOK

const text = '[{"name":"Taro","age":20},{"name":"Jiro","age":18}]';
const users = JSON.parse(text);
console.log(users[0].name); // "Taro"
users.forEach(u => console.log(u.name, u.age));

逆の変換（配列 → JSON文字列）

逆方向は JSON.stringify を使います。

const arr = [1, 2, 3];
const text = JSON.stringify(arr);
console.log(text); // "[1,2,3]"

エラー処理

不正なJSON文字列を渡すと SyntaxError が投げられます。外部入力を扱うときは try-catch で囲むのが安全です。

try {
const data = JSON.parse(text);
} catch (e) {
console.error('JSONパース失敗:', e.message);
}

fetch との組み合わせ

サーバーAPIから取得した結果なら、response.json() を使うと JSON.parse を自前で呼ぶ必要はありません。

fetch('/api/users')
.then(res => res.json())
.then(users => console.log(users));

注意点

JSON はキー名を必ず "（ダブルクォート）で囲む必要がある。シングルクォートだとエラー
末尾のカンマ（trailing comma）は不可
undefined、関数、コメントはJSONでは表現できない
JSON.parse は同期処理。巨大JSONはメインスレッドを止めるので、必要に応じてWebWorker等で処理する

ページ一覧

その他