JavaScriptのオブジェクトからJSON文字列のデータに変換するには、JSON.stringify()関数を使用します。

本記事では基本的な使い方から、第2引数・第3引数の使用方法も含めてご紹介していきます！

構文

JSON.stringify(value[, replacer[, space]])

第1引数：JSONの文字列データに変換するオブジェクト
第2引数：関数か配列を指定してJSONの置き換えを行う
第3引数：可読性を上げるため、JSONデータの項目の前にスペース等を設定可

使い方

JSONの文字列データに変換

まずは第1引数だけ指定して、JavaScriptのオブジェクトをJSONデータに変換します。
オブジェクトでなくとも、値だけ引数を渡してもJSONデータに変換可能です。

// '{"a":10,"b":20,"c":30}'
console.log(JSON.stringify({a:10, b:20, c:30}));

// 1項目目と2項目目は異なる型
// '[true,"true"]'
console.log(JSON.stringify([new Boolean(true), new String('true')]));

// 値だけ
// "5"
console.log(JSON.stringify(5));

実行結果

以下のようにそれぞれJSONの文字列データとして出力されます。

'{"a":10,"b":20,"c":30}'
'[true,"true"]'
"5"

関数、または配列を指定して置き換え処理を実行

第2引数は関数か配列を指定できます。

・keyとvalueの引数を持つ関数を指定することで値を置き換えしたり、除外することができます。

・配列を指定すると、配列に指定されたkeyのみ含めたJSON文字列のみ値を返します。

function replacer(key, value){
  if(typeof value ==="string"){
      return undefined;
  }
  if(key === "c"){
      return value * 2;
  }
  return value;
}

// '{"a":10,"c":60}'
console.log(JSON.stringify({a:10, b:"test", c:30}, replacer));

// '{"b":"test","c":30}'
console.log(JSON.stringify({a:10, b:"test", c:30}, ["b", "c"]));

実行結果

1行目では「key:b」が除外され、「key:c」のvalueが2倍になっています。
2行目では「key:a」が除外されていることが分かりますね！

'{"a":10,"c":30}'
'{"b":"test","c":30}'

関数、または配列を指定して置き換え処理を実行

第3引数を指定することでJSONデータを成形する際のスペースや文字を入れることができます。
※ 指定することで強制的に改行が入るので改行コードは不要になります。

ただし、このスペースや文字列は10文字までしか設定できないため、文字列を10文字以上設定した場合は先頭から10文字分設定されます。

console.log(JSON.stringify({a:10, b:20, c:30},undefined,5));

// 11で設定しているが、スペースは10個までしか反映されない
console.log(JSON.stringify({a:10, b:20, c:30},undefined,11));

console.log(JSON.stringify({a:10, b:20, c:30},undefined,"\t"));

// 11文字設定しているが、10文字までしか反映されない
console.log(JSON.stringify({a:10, b:20, c:30},undefined,"12345678901"));

実行結果

'{
     "a": 10,
     "b": 20,
     "c": 30
}'
'{
          "a": 10,
          "b": 20,
          "c": 30
}'
'{
	"a": 10,
	"b": 20,
	"c": 30
}'
'{
1234567890"a": 10,
1234567890"b": 20,
1234567890"c": 30
}'

投稿 【サンプル】JavaScriptのオブジェクトからJSONデータに変換【JSON.stringify()】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

JSON文字列のデータからJavaScriptのオブジェクトに変換するには、JSON.parse()関数を使用します。

本記事では基本的な使い方から、第二引数の使用方法も含めてご紹介していきます！

構文

JSON.parse(text[, reviver])

第1引数：JSONデータ形式の文字列
第2引数：値を返す前に実行する関数（コールバック関数）

第2引数に関数を指定することで、事前にJSONデータに処理を行った状態でオブジェクトにすることができます。

使い方

JSONデータは文字列（string）型なので、JavaScriptで扱いやすいようにJSON.parse()関数でObjectに変換してから使用します。

JSONデータをJavaScriptのオブジェクトに変換

まずは第1引数だけ指定してJavaScriptのオブジェクトに変換します。

const data = '{"a":10, "b":20, "c":30 }';
const obj = JSON.parse(data);

// {a:10, b:20, c:30}
console.log(obj); 

// 20
console.log(obj.b);

実行結果

1行目はオブジェクト形式のデータが表示されます。

{a:10, b:20, c:30}
20

JSONデータからオブジェクトを返す前に処理を実行

次に第2引数を指定します。
keyとvalueの引数を持つ関数を設定し、関数の戻り値が新しくvalueに設定されます。

ここでの例ではkey=”a”, “b”, “c”、valueは10, 20, 30になり、
keyが”b”の場合のみ、valueを2倍にして返す関数を設定します。

const data = '{"a":10, "b":20, "c":30 }';
const obj = JSON.parse(data, function(key, value){
  if(key==="b"){
      return value * 2;
  }
  return value;
});

console.log(obj); 

実行結果でオブジェクトのbに40が設定されていることが確認できます。

{a:10, b:40, c:30}

投稿 【サンプル】JSONデータをJavaScriptのオブジェクトに変換【JSON.parse()】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

こんにちは。前回はJSONデータの基本操作方法を紹介しました。
詳しくは、こちらからご覧ください。

【JSON入門】JSONデータの参照・追加（更新）・削除

こんにちは。前回はJSONファイルとは何かというのを紹介していきました。詳しくは、こちらからご覧ください。 今回はJSONデータの扱い方の続編となります。宜しければご覧ください。 操作するデータ こちらが今回サンプルのデータです。json_...

nyanblog2222.com

2020.06.28

今回はJQueryを使用したJSONファイルの読み込み方になります。
コピペでも実装可能なので、宜しければご覧ください。

フォルダ構成

今回使用するファイルのフォルダ構成はこちらです。

フォルダ構成
│
├─index.html
│    htmlファイル
├─script.js
│    javascript(JQuery)ファイル
└─data.json
     jsonファイル

JSONファイルの用意

まずは読み込むJSONファイルを準備します。
ファイルの場所は、ローカルファイルではセキュリティの問題で絶対パスで設定できないため、相対パスで簡単に設定できる場所に配置してください。

絶対パス：C:\Users\Guest\AppData…やhttps://nyanblog2222.comなどルートディレクトリからやURLなど、目的地までの経路を頭から最後まで記述

相対パス：../javascript/script.js など、現在地から目的地までの経路を記述

こちらがファイルの内容です。

ファイル：data.json

[
    {
        "name": "yamada",
        "school_year": 2,
        "test": {
            "japanese": 65,
            "english": 80
        }
    },
    {
        "name": "hayashi",
        "school_year": 2,
        "test": {
            "japanese": 45,
            "english": 95
        }
    },
    {
        "name": "sato",
        "school_year": 1,
        "test": {
            "japanese": 75,
            "english": 35
        }
    }
]

JSONファイルの読み込み

$.ajax()

$.ajax()での読み込み方法です。

$.ajax({
    // 読み込みの設定
    type: "GET",
    url: "data.json", // ファイルパス（相対パス）
    dataType: "json", // ファイル形式
    async: false // 非同期通信フラグ
}).then(
    function (json) {
        // 読み込み成功時の処理
        console.log("読み込みに成功しました");
        console.log(json)
        json.forEach(function (data) {
            console.log(data)
        });
    },
    function () {
        // 読み込み失敗時の処理
        console.log("読み込みに失敗しました");
    }
);

読み込みの設定

1～6行目でjsonを読み込む際の設定を記述しています。
ファイル名やファイルの配置を変更する場合、4行目の”data.json”を変更してください。
また、6行目のasyncでは、非同期通信フラグを設定しています。
デフォルトではtrueですがfalseに設定すると、読み込みが終わるまで他の処理を進めることができません。逆に読み込みが終わってる次の処理へ行いたい対場合、falseにした方が良いです。

読み込み後の処理

7行目でthen(成功,失敗)の処理が分かれています。
8～15行目では読み込み成功時の処理を、16～19行目では読み込み失敗時の処理を記述しています。

また、11行目でJSONファイルのデータ全てをコンソールへ出力、
12～14行目でJSON内の配列データを1つずつコンソールへ出力しています。

then()ではなく、done()・fail()を使うことも可能です。
また、どの場合でも処理するconplete()関数もあります。

注意点

Jquery1.8未満では、success()、error()、conplete()が使用されていましたが、現在は非推奨の関数となっております。
上記の関数が無くなることに備えて、done()、fail()、complete()を使用するようにしましょう。

done、fail、complete関数を使用した場合の記述です。

$.ajax({
    // 読み込み設定
}).done(function(json){
    // 成功
}).fail(function(){
    // 失敗
}).always(function(){
    // 常に最後に処理
});

$.getJSON()

$.getJSON()での読み込み方法です。

$.getJSON("data.json")
    .done(function (json) {
        // 成功
    }).fail(function () {
        // 失敗
    }).always(function () {
        // 常に最後に処理
    });

JSONファイルの読み込み -> $.ajax() -> 注意点で記述しているコードと似ています。
設定部分が$.ajax()と比べて少し簡略化されているところが違いですね！

$.ajax()でも、$.getJSON()でも使いやすいと思いますので、自分の好みで使用を決めていいと思います。

読み込みに失敗する場合

コンソール画面でエラーを確認

JSONファイルはちょっとしたミスで読み込めない場合が多くあります。
もちろん失敗した理由が分からなければ修正する方法も分かりません。

そこで、失敗時の関数でこのように記述し、コンソール画面を確認することである程度はエラーの内容を理解することができます。

$.ajax({
    ・・・略
}).then(
    function (json) {
        ・・・略
    },
    function (jqXHR, textStatus, errorThrown) {
        // 読み込み失敗時の処理
        console.log("読み込みに失敗しました");
        // httpステータス
        console.log("jqXHR : " + jqXHR.status);
        // タイムアウト、パースエラー
        console.log("textStatus : " + textStatus);
        // エラーの詳細情報
        console.log("errorThrown : " + errorThrown.message);
    }
);

大体は「jqXHR.status」と「errorThrown.message」の内容をネット検索等、調べたらエラーを解決することができると思います。

JSONファイルのミスを防ぐWEBツール

JSON Pretty Linter

JSONファイルの記述ミスを防ぐためのおすすめはこちらです。
こちらで事前にチェックすることでエラーの割合はかなり減ると思います。

JSON変換ツール

CSV to JSON – CSVJSON

CSVやSQLからJSONに変換できるツールです。
CSVやSQLを良く使用されるかたは一度使用してみてはいかがでしょうか。

まとめ

いかがでしたでしょうか。
今回はJQueryでJSONファイルを読み込む方法をご紹介しました。

JSONファイルを読み込むには、こちらの2つの方法で実装できます。
・$.ajax()
・$.getJSON()

また、JSONファイルの読み込みには、ちょっとしたミスでエラーが発生しますので、デバッグでステータスコードを調べることが解決の近道です。

今回は全3回のJSONの記事でしたが、新しくJSONの内容を学んだ後には新しい記事を投稿しようとおもいます。良かったら次回も見てみてくださいね！

↓↓↓【JSON入門シリーズ♪】

【JSON入門】JSONとは？JS相互変換について(stringify/parse)

JSON入門として、JSONの基本知識と基本的な使い方（JSONとJavaScriptオブジェクトとの相互変換）を紹介します。相互変換については、stringfy関数を使用したエンコード方法（encode）、parse関数を使用したデコード方法（decode）を分かりやすく解説♪

nyanblog2222.com

2020.06.27

【JSON入門】JSONデータの参照・追加（更新）・削除

こんにちは。前回はJSONファイルとは何かというのを紹介していきました。詳しくは、こちらからご覧ください。 今回はJSONデータの扱い方の続編となります。宜しければご覧ください。 操作するデータ こちらが今回サンプルのデータです。json_...

nyanblog2222.com

2020.06.28

【JSON入門】JQueryでのJSON読み込み方法(ajax/getJSON)

JSON入門として、JQueryを使用したJSONファイルの読み込み方を紹介します。「$.ajax()」や「$.getJSON()」を使った読み込み方法や、読み込みに失敗する場合の対処方法など分かりやすく解説♪

nyanblog2222.com

2020.06.30

投稿 【JSON入門】JQueryでのJSON読み込み方法(ajax/getJSON) は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

こんにちは。前回はJSONファイルとは何かというのを紹介していきました。
詳しくは、こちらからご覧ください。

【JSON入門】JSONとは？JS相互変換について(stringify/parse)

JSON入門として、JSONの基本知識と基本的な使い方（JSONとJavaScriptオブジェクトとの相互変換）を紹介します。相互変換については、stringfy関数を使用したエンコード方法（encode）、parse関数を使用したデコード方法（decode）を分かりやすく解説♪

nyanblog2222.com

2020.06.27

今回はJSONデータの扱い方の続編となります。
宜しければご覧ください。

操作するデータ

こちらが今回サンプルのデータです。
json_dataが配列、testはオブジェクトになっています。
※違いは” [ ] ”で括られているか、” { } ”で括られているかです。

var json_data = [
    { name : "yamada", school_year : 2, test : { japanese : 65, english : 80 }, },
    { name : "hayashi", school_year : 2,  test : { japanese : 45, english : 95 }, },
    { name : "sato", school_year : 1,  test : { jananese : 75, english : 35 }, }
];

JSONデータを参照

まずは、作成したJSONデータを参照する方法です。

データの参照方法

json_dataは配列のため、添え字でデータを参照することができます。
それ以外はオブジェクトの構造になっており、「オブジェクト.プロパティ」のように、ドットで参照することができます。

// name、school_year：プロパティ
console.log(json_data[0].name); // => yamada
console.log(json_data[1].school_year); // => 2

// testプロパティ（オブジェクト）にenglishプロパティを保持
console.log(json_data[2].test.english); // => 35

特定のデータのみ参照する方法

filter関数を使用することで、特定のデータのみ参照することができます。

// filter関数
var data = json_data.filter(function (item) {
    // 英語が50点以上の人のデータを取得
    return item.test.english >= 50;
});

// 条件に一致したデータの”name”を参照
data.forEach(function (value){
    console.log(value.name) // => yamada, hayashi
});

JSONデータを追加

新規プロパティを指定して値を追加

プロパティと値をそのままデータに追加する方法です。

それぞれ、
　配列と同じ階層にareaプロパティ「”Tokyo”」が追加
　配列添字 [1] 内のオブジェクトにareaプロパティ「”Osaka”」が追加
になっています。

json_data.area = "Tokyo";
json_data[1].area = "Osaka";

console.log(json_data)
// { name : "yamada", school_year : 2, test : { japanese : 65, english : 80 }, },
// { name : "hayashi", school_year : 2,  test : { japanese : 45, english : 95 }, area: "Osaka" },
// { name : "sato", school_year : 1,  test : { jananese : 75, english : 35 }, },
// area: "Toyko"

push関数でオブジェクトを追加

オブジェクトを作成してpush関数を使う方法です。
push関数で追加したオブジェクトは末尾に追加されます。

var new_data = { name : "tanaka", school_year : 3, test : { japanese : 85, english : 60 }, };
json_data.push(new_data);

// 末尾のデータ
console.log(json_data[json_data.length - 1])
// { name : "tanaka", school_year : 3, test : { japanese : 85, english : 60 }, }

値やオブジェクトを更新する場合

データ内の値やオブジェクトを更新する場合、配列やオブジェクトをそのまま指定して値を設定するだけで更新が可能です。

// プロパティの値を指定
json_data[1].area = "Osaka";
console.log(json_data[1].area) // => Osaka

json_data[1].area = "Nagoya";
console.log(json_data[1].area) // => Nagoya

// オブジェクトを更新
console.log(json_data[2])
// { name : "hayashi", school_year : 2,  test : { japanese : 45, english : 95 }, }

var new_data = { name : "tanaka", school_year : 3, test : { japanese : 85, english : 60 }, };

// name:"hayashi"オブジェクトを"tanaka"オブジェクトに更新
json_data[2] = new_data;
console.log(json_data[2])
// { name : "tanaka", school_year : 3, test : { japanese : 85, english : 60 }, }

JSONデータを削除

指定のプロパティを削除するときは、「delete」演算子を使用します。

// 各配列の"school_year"を削除
json_data.forEach(function (value) {
    delete value.school_year;
    console.log(value)
});

// { name : "yamada", test : { japanese : 65, english : 80 }, },
// { name : "hayashi", test : { japanese : 45, english : 95 }, },
// { name : "sato", test : { jananese : 75, english : 35 }, },

配列の要素を削除したい場合は、削除したい要素をfalse条件にしてfilter関数を使えば可能です。

最後に

いかがでしたでしょうか。
今回はJSONデータの扱い方続編ということで、基本的な操作方法（参照・追加（更新）・削除）についてご紹介しました。
次はもう少し応用的な操作方法をご紹介できたらと思います。

良かったら次回も見てみてくださいね！

↓↓↓【JSON入門シリーズ♪】

【JSON入門】JSONとは？JS相互変換について(stringify/parse)

JSON入門として、JSONの基本知識と基本的な使い方（JSONとJavaScriptオブジェクトとの相互変換）を紹介します。相互変換については、stringfy関数を使用したエンコード方法（encode）、parse関数を使用したデコード方法（decode）を分かりやすく解説♪

nyanblog2222.com

2020.06.27

【JSON入門】JSONデータの参照・追加（更新）・削除

こんにちは。前回はJSONファイルとは何かというのを紹介していきました。詳しくは、こちらからご覧ください。 今回はJSONデータの扱い方の続編となります。宜しければご覧ください。 操作するデータ こちらが今回サンプルのデータです。json_...

nyanblog2222.com

2020.06.28

【JSON入門】JQueryでのJSON読み込み方法(ajax/getJSON)

JSON入門として、JQueryを使用したJSONファイルの読み込み方を紹介します。「$.ajax()」や「$.getJSON()」を使った読み込み方法や、読み込みに失敗する場合の対処方法など分かりやすく解説♪

nyanblog2222.com

2020.06.30

投稿 【JSON入門】JSONデータの参照・追加（更新）・削除 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

こんにちは。JSONファイルについて、ご存じでしょうか。
本記事はJSONファイルについてと、基本的な扱い方についてご紹介します。

JSONファイルとは

どういうファイルなの？

JSONは「JavaScript Object Notation」で直訳すると、「JavaScriptのオブジェクト表記法」となります。

つまり、情報のやりとりができるテキストベースのデータ形式を表しています。
同じようなデータ形式で、XMLファイルが代表的な例としてよく挙げられています。

JSONの良いところ

JSONの特徴は主にこちらの3点を満たしており、この特徴を持つことで、サーバ間の通信やさまざまなプログラミング言語との共有を可能にしています。

• テキストデータのため、軽量
• オブジェクトのように扱える
• 単純な構造

オブジェクトとは似て非なるもの

先ほどのJSONの良いところでも上げましたが、相互変換が可能なため、JSONはオブジェクトのように扱うことができます。

しかし、JSONはテキストデータであり、オブジェクトではありません。

こちらの例を見てください。

// object
var obj = { name: "Taro", old: 17, tel: "000-0000-1" };

// JSON
var json = { "name": "Hanako", "old": 18, "tel": "000-0000-2" };

テキストデータに変換する前のJSONは、連想配列に似た構造となっていますが、明確な違いがあります。
それはこちらです。

• プロパティのみ含めることができ、関数は含められない
• プロパティをダブルクォーテーション（””）で括る
  →括られた文字列のみプロパティとして使用できる

また、注意点として、カンマ、コロンが1つでも抜けているとJSONとして無効になる場合もあります。

この辺りを理解しておくだけでも、開発するときに違うと思います。

JSONの基本的な使い方

さっそく、試してみましょう。
今回はJSONとJavaScriptのオブジェクトとの、相互変換を行ってみます。

オブジェクトからJSONへ（エンコード encode）

stringfy関数
・JavaScriptのオブジェクトからJSONへの変換
・JSONデータとして通信する前に変換することが多い

// object
var obj = { name: "Taro", old: 17, tel: "000-0000-1" };

var json = JSON.stringify(obj);
console.log(json)

JSONからオブジェクトへ（デコード decode）

parse関数
・JSONからJavaScriptへの変換
ファイルから読み込み後、プログラムで使用しやすいようにデコードする必要がある。

注意する点として、jsonはテキストベースなので全体をシングルクォートで括っています。

// JSON
var json = '{ "name": "Hanako", "old": 18, "tel": "000-0000-2" }';

var obj = JSON.parse(json);
console.log(obj)

まとめ

いかがでしたでしょうか。
今回はJSONの基本的な知識と、基本的な扱い方について、ご紹介しました。
次回はJSON登録や更新などについて、ご紹介していきます。

良かったら次回も見てみてくださいね！

↓↓↓【JSON入門シリーズ♪】

【JSON入門】JSONとは？JS相互変換について(stringify/parse)

JSON入門として、JSONの基本知識と基本的な使い方（JSONとJavaScriptオブジェクトとの相互変換）を紹介します。相互変換については、stringfy関数を使用したエンコード方法（encode）、parse関数を使用したデコード方法（decode）を分かりやすく解説♪

nyanblog2222.com

2020.06.27

【JSON入門】JSONデータの参照・追加（更新）・削除

こんにちは。前回はJSONファイルとは何かというのを紹介していきました。詳しくは、こちらからご覧ください。 今回はJSONデータの扱い方の続編となります。宜しければご覧ください。 操作するデータ こちらが今回サンプルのデータです。json_...

nyanblog2222.com

2020.06.28

【JSON入門】JQueryでのJSON読み込み方法(ajax/getJSON)

JSON入門として、JQueryを使用したJSONファイルの読み込み方を紹介します。「$.ajax()」や「$.getJSON()」を使った読み込み方法や、読み込みに失敗する場合の対処方法など分かりやすく解説♪

nyanblog2222.com

2020.06.30

投稿 【JSON入門】JSONとは？JS相互変換について(stringify/parse) は nyanblog ~にゃんぶろぐ~ に最初に表示されました。