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

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

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

在“详细信息”视图中，我想重新绘制从数据库获取col和row值的表，如下所示

在UI上，上表如下图所示

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

表的代码如下所示：

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

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

那么在我的例子中，如何循环使用Json并将每个值推送到行中呢。 对于ex，类似这样的内容将根据my 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"
});

---

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

对于单行，我相信此方法将按预期工作：

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

var rowArray=json.rowValues.split（'，'）；
对于（var i=0；i{
行对象[索引]=元素；
})
$scope.targetTable.rows.push（rowObject）；
}

---

这将从

json.rowValues

中获取一行，其格式类似于

11,22,33,44

，并将其转换为与您的行格式匹配的对象（

{0:11,1:22,2:33,3:44}

）。然后将此对象推送到$scope中的表中。

您可以尝试类似的操作

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

---

我建议使用jQuery。可以组合表结构并追加到表体，如：

“yourdata”：{colName:“col1、col2、col3、col4行值： “1,2,3,4”}{colName:“col1，col2，col3，col4行值： “5,6,7,8”}

$.getJSON（“您的restapi/or x.php”+函数（数据）{
$.each（data.yourdata，function（）{
$。每个（此，函数（k，v）{
$('' +
“+v.rowValues+”+
''+v.colName+''的+
）。附录（“表体”）；
})
});
});

上述方法仅适用于一行。这里再次出现的问题是，若你们看到我上面的帖子，我有一个json数组。我需要解析json行数组，然后将您的解决方案与之匹配。我所期望的是调用上述函数两次，创建两行。第一个是{0:“1”，1:“2”，2:“3”，3:“4”}，第二个是{0:“5”，1:“6”，2:“7”，3:“8”}啊，我没有意识到JSON是以数组的形式返回的，因为它的格式不像数组。我已经用代码更新了我的答案，这些代码应该适用于这一点。这适用于单行。我有一个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”}]}

然后您应该能够使用前面提到的函数迭代行的每个元素。这个问题非常具体地涉及AngularJs。不建议将JQuery与AngularJs一起使用，而建议使用JQuery而不是AngularJs的答案确实没有抓住问题的关键。