JSON：文字列からいくつかの値を表示

Question

私はJSONとJavascriptで新しいです。私はこれらのすべてを印刷する方法を理解しようとしています。

<p id="demo"></p> 

<script> 
var text = '{"employees":[' + 
'{"firstName":"John","lastName":"Doe" },' + 
'{"firstName":"Anna","lastName":"Smith" },' + 
'{"firstName":"Peter","lastName":"Jones" }]}'; 

obj = JSON.parse(text); 
document.getElementById("demo").innerHTML = 
obj.employees[1].firstName + " " + obj.employees[1].lastName; 
</script> 

Answer 1

を助けます - それらをすべての値を収集するために出て、変数のようなものを追加して出力：

var out=''; 
var text = '{"employees":[' + 
'{"firstName":"John","lastName":"Doe" },' + 
'{"firstName":"Anna","lastName":"Smith" },' + 
'{"firstName":"Peter","lastName":"Jones" }]}'; 

var obj = JSON.parse(text); 
for(var i=0; i < obj.employees.length; i++) { 

    out+=obj.employees[i].firstName + " " + obj.employees[i].lastName+'<br>'; 

} 

document.getElementById("demo").innerHTML = out; 

Answer 2

は、forループ使用してみてください、あなたはちょうどあなたがに値を追加することができますので、多分このようなものがオブジェクトの上

var text = '{"employees":[' + 
'{"firstName":"John","lastName":"Doe" },' + 
'{"firstName":"Anna","lastName":"Smith" },' + 
'{"firstName":"Peter","lastName":"Jones" }]}'; 

obj = JSON.parse(text); 
for (var i = 0; i < obj.employees.length; i++) { 
    document.getElementById("demo").innerHTML += 
    obj.employees[i].firstName + " " + obj.employees[i].lastName + " "; 
} 

反復処理を動作するはずですが、インデックス1の値を印刷しています要素：DD希望これは私が@Davids答えを複製する申し訳ありませんが、しかし、すべての出力にもう少し

Answer 3

ループで表示できます。

for (var i = 0; i < obj.employees.length; i++) { 
 
       document.getElementById("demo").innerHTML += 
 
         obj.employees[i].firstName + " " + obj.employees[i].lastName; 
 
      }

注：obj.employees.length = 3、あなたがそれを行う私に言わせれば

Answer 4

（この場合は）、私はこのようにそれを行うだろう。コードはテストされています。それを試してみてください。私は厳格なチェックを伴う自己実行機能を使用しています。 javascriptのプロトタイプの性質を利用して作成する。 JSONデータを解析して使用することができると仮定しています。あなたにもっと説明が必要なのかどうか教えてください。

document.getElementById('demo').innerHTML = 
    obj.employees.map(function(employee) { 
     return employee.firstName + ' ' + employee.lastName; 
    }).join('<br>'); 

又はES6構文の：

document.getElementById('demo').innerHTML = 
    obj.employees.map(employee => employee.firstName + ' ' + employee.lastName) 
     .join('<br>'); 

(function(){ 
    'use strict'; 
    var text = { 
     employees: [ 
      { 
       firstName:'john',lastName:'Dae' 
      }, 
      { 
       firstName:'Anna',lastName:'Smith' 
      }, 
      { 
       firstName:'Peter',lastName:'Jones' 
      } 
     ] 
    }; 

    var Employee = function(data){ 
    //private vars goes here. 
     this.employees = data.employees; 
    }; 
    Employee.prototype.append = function(id_of_element){ 
     for(var i = 0;i<this.employees.length;i++){ 
      document.getElementById('demo').innerHTML += '<li>'+this.employees[i].firstName+ ' ' +this.employees[i].lastName+'</li>'; 
     } 
    }; 

    var emp = new Employee(text); 
    emp.append(); 

})(); 

Answer 5

var text = '{"employees":[' + 
 
'{"firstName":"John","lastName":"Doe" },' + 
 
'{"firstName":"Anna","lastName":"Smith" },' + 
 
'{"firstName":"Peter","lastName":"Jones" }]}'; 
 

 
obj = JSON.parse(text); 
 
obj.employees.forEach(function(employee) { 
 
    document.getElementById("demo").innerHTML += employee.firstName + " " + employee.lastName + "\n"; 
 
});

<pre id="demo"></pre>

Answer 6

簡単にするために

（必ずしもそうではない性能）ES5の配列方法を使用します上記のどちらも繰り返しobj.employees[i]の逆参照を回避する方法に注意してください。

NB：これは最終的な名前の後に<br>を配置しませんが、重要な場合は、あなたのリストを暗黙のうちに次の行に移動するブロックスタイルの要素に入れてください。