代码之家 › 专栏 › 技术社区 › user1563677

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

json angularjs javascript

user1563677 · 技术社区 · 7 年前

在这里使用AngularJS:

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

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

例如,数据库表如下:

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循环并将每个值推送到行中。对于Ex,这样的操作将根据我的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"
});

3 回复 | 直到 7 年前

eqwert 7 年前

我不完全确定这个解决方案是否能回答您的问题,如果不能,我将根据需要尝试更新它。

对于单个行,我相信此方法将按预期工作:

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

owmasch 7 年前

你可以试试这个。

// 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);

-1

Fredrik Widerberg 7 年前

我建议使用jquery。您可以组合表结构并附加到表体,例如,

“yourdata”:colname:“col1,col2,col3,col4行值: “1,2,3,4”colname:“col1,col2,col3,col4行值: “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");
        })
    });
});