解析JSON并绑定到动态创建的HTML表的行和列
解析JSON并绑定到动态创建的HTML表的行和列
提问于 2018-07-20 23:31:58
在这里使用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在详细信息视图user期间，我想要重绘表，从数据库中获取列和行值，如下所示
上面的表格在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"
});回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-20 23:44:33
我不能完全确定这个解决方案是否能回答您的问题，如果不能，我将尝试根据需要进行更新。
对于单行，我相信此方法将按预期工作：
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);
}这将从格式类似于11,22,33,44的json.rowValues中获取一行，并将其转换为与您的行格式({0: "11", 1: "22", 2: "33", 3: "44"})匹配的对象。然后，这个对象被推送到$scope中的表中。
Stack Overflow用户
发布于 2018-07-20 23:53:34
你可以试试这样的东西。
// 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); 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51445933
复制相关文章
相似问题