JavaScript：JSON.stringify() メソッドで配列をJSONに変換する方法

2024-04-02

JavaScript で配列を JSON に変換する方法

JSON.stringify() メソッドは、JavaScript の値を JSON 文字列に変換します。

const array = [1, 2, 3, "hello", { name: "John" }];
const json = JSON.stringify(array);

console.log(json); // 出力: "[1,2,3,\"hello\",{\"name\":\"John\"}]"

JSON.stringify() メソッドは、オプションで第二引数と第三引数を指定できます。

第二引数は、変換するプロパティを指定する配列です。
第三引数は、空白文字を挿入して JSON を整形する際のスペース数です。

const array = [1, 2, 3, "hello", { name: "John" }];
const json = JSON.stringify(array, ["name", "age"]);

console.log(json); // 出力: "[\"John\",null]"

const array = [1, 2, 3, "hello", { name: "John" }];
const json = JSON.stringify(array, null, 2);

console.log(json); // 出力:
// [
//   1,
//   2,
//   3,
//   "hello",
//   {
//     "name": "John"
//   }
// ]

jQuery を使用している場合は、$.param() メソッドを使用して配列を JSON 文字列に変換できます。

const array = [1, 2, 3, "hello", { name: "John" }];
const json = $.param(array);

console.log(json); // 出力: "array%5B%5D=1&array%5B%5D=2&array%5B%5D=3&array%5B%5D=hello&array%5B%5D=%7B%22name%22%3A%22John%22%7D"

$.param() メソッドは、デフォルトで配列を array[] 形式に変換します。

注意点

$.param() メソッドは、エンコードされていない JSON 文字列を生成します。

JavaScript で配列を JSON に変換するには、JSON.stringify() メソッドまたは jQuery の $.param() メソッドを使用できます。

JSON.stringify() を使用する

const array = [1, 2, 3, "hello", { name: "John" }];

// すべてのプロパティを含む JSON 文字列
const json1 = JSON.stringify(array);
console.log(json1); // 出力: "[1,2,3,\"hello\",{\"name\":\"John\"}]"

// 特定のプロパティのみを含む JSON 文字列
const json2 = JSON.stringify(array, ["name", "age"]);
console.log(json2); // 出力: "[\"John\",null]"

// 空白文字を挿入して整形した JSON 文字列
const json3 = JSON.stringify(array, null, 2);
console.log(json3); // 出力:
// [
//   1,
//   2,
//   3,
//   "hello",
//   {
//     "name": "John"
//   }
// ]

jQuery を使用する

const array = [1, 2, 3, "hello", { name: "John" }];

// jQuery を使用して JSON 文字列を生成
const json = $.param(array);
console.log(json); // 出力: "array%5B%5D=1&array%5B%5D=2&array%5B%5D=3&array%5B%5D=hello&array%5B%5D=%7B%22name%22%3A%22John%22%7D"

実行方法

出力

上記コードを実行すると、以下の出力が得られます。

[1,2,3,"hello",{"name":"John"}]
["John",null]
[
  1,
  2,
  3,
  "hello",
  {
    "name": "John"
  }
]
array%5B%5D=1&array%5B%5D=2&array%5B%5D=3&array%5B%5D=hello&array%5B%5D=%7B%22name%22%3A%22John%22%7D

その他の配列を JSON に変換する方法

手動で JSON 文字列を作成する

以下の例のように、手動で JSON 文字列を作成することもできます。

const array = [1, 2, 3, "hello", { name: "John" }];

const json = `[${array.map(item => JSON.stringify(item)).join(",")}]`;

console.log(json); // 出力: "[1,2,3,\"hello\",{\"name\":\"John\"}]"

ただし、この方法は複雑で、データ量が多い場合に非効率になります。

Lodash などのライブラリを使用する

Lodash などの JavaScript ライブラリには、配列を JSON に変換する便利な関数が含まれています。

const array = [1, 2, 3, "hello", { name: "John" }];

const json = _.toPairs(array);

console.log(json); // 出力: [["0",1],["1",2],["2",3],["3","hello"],["4",{"name":"John"}]]

JSON.parse() メソッドは、JSON 文字列を JavaScript の値に変換するために使用されます。

const array = [1, 2, 3, "hello", { name: "John" }];

const json = JSON.stringify(array);
const parsedArray = JSON.parse(json);

console.log(parsedArray); // 出力: [1,2,3,"hello",{"name":"John"}]