JavaScriptでJSONを操作する方法
序章
JSON はJavaScriptプログラミング言語から派生しているため、JavaScriptのデータ形式として使用するのが自然な選択です。 JavaScript Object Notation の略であるJSONは、通常、「Jason」という名前のように発音されます。
一般的な用語でのJSONの詳細については、「JSONの概要」チュートリアルをお読みください。
JavaScriptプログラムのどこでJSONを使用できるかを考えるために、JSONの一般的な使用例は次のとおりです。
- データの保存
- ユーザー入力からのデータ構造の生成
- サーバーからクライアント、クライアントからサーバー、サーバーからサーバーへのデータの転送
- データの構成と検証
このチュートリアルでは、JavaScriptでJSONを操作する方法を紹介します。 この紹介を最大限に活用するには、JavaScriptプログラミング言語にある程度精通している必要があります。
JSON形式
JSONの形式はJavaScriptオブジェクト構文から派生していますが、完全にテキストベースです。 これはキー値データ形式であり、通常は中括弧で表示されます。
JSONを使用している場合、JSONオブジェクトが .json
ファイルですが、プログラムのコンテキスト内でJSONオブジェクトまたは文字列として存在することもできます。 構文と構造について詳しくは、こちらをご覧ください。
で作業しているとき .json
ファイルの場合、次のようになります。
{
"first_name" : "Sammy",
"last_name" : "Shark",
"online" : true
}
代わりに、JSONオブジェクトが .js
また .html
ファイルの場合、変数に設定されていることがわかります。
var sammy = {
"first_name" : "Sammy",
"last_name" : "Shark",
"online" : true
}
さらに、JavaScriptプログラムファイルまたはスクリプトのコンテキスト内では、JSONがオブジェクトではなく文字列として表示される場合があります。 この場合、すべてが1行に表示されることもあります。
var sammy = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';
JSONオブジェクトを文字列に変換すると、データをすばやく転送するのに特に役立ちます。
JSONの一般的な形式と、それをJSONとしてどのように見ることができるかについて説明しました。 .json
ファイル、またはオブジェクトまたは文字列としてJavaScript内。
JavaScriptオブジェクトとの比較
JSONはあらゆるプログラミング言語で使用できるように開発されましたが、JavaScriptオブジェクトはJavaScriptプログラミング言語を介してのみ直接操作できることを覚えておく価値があります。
構文に関しては、JavaScriptオブジェクトはJSONに似ていますが、JavaScriptオブジェクトのキーは引用符で囲まれた文字列ではありません。 また、JavaScriptオブジェクトは、値に渡される型の制限が少ないため、関数を値として使用できます。
現在オンラインになっているWebサイトユーザーのSammySharkのJavaScriptオブジェクトの例を見てみましょう。
var user = {
first_name: "Sammy",
last_name : "Shark",
online : true,
full_name : function() {
return this.first_name + " " + this.last_name;
}
};
これはJSONオブジェクトとしては非常に馴染みがあるように見えますが、どのキーにも引用符はありません(first_name
, last_name
, online
、 また full_name
)、および最後の行に関数値があります。
上記のJavaScriptオブジェクトのデータにアクセスする場合は、ドット表記を使用して呼び出すことができます user.first_name;
文字列を取得しますが、フルネームにアクセスする場合は、次のように呼び出す必要があります。 user.full_name();
関数だからです。
JavaScriptオブジェクトはJavaScript言語内にのみ存在できるため、さまざまな言語でアクセスする必要のあるデータを操作する場合は、JSONを選択することをお勧めします。
JSONデータへのアクセス
JSONデータは通常、ドット表記を介してJavascriptでアクセスされます。 これがどのように機能するかを理解するために、JSONオブジェクトについて考えてみましょう。 sammy
:
var sammy = {
"first_name" : "Sammy",
"last_name" : "Shark",
"online" : true
}
いずれかの値にアクセスするために、次のようなドット表記を使用します。
sammy.first_name
sammy.last_name
sammy.online
変数 sammy
最初にドットが続き、次にアクセスするキーが続きます。
キーに関連付けられた値を表示するJavaScriptアラートを作成するには first_name
ポップアップでは、JavaScriptを呼び出すことでこれを行うことができます alert()
関数:
alert(sammy.first_name);
OutputSammy
ここでは、に関連付けられた値を正常に呼び出しました。 first_name
からのキー sammy
JSONオブジェクト。
角括弧構文を使用して、JSONからデータにアクセスすることもできます。 そのためには、キーを角かっこで囲んだ二重引用符で囲みます。 私たちのために sammy
上記の変数、角括弧構文を使用して alert()
関数は次のようになります。
alert(sammy["online"]);
Outputtrue
ネストされた配列要素を使用している場合は、配列内のアイテムの番号を呼び出す必要があります。 以下のJSONについて考えてみましょう。
var user_profile = {
"username" : "SammyShark",
"social_media" : [
{
"description" : "twitter",
"link" : "https://twitter.com/digitalocean"
},
{
"description" : "facebook",
"link" : "https://www.facebook.com/DigitalOceanCloudHosting"
},
{
"description" : "github",
"link" : "https://github.com/digitalocean"
}
]
}
文字列にアクセスするには facebook
、ドット表記のコンテキスト内で配列内のそのアイテムを呼び出すことができます。
alert(user_profile.social_media[1].description);
Outputfacebook
ネストされた要素ごとに、追加のドットを使用することに注意してください。
ドット表記または角括弧構文を使用すると、JSON形式に含まれるデータにアクセスできます。
JSONを操作するための関数
このセクションでは、JSONを文字列化および解析するための2つの方法について説明します。 JSONをオブジェクトから文字列に、またはその逆に変換できることは、データの転送と保存に役立ちます。
JSON.stringify()
The JSON.stringify()
関数はオブジェクトをJSON文字列に変換します。
文字列は、軽量な方法で情報を保存または渡すことにより、クライアントからサーバーにデータを転送するのに役立ちます。 たとえば、クライアント側でユーザーの設定を収集し、それらをサーバーに送信することができます。 後で、あなたはそれから情報を読むことができます JSON.parse()
必要に応じてデータを処理します。
変数に割り当てるJSONオブジェクトを見てみましょう obj
、次に、を使用して変換します JSON.stringify()
通過することによって obj
関数に。 この文字列を変数に割り当てることができます s
:
var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}
var s = JSON.stringify(obj)
さて、 s
、JSONをオブジェクトではなく文字列として使用できるようにします。
'{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'
The JSON.stringify()
関数を使用すると、オブジェクトを文字列に変換できます。 反対のことをするために、私たちは JSON.parse()
関数。
JSON.parse()
文字列は転送に役立ちますが、クライアント側やサーバー側で文字列をJSONオブジェクトに変換できるようにする必要があります。 これは、 JSON.parse()
関数。
上記のJSON.stringify()セクションの例を変換するには、文字列を渡します s
関数に割り当て、それを新しい変数に割り当てます。
var o = JSON.parse(s)
次に、オブジェクトがあります o
使用するオブジェクトと同じです obj
.
詳細を確認するために、次の例を考えてみましょう。 JSON.parse()
HTMLファイルのコンテキスト内:
<!DOCTYPE html>
<html>
<body>
<p id="user"></p>
<script>
var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';
var obj = JSON.parse(s);
document.getElementById("user").innerHTML =
"Name: " + obj.first_name + " " + obj.last_name + "<br>" +
"Location: " + obj.location;
</script>
</body>
</html>
OutputName: Sammy Shark
Location: Ocean
HTMLファイルのコンテキスト内で、JSON文字列がどのように表示されるかを確認できます s
ドット表記を介してJSONにアクセスすることにより、ページの最終レンダリングで取得可能なオブジェクトに変換されます。
JSON.parse()
JSON文字列を解析してオブジェクトに変換するための安全な関数です。
結論
JSONはJavaScriptで使用する自然な形式であり、多くの一般的なプログラミング言語で使用できる多くの実装があります。 この形式を別のプログラミング言語で使用する場合は、「 IntroductioningJSON」サイトで完全な言語サポートを確認できます。
軽量でプログラミング言語とシステム間で簡単に転送できるため、JSONは TwitterAPIなどのAPIでサポートが強化されています。
あなたはおそらくあなた自身を作成しないでしょう .json
ファイルが他のソースからそれらを調達します。 これらのリソースをチェックして、他のデータ構造をJSONに変換する方法を学ぶことができます。