JSONの解析

<div id = "maincontent">
<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>
<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で<spanclass = "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>または、<i>reviver</i>と呼ばれる<span class="code_marked">JSON.parse()</span> 関数の2番目のパラメーターをすでに使用できます。 </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 class = "bsChrome">Chrome</td>
<td class = "bsIE">IE</td>
<td class = "bsFirefox">Firefox</td>
<td class = "bsSafari">Safari</td>
<td class = "bsOpera">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>
</div>