Question

我有一个控制器，我在其中将值呈现为GSP页面：

reply = [status:false, value1:arrayList2, value2: arrayList3,value3: arrayList4,value4: arrayList1] render status: 200, text:(reply as JSON).toString()。

在AJAX success函数中，我得到值like并尝试将其显示为：

var retrievedValue = JSON.parse(data);
if(retrievedValue.value1.length > 0){
    alert("first array value")
    var row1 = '<tr>';
    var col1 = '';
    for(var i=0;i<retrievedValue.value1.length;i++)
    col1 += '<td>'+retrievedValue.value1[i]+'</td>';
    row1 += '</tr>';
    $('#table1').append(row);
}
if(retrievedValue.value2.length > 0){
    alert("second array value")
    var row2 = '<tr>';
    var col2 = '';
    for(var i=0;i<retrievedValue.value2.length;i++)
    col2 += '<td>'+retrievedValue.value2[i]+'</td>';
    row2 += '</tr>';
    $('#table1').append(row);
}

if(retrievedValue.value3.length > 0){
    alert("third array value")
    var row3 = '<tr>';
    var col3 = '';
    for(var i=0;i<retrievedValue.value3.length;i++)
    col3 += '<td>'+retrievedValue.value3[i]+'</td>';
    row3 += '</tr>';
    $('#table1').append(row);
}
if(retrievedValue.value4.length > 0){
    alert("fourth array value")
    var row4 = '<tr>';
    var col4 = '';
    for(var i=0;i<retrievedValue.value4.length;i++)
    col4 += '<td>'+retrievedValue.value4[i]+'</td>';
    row4 += '</tr>';
    $('#table1').append(row);
}

但它没有显示任何表格。这是我的桌子区域：

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

如何将表格中的值列表填充为单独的行？

Answer 1

每次都附加一个名为row的变量，但你的行名为row1，row2 ...... 我相信你可以简化整个方法，例如你的第一个街区：

var row = '<tr>';
var col = '';
for(var i=0;i<retrievedValue.value1.length;i++) {
    col += '<td>'+retrievedValue.value1[i]+'</td>';
}
row += col;
row += '</tr>';
$('#table1').append(row);

Answer 2

我认为@Mike W的意思是你可以找到另一种方法/方法来使你的病情整体发挥作用。

您的示例代码不是非常详细，而且缺少某些部分（例如，您的{reply}值的数据结构正是如此）

此代码块可能会指导您如何将值列表填充为单独的行。使用此作为参考

// assuming that you are getting the ajax response in an {object format
// that had a list of {array} values
var oAjaxResponse = {
    value1: ['Sample 1', 'Geo 1', '250.00'],
    value2: ['Sample 2', 'Geo 2', '255.00'],
    value3: ['Sample 3', 'Geo 3', '300.00'],
    value4: ['Sample 4', 'Geo 4', '250.00'],
    value5: ['Sample 5', 'Geo 5', '255.00'],
    value6: ['Sample 6', 'Geo 6', '300.00']
};

var oMainTable = $('#tbl-main');
var sHtmlRowsData = '';
for (var iIndex in oAjaxResponse) {
    sHtmlRowsData += '<tr>';

    var aArrayList = oAjaxResponse[iIndex];
    for (var iValueLength = 0; iValueLength < aArrayList.length; iValueLength++) {
        sHtmlRowsData += '<td>' + aArrayList[iValueLength] + '</td>';
    }

    sHtmlRowsData += '</tr>';
}

oMainTable.find('tbody').append(sHtmlRowsData);

这是一个小伙伴：https://jsfiddle.net/Lzha2nwp/

Answer 3

我最近看到了一些与jquery有关的问题，如果我可以诚实的话。我想如果你参与某些事情，也许是时候你拿起一本书来阅读jquery和java脚本的基础知识了。由于问题的质量往往很差，如果你在Java脚本编写时理解了最基本的东西，那么你可能会避免所有问题。我将在评论中向您展示，这是javascript中jSON的一个重要方面，因为内部通信的内容通常都是JSON。

success: function(data){   
   //unsure why you are using alerts (annoying due to confirmation)
   //use console.log instead and open developer console f12
   alert("Values are: "+data)
   //at this point what this alert ?
   // did it show human readable objects 
   // or did it return [Object:Object]
   //since if you wanted to now delve into what this really was 
   console.log('Values are "+JSON.strinigify(data));
   //this would now show me the content of [Object:Object]


   var retrievedValue = JSON.parse(data);
    //where were these debugs 
   //console.log('JSON parsed '+retrievedValue);
   //console.log('JSON parsed '+JSON.stringify(retrievedValue));
   //where they required since it maybe that  instead of 
   if(retrievedValue.value1.length > 0){
   //should have been:
   if(data.value1.length > 0){
    //and so on

但是正如您从上面的示例中看到的那样，即使在进行迭代之前，您还没有完全调试每个步骤，并且您写了一个混淆的陈述，说明它为什么不起作用。

在深入研究之前，尝试先了解一些基础知识。这将有助于您轻松识别将一个小问题转化为更大问题的简单问题

使用AJAX在表中显示值

3 个答案: