使用 AJAX 在表格中显示值答案

【问题标题】：Display values in a table using AJAX使用 AJAX 在表格中显示值
【发布时间】：2017-02-27 05:07:23
【问题描述】：

我有一个控制器，我在其中将值呈现给 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>

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

【问题讨论】：

显示您的arrayList2、arrayList3 包含的内容..
请务必查看minimal reproducible example 发布代码指南。一半的功能很少足以证明问题。
@Guruprasad Rao 它将拥有 0000-00-00-00.00.00.000001
@raghulc 当您执行 `alert("Values are: "+data)` 时，您看到实际值了吗？如果是这样，你需要 JSON.parse 吗？因为我怀疑 `var retrievedValue = JSON.parse(data);` 根本不需要。我认为如果您尝试 if(data.value1.length > 0){ 它会起作用。您能否验证它是否有效，如果是这样，您是否会考虑放慢速度并逐步评估/理解开发而不是 bigData 我在所有数据中感到困惑。开始你的小工作。最多这应该是 1 次基本迭代，显然它在 1 中不起作用，在 10 中不起作用，为什么要全部发布
@vahid 如果我没有使用 var retrievedValue = JSON.parse(data) 解析 JSON，那么当我尝试获取值时，它会以 undefined alert("success:"+data. value1) 成功未定义，但其中包含值

标签： jquery html css ajax grails

【解决方案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);

【讨论】：

我希望在两列下显示值，例如 Time1 Time2.. 另外，“您可以简化整个方法”是什么意思

【解决方案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);

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

【讨论】：

如何使值填充到第二列，就像我需要决定哪个值应该在第二列中
嗯？你想有一个条件来决定你想在第二列显示哪个值？你能提供一个你想用这个完成什么的场景吗？你为什么要这么做？
我从控制器渲染的四个数组列表将具有像 0000-00-00-00.00.00.000001 这样的值列表。所以第一个arraylist值应该在第一列，它不应该显示在第二列，第二个arraylist值应该在第二列，它不应该在第一列显示
您现在找到解决问题的方法了吗？

【解决方案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

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

在深入研究之前尝试了解某事物的基础知识。这将帮助您轻松识别将小问题转变为老问题的简单问题

【讨论】：