时间戳

首页 > 解决方案 > 解析 JSON 并绑定到动态创建的 HTML 表的行和列

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

问题描述

在这里使用 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"
});

标签： javascriptangularjsjson

解决方案

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

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

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 中的表中。

推荐阅读