JavaScript での JSON データの使用_javascript のヒント

JSON はネイティブ JavaScript 形式です。つまり、JavaScript での JSON データの処理には特別な API やツールキットは必要ありません。

JSON 構文

JSON は 2 つの構造から構成されます:

オブジェクト - 名前と値のペアのコレクション。さまざまな言語では、オブジェクト、レコード、構造、辞書、ハッシュ テーブル、キー付きリスト、または連想配列として理解されます。オブジェクトは「{」（左括弧）で始まり「}」（右括弧）で終わります。各「名前」の後には「:」 (コロン) が続き、「名前と値」のペアは「,」 (カンマ) で区切られます。

配列 - 順序付けられた値のリスト。ほとんどの言語では、これは配列として理解されます。配列は「[」 (左括弧) で始まり、「]」 (右括弧) で終わります。値は「,」（カンマ）で区切ります。

JSON には変数やその他の制御構造がありません。 JSON はデータ転送のみに使用されます。

JSON データを変数に代入する

たとえば、新しい JavaScript 変数を作成し、それに JSON 形式のデータ文字列を直接割り当てることができます。

var people =
{ "programmers": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
{ "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
],
"authors": [
{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
],
"musicians": [
{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
]
}

これは非常に簡単です。先ほど見たように、データは JSON 形式で含まれています。ただし、データにアクセスする方法がまだ明らかになっていないため、これでは十分ではありません。

データへのアクセス

明らかではないかもしれませんが、上記の長い文字列は実際には単なる配列であり、JavaScript 変数に配置することでこの配列に簡単にアクセスできます。実際、配列要素を表すにはドット表記を使用するだけです。したがって、プログラマ リストの最初のエントリの姓にアクセスするには、JavaScript で次のようなコードを使用するだけです:

people.programmers[0].lastName;

配列のインデックス付けはゼロベースであることに注意してください。したがって、このコード行は最初に people 変数内のデータにアクセスし、次に、programmers というエントリに移動し、次に最初のレコード ( [0] ) に移動し、最後に lastName キーの値にアクセスします。結果は文字列値 "McLaughlin" です。

同じ変数を使用した例をいくつか示します。

people.authors[1].genre 
// Value is "fantasy"
people.musicians[3].lastName 
// Undefined. This refers to the fourth entry,and there isn't one
people.programmers[2].firstName 
// Value is "Elliotte"

この構文を使用すると、追加の JavaScript ツールキットや API を使用せずに、あらゆる JSON 形式のデータを処理できます。

JSON データを変更する

ピリオドと括弧を使用してデータにアクセスできるのと同じように、データも同じ方法で簡単に変更できます。

people.musicians[1].lastName = "Rachmaninov";

文字列を JavaScript json 形式のオブジェクトに変換した後、次のように変数内のデータを変更できます。

注: json 形式のオブジェクトと json テキストは異なります

var obj={name:" 张三 ","sex":' 男 '}; //json 格式的对象
var str=" { name: " 张三 " , "sex" : ' 男 ' }" ; //json 格式的字符串（ json 格式的文本）

文字列に変換し直します

もちろん、オブジェクトをこの記事で説明されているテキスト形式に簡単に変換できない場合、すべてのデータ変更はほとんど意味がありません。この変換も JavaScript では簡単です:

var newJSONtext = people.toJSONString();

それだけです！これで、Ajax アプリケーションのリクエスト文字列など、どこでも使用できるテキスト文字列が完成しました。

さらに重要なのは、あらゆる JavaScript オブジェクトを JSON テキストに変換できることです。元々 JSON 文字列が割り当てられていた変数を扱えるだけではありません。 myObject という名前のオブジェクトを変換するには、同じ形式のコマンドを実行するだけです:

<script type="text/javascript">
function Car(make,model,year,color)
{
this.make=make; 
this.model=model; 
this.year=year; 
this.color=color;
} 
function showCar()
{
var carr = new Car("Dodge","Coronet R/T",1968,"yellow"); 
alert(carr.toJSONString()); 
}
</script>

これが JSON と他のデータ形式の最大の違いです。 JSON を使用する場合、簡単な関数を呼び出すだけで、すぐに使用できるフォーマット済みのデータを取得できます。他のデータ形式の場合は、生データとフォーマット済みデータの間の変換が必要です。ドキュメント オブジェクト モデル (独自のデータ構造をテキストに変換する関数を提供する) のような API を使用する場合でも、API を学習し、ネイティブ JavaScript オブジェクトと構文を使用する代わりに API のオブジェクトを使用する必要があります。

最終的な結論は、多数の JavaScript オブジェクトを扱う場合、サーバー側プログラムに送信できる形式にデータを簡単に変換できるように、JSON がほぼ確実に良い選択であるということです。リクエスト (Ajax)。

JSON 文字列を JSON オブジェクトに変換するメソッド

上記の str1 を使用するには、まず次のメソッドを使用して JSON オブジェクトに変換する必要があります:

//由JSON字符串转换为JSON对象
var obj = eval('(' + str + ')');

または

var obj = str.parseJSON(); //由JSON字符串转换为JSON对象

または

var obj = JSON.parse(str); //由JSON字符串转换为JSON对象

その後、次のように読むことができます:

Alert(obj.name);
Alert(obj.sex);

特記事項: obj が元々 JSON オブジェクトである場合、eval() 関数を使用して変換した後でも (複数回変換された場合でも) JSON オブジェクトのままですが、parseJSON を使用した後に問題が発生します。 () 関数を使用して処理します (構文例外をスローします)。