2016-05-29 11 views
-1

私は行をループするときに動的に評価したいと思います。動的にjavascriptで変数を評価する

「getTable()」コールは、JSONオブジェクトをページに返すREST APIのエンドポイントを指定します。どの列がレンダリングされるかを指定し、正しいヘッダーが必要です。 VAR項目= rowData.headers [C];エラーで

::私は「drawRow()」関数ライン限り取得

TypeError: rowData.headers is undefined 
var item = rowData.headers[c]; 

JSONレスポンスは次のようになります。

[ 
    { 
    "firstName": "Jay", 
    "lastName": "Peace", 
    "userName": "jpmyob", 
    "createdAt": "2016-05-23T15:10:30.505Z", 
    "updatedAt": "2016-05-23T15:10:30.505Z", 
    "id": "67431d66d725a478278123d6" 
    }, 
    { 
    "firstName": "Alex", 
    "lastName": "Cross", 
    "userName": "ACross", 
    "createdAt": "2016-05-23T15:15:27.560Z", 
    "updatedAt": "2016-05-23T15:15:27.560Z", 
    "id": "67431e8f24bdaef8379c50c2" 
    }, 
    { 
    "firstName": "Jack", 
    "lastName": "Reacher", 
    "userName": "reacher", 
    "createdAt": "2016-05-23T16:27:33.710Z", 
    "updatedAt": "2016-05-23T16:27:33.710Z", 
    "id": "67432f75eab1ef80139d6953" 
    } 
] 
ここで

基本的なページです。

<table border="1"> 
    <thead id="display-dataLabels"> 
     <!-- table headers go here --> 
    </thead> 
    <tbody id="display-data"> 
     <!-- table rows go here --> 
    </tbody> 
</table> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<script> 
    function getList(endpoint, headers, columns) { 

     $.ajax({ 
      url: 'http://localhost:1337/' + endpoint, 
      type: "GET", 
      dataType: "json", 
      success: function(data, textStatus, jqXHR) { 

       // since we are using jQuery, you don't need to parse response 
       drawTable(data, headers, columns); 

      } 

     }); 

    }; 


    function drawTable(data, headers, columns) { 

     //clear existing 
     $("#display-data").empty(); 

     //add headers 
     var header = $("<tr />"); 
     $("#display-dataLabels").append(header); 

     for (var h = 0; h < headers.length; h++) { 

      header.append($("<td>" + headers[h] + "</td>")); 

     } 

     //add rows 
     for (var r = 0; r < data.length; r++) { 

      drawRow(data[r], columns); 

     } 

    }; 

    function drawRow(rowData, columns) { 

     var row = $("<tr />"); 
     $("#display-data").append(row); 

     //resolve each column 
     for (var c = 0; c < columns.length; c++) { 

      var item = rowData.headers[c]; 
      row.append($("<td>" + item + "</td>")); 

     } 

    }; 


    getList('user', ['USER ID','FIRST NAME','LAST NAME','USERNAME'], ['id','firstname','lastname','username']); 
</script> 
+0

誰がマイナス1をくれたのか - どのようなジャークですか?それは有効な質問です、私は答えが必要でした。 - あなたが誰であれ、コークをつかんで、真剣に自分のことをやめてください。 – jpmyob

答えて

2

columns[c]あなたのキー、を与えます、firstnameなどです。次に、行オブジェクトからそれを抽出できます。item = rowData[columns[c]];

+0

優秀 - ありがとう! – jpmyob

関連する問題