JSONの解析

<h1> JSON.parse()</h1>

<div id = "intro">
<p> <strong> JSONの一般的な目的は、Webサーバーを使用したデータ送信です。 </strong> </p>

<p> <strong> Webサーバーからデータを受信する場合、データは常に文字列です。 </strong> </p>

<p> <strong> <span class="code-marked">JSON.parse()</span>を使用してデータを解析すると、これらのデータはJavaScriptオブジェクトになります。 </strong> </p>
</div>



<div>
<h2>例-JSONの解析</h2>

<p> Webサーバーからこのテキストを受け取ったと想像してください：</p>

<pre>'{ "name":"Bill Gates", "age":62, "city":"Seattle"}'</pre>

<p> JavaScript関数<span class="code_marked">JSON.parse()</span>を使用して、テキストをJavaScriptオブジェクトに変換してください：</p>

<pre>var obj = JSON.parse('{ "name":"Bill Gates", "age":62, "city":"Seattle"}');</pre>

<p>このテキストがJSON形式で書かれていることを確認してください。そうでないと、文法エラーが発生します。 </p>

<p>HTMLでJavaScriptオブジェクトを使用してください：</p>

<h3>例</h3>

<pre>&lt;p id="demo"&gt;&lt;/p&gt; 

&lt;script&gt;
 document.getElementById("demo").innerHTML = obj.name + ", " + obj.age; 
&lt;/script&gt;
</pre>
</div>



<div>
<h2>サーバーからのJSON </h2>

<p> AJAXリクエストを使用して、サーバーからJSONをリクエストできます。 </p>

<p>サーバーの応答がJSON形式で記述されている限り、文字列を解析してJavaScriptオブジェクトにすることができます。 </p>

<h3>例</h3>

<p>サーバーからデータを取得するには、XMLHttpRequestを使用してください：</p>

<pre>var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()  {
    if (this.readyState == 4 &amp;&amp; this.status == 200) {
        myObj =  JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML  = myObj.name;
    }
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();
</pre>
</div>



<div>
<h2> JSONの配列について</h2>

<p>配列から派生したJSONは<span class="code_marked">JSON.parse()</span> を使用した後、このメソッドはJavaScriptオブジェクトではなくJavaScript配列を返します。 </p>

<h3>例</h3>

<p>サーバーから返されるJSONは配列です：</p>

<pre>var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()  {
    if (this.readyState == 4 &amp;&amp; this.status == 200) {
        myArr =  JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML  = myArr[0];
    }
};
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();
</pre>
</div>



<div>
<h2>例外</h2>

<h3>日付の解析について</h3>

<p>日付オブジェクトはJSONでは許可されていません。 </p>

<p>日付を含める必要がある場合は、文字列として記述してください。 </p>

<p>後で日付オブジェクトに戻すことができます：</p>

<h3>例</h3>

<p>文字列を日付に変換します：</p>

<pre>var text =  '{ "name":"Bill Gates", "birth":<span class="marked">"1955-10-28"</span>, "city":"Seattle"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
 
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
</pre>

<p>または、 <span class="code_marked">JSON.parse()</span>関数の2番目のパラメーター「<i>reviver</i>」を使用することもできます。 </p>

<p>この <i>reviver</i> パラメータは関数であり、値を返す前に各属性をチェックします。 </p>

<h3>例</h3>

<p>文字列を日付に変換するには、reviver関数を使用します。</p>

<pre>var text =  '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text, function (key, value) {
    if  (key == "birth") {
        return new Date(value);
    } else {
         return value;
   }});
 
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
</pre>

<h3>分析関数</h3>

<p>関数はJSONでは許可されていません。 </p>

<p>関数を含める必要がある場合は、文字列として記述してください。 </p>

<p>後で関数に戻すことができます：</p>

<h3>例</h3>

<p>文字列を関数に変換します：</p>

<pre>var text =  '{ "name":"Bill Gates", "age":<span class="marked">"function () {return 62;}"</span>, "city":"Seattle"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
 
document.getElementById("demo").innerHTML = obj.name + ", " +  obj.age();
</pre>

<p> JSONで関数を使用することは避けてください。関数はスコープを失い、<span class = "code_marked"> eval()</span>を使用して関数に戻す必要があります。 </p>
</div>



<div>
<h2>ブラウザのサポート</h2>

<p>すべての主要なブラウザと最新のECMAScript（JavaScript）標準には、<span class="code_marked">JSON.parse()</span> 関数が含まれています。</p>

<p>以下の表の数字は、<span class="code_marked">JSON.parse()</span>関数を完全にサポートする最初のブラウザバージョンを示しています。</p>

<table class = "dataintable browsersupport">
<tbody> <tr>
<td>Chrome</td>
<td>IE</td>
<td>Firefox</td>
<td>Safari</td>
<td>Opera</td>
</tr>

<tr>
<td>Yes</td>
<td>8.0</td>
<td>3.5</td>
<td>4.0</td>
<td>10.0</td>
</tr>
</tbody> </table>
 



</div>