解析 JSON 并绑定到动态创建的 HTML 表的行和列

Posted 2023-05-09

【中文标题】解析 JSON 并绑定到动态创建的 HTML 表的行和列

【英文标题】：Parse JSON and bind to dynamically created rows and columns of HTML table

【发布时间】：2018-12-28 23:11:06

【问题描述】：

在这里使用 angularjs：

我有一个 html 表，其列和可编辑行是动态创建的。用户可以将此详细信息保存在数据库中。

动态创建我将列名称保存为逗号分隔的名称。这些行也保存为每行的逗号分隔值。

例如db表如下：

Id col                      row       comment   createdby
1  col1, col2, col3, col4   1,2,3,4   test1     abc
2  col1, col2, col3, col4   5,6,7,8   test2     abc

在详细视图用户期间，我想重绘表格，从数据库中获取 col 和 row 值，如下所示

上表在 UI 上如下所示

col1 col2 col3 col4
 1    2    3    4
 5    6    7    8

表格代码如下：

function createTable()    
   return       
     columns: [],
     rows: []     
        
   

 var table = 
       columns: [],
       rows: []
    ;              
$scope.tables = [table];
$scope.tables.push(createTable());
$scope.targetTable = $scope.tables[0];

从我的 api 返回的 Json 是这样的：

  colName: "col1, col2, col3, col4
  rowValues: "1,2,3,4"


  colName: "col1, col2, col3, col4
  rowValues: "5,6,7,8"

//and so on we can have more rows

对于列我这样做。

var colArray = json.colName.split(',');
for (var i = 0; i < colArray.length; i++) 
$scope.targetTable.columns.push(       
    colName: colJson.col.split(',')[i],      
//where colName is the ng-model in the html for table header
);

上面的代码工作正常，我可以看到我的 HTML 表是用所有这些列创建的

我很难找到将我的行绑定到此表的解决方案，因为它们是动态创建的并且没有行数限制。

对于添加行，我们会这样做

  $scope.targetTable.rows.push();

所以在我的情况下，我如何循环遍历我的 Json 并将每个值推送到行。 例如，这样的事情会根据我的 json 创建前两行：

 $scope.targetTable.rows.push(
        "0":"1", "1":"2", "2":"3","3":"4"
);
 $scope.targetTable.rows.push(
        "0":"5", "1":"6", "2":"7","3":"8"
);

【参考方案1】：

我不完全确定此解决方案是否会回答您的问题，如果没有，我会尝试根据需要进行更新。

对于单行，我相信这种方法会按预期工作：

var rowArray = json.rowValues.split(',');
for (var i = 0; i < rowArray.length; i++) 
    var rowObject = ;
    json.rowValues.split(',').forEach((elem, index) => 
        rowObject[index] = elem;
    )

    $scope.targetTable.rows.push(rowObject);

这将从json.rowValues 中取出一行，其格式类似于11,22,33,44，并将其转换为与您的行格式匹配的对象（0: "11", 1: "22", 2: "33", 3: "44"）。然后将该对象推送到 $scope 中的表中。

【讨论】：

以上内容仅适用于一行。如果您在上面看到我的帖子，这里再次存在的问题是我有 json 数组。我需要解析那个 json 行数组，然后让你的解决方案适应它。我期望的是上述函数被调用两次，创建 2 行。一个用于 0: "1", 1: "2", 2: "3", 3: "4"，第二个用于 0: "5", 1: "6", 2: "7", 3：“8”

啊，我没有意识到 JSON 是在数组中返回的，因为它不像数组那样格式化。我已经用应该适用的代码更新了我的答案。

【参考方案2】：

你可以试试这样的。

// New data that you will push
newJson = ; 

// The data you pulled from server
oldJson =  
  colName: "col1, col2, col3, col4",
  rowValues: "1,2,3,4",
;


oldJson.rowValues.split(',').map((element, index) => 
    newJson[index] = element;
);
// New Json... Expected Output: 0: 1, 1: 2, 2: 3, 3: 4

$scope.targetTable.rows.push(newJson); 

【讨论】：

正如我在上一条评论中发布的那样。这适用于单行。我有 json 行数组。如何遍历 json 数组，然后使用您的上述逻辑

您需要将从您的 api 获取的 JSON 保存为一个数组。示例： "Rows": [ "colName": "col1, col2, col3, col4", "rowValues": "1,2,3,4" , "colName": "col1, col2, col3, col4", "rowValues": "5,6,7,8" ] 然后您应该能够使用前面提到的函数遍历 Rows 的每个元素。

【参考方案3】：

我会推荐使用 jQuery。您可以组合表结构并附加到表体，例如，

"yourdata": colName: "col1, col2, col3, col4 rowValues: "1,2,3,4" colName: "col1, col2, col3, col4 rowValues: "5,6,7,8"

$.getJSON("your-restapi/ or x.php" + function (data) 

 $.each(data.yourdata, function() 
    $.each(this, function(k, v) 
          $('<tr>' +
                '<td>' + v.rowValues + '</td>' +
                '<td>' + v.colName + '</td>' +
              </tr>').appendTo("table-body");
        )
    );
);

【讨论】：

这个问题是关于 AngularJs 的。不建议将 JQuery 与 AngularJs 一起使用，建议使用 JQuery 而不是 AngularJs 的答案确实错过了问题的重点。