2016-12-29 6 views
0

そのjson値でテーブルを生成する方法。 ajax関数の内部では、データはコンソールに表示され、jspでも出力されますが、値は未定義です。間違いは何ですか?jspページ内の内部ajax関数json値を使用する方法?

<head> 
<title>Spring MVC Ajax Demo</title> 
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<script type="text/javascript"> 
function doAjax() { 
    var samp; 
    $.ajax({ 
     url : '/RoomController/ViewMember', 
     type : 'GET', 
     success : function(data) { 
      samp=data; 
      console.log(samp[0].memberName); 
      $('#json').html(samp[3].memberName); 
     } 
    }); 
    document.getElementById("memberList").value=samp; 
} 
</script> 
</head> 
<body> 
<button id="demo" onclick="doAjax()" title="Button">Get the 
    time!</button> 
<div id="time"> 
    <label id="json"></label> 
    <input type="hidden" id="memberList" name="memberList"> 
    <table> 
     <c:forEach items="${memberList}" var="firstname"> 
      <tr> 
       <td>${firstname.memberName}</td> 
      </tr> 
     </c:forEach> 

    </table> 

</div> 

答えて

0

これを試してみてください。注:

var myList = [{"name" : "abc", "age" : 50}, 
      {"age" : "25", "hobby" : "swimming"}, 
      {"name" : "xyz", "hobby" : "programming"}]; 

// Builds the HTML Table out of myList. 
function buildHtmlTable(selector) { 
    var columns = addAllColumnHeaders(myList, selector); 

for (var i = 0 ; i < myList.length ; i++) { 
    var row$ = $('<tr/>'); 
    for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) { 
     var cellValue = myList[i][columns[colIndex]]; 

     if (cellValue == null) { cellValue = ""; } 

     row$.append($('<td/>').html(cellValue)); 
    } 
    $(selector).append(row$); 
} 
} 

// Adds a header row to the table and returns the set of columns. 
// Need to do union of keys from all records as some records may not contain 
// all records 

function addAllColumnHeaders(myList, selector) 

{ 
    var columnSet = []; 
var headerTr$ = $('<tr/>'); 

for (var i = 0 ; i < myList.length ; i++) { 
    var rowHash = myList[i]; 
    for (var key in rowHash) { 
     if ($.inArray(key, columnSet) == -1){ 
      columnSet.push(key); 
      headerTr$.append($('<th/>').html(key)); 
     } 
    } 
} 
$(selector).append(headerTr$); 

return columnSet; 
}​ 

HTML::

<body onLoad="buildHtmlTable('#excelDataTable')"> 
<table id="excelDataTable" border="1"> 
    </table> 
</body>​ 

それはあなたのコードに応じて

table.on('xhr', function() { 
    var ajaxJson = table.ajax.json(); 
    alert(ajaxJson.data.length + ' row(s) were loaded'); 
}); 

の変更をしようと、テーブルを呼び出すために。これは、jQueryの

Javascriptを使用しています。

+0

これは大丈夫ですが、ajax関数の 'samp'値をどのように得るかについては、単に私は 'console.log(samp [0] .memberName);' ajaxのout側は定義されていないことを意味します。 – Manihtraa

+0

@Manihtraa私は自分の答えを編集しました。再試行する – Farid

関連する問題