変換ピュアJavaスクリプトでテーブルにデータを挿入する（JSON）応答（NO jQueryの）

Question

I応答として到着AJAX で取得、HTMLテーブルデータに挿入しようとしている：

[{"email":"marc@volvo.com","id":2,"name":"volvo"},{"email":"marc@mercedes.com","id":4,"name":"mercedes"}] 

それはうまく見えますが、オブジェクトとしてアクセスしようとすると、私は未定義になります。 json型にすると、オブジェクトの内容の代わりにwordというオブジェクトが表示されます。 それは、関係なく、私は値にアクセスするために管理することはできませんしようとするものを、 がここにJavaScriptコードません（私はまだjqueryのを知らない）各3値で、2オブジェクトの配列でなければなりません：

function getCompanies(){ 
    var req = new XMLHttpRequest() 
    var url = "http://localhost:8080/CouponB/webapi/admin/company" 
    req.open("GET", url, true) 
    req.send() 

    req.onreadystatechange = function() { 
     if(req.readyState==4) { 
      if(req.status==200){ 
       myStr = "" 
       var resp = req.response 
       alert(resp) 
       myJson = eval(resp) 
       alert(myJson) 
       for(var x in myJson){ 
        alert("-----------"+x.name) 
       } 
       var respTarg = document.getElementById("companyTable") 
       resp.forEach(wtr) 
       respTarg.innerHTML = myStr 
      } 

     } 
    } 
} 

function wtd(d){ 
    return "<td style=\"width: 70px; \">"+d+"</td>" 
} 

function wtr(){ 
    myStr += wtd(this.id)+wtd(this.name)+wtd(this.email) 
} 

Answer 1

使用JSON.parse

myJson = JSON.parse(resp) 

そして、あなたのwtr機能は、次のようになります。

function wtr(item){ 
    myStr += wtd(item.id) + wtd(item.name) + wtd(item.email) 
} 

Answer 2

x指数（interger）ない項目（値）で、名前を取得する

myJson[x].name 

Answer 3

は、ネストされたデータ構造を処理する方法についての詳細を学ぶためにAccess/process (nested) objects, arrays or JSONを見てください。

---

あなたのコードの問題がいくつかあります：JSONを解析するevalを使用し

• （それは動作しますが、より良い方法がある）
• 配列を反復処理するfor...inの使用配列要素に誤ってアクセスする（xは、要素自体ではなく、要素のインデックスを参照します）。 （これは壊れています）
• thisをwrtに使用しています。 forEachは現在の要素をthisで利用できません。 （これは壊れています）
• グローバル変数myStrを使用して、wrtの代わりにHTMLを作成して文字列を返します。 （動作しますが、より良い方法があります）
• が<table>の場合は、行を作成することを忘れています（<tr>）。

  var resp = '[{"email":"marc@volvo.com","id":2,"name":"volvo"}, {"email":"marc@mercedes.com","id":4,"name":"mercedes"}]'; 
   
  
   
  function insertCell(row, value) { 
   
      // create a new cell in the provided row 
   
      var cell = row.insertCell(); 
   
      // set the inline style of the cell 
   
      cell.style = {width: '70px'}; 
   
      // set the content of the cell 
   
      cell.textContent = value; 
   
  } 
   
  
   
  var table = document.getElementById('table'); 
   
  // parse the JSON and for each object in the resulting array ... 
   
  JSON.parse(resp).forEach(function(obj) { 
   
      // ... create a new row ... 
   
      var row = table.insertRow(); 
   
  
   
      // ... and insert the following properties as cells into the row 
   
      insertCell(row, obj.id); 
   
      insertCell(row, obj.name); 
   
      insertCell(row, obj.email); 
   
  });

  <table id="table"></table>

  ---

  ：

はここに簡単なテーブルを構築するための方法である、と述べた（動作しますが、その後、すべてのセルが一列に表示される場合があります）また、デバッグにalertを使用しないでください。代わりにconsole.logを使用してください。