我有一个html文件,其中包含此代码段。
<div>
<table id="apps"></table>
</div>
我收到的JSON数据如下所示:
{
"1": [
{
"A": "",
"B": "",
"C": "",
"D": "",
"E": ""
}
]
}
只有一个"1"
,但"1"
列表中可以有多个字典。在此示例中,我们在列表{}
中只有一个[]
,但可能存在多个{}
,其中包含五个项目,如上所示。
我想根据这些数据创建一个表,其中每一行代表{}
中的一个[]
,并且有五列分别代表A,B,C,D,E。
我不确定我是否应该有这个结构,标签已经在我的html中(这不在我提供的html代码中)然后填充这些标签或者我的函数是否在我的html文件中加载这些数据,访问table id =&#34; apps&#34;并创建这些标签,然后填充这些标签?哪个更好?如何有效地实现这一目标?
答案 0 :(得分:2)
试试这个简单的工作示例。我希望它会按照你的期望发挥作用。
var dataObj = {
"1": [{
"A": "",
"B": "",
"C": "",
"D": "",
"E": ""
},
{
"F": "",
"G": "",
"H": "",
"I": "",
"J": ""
},
{
"K": "",
"L": "",
"M": "",
"N": "",
"O": ""
}
]};
var dictionaryData = dataObj["1"];
for (var i in dictionaryData) {
var table = document.getElementById("apps");
var tr = document.createElement("tr");
var td = document.createElement("td");
for (var key in dictionaryData[i]) {
var txt = document.createTextNode(key);
td.appendChild(txt);
tr.appendChild(td);
}
table.appendChild(tr);
}
table, td {
border: 1px solid black;
}
<div>
<table id="apps"></table>
</div>
答案 1 :(得分:1)
不知道您对项目的要求,但我会跳过所有麻烦并使用像DataTables这样的库。有许多方法可以从AJAX或其他data sources填充表格。即使您无法修改表数据源以符合其标准,也需要method重新格式化。
答案 2 :(得分:1)
你的问题是&#34;哪个更好:将表格行和单元格标签放在标记中,或者在我获取数据时构建它们?&#34;
我想说更好的选择是在获取对象时构建数据。
在pseduocode中:
for each object in 1
make new row <tr></tr>
for each data in object
make new cell <td></td>
insert data into <td>[here]</td>
insert cell into <tr>[here]</tr>
insert filled row into "apps" by using it's ID
done
这对您想知道的内容是否足够?
答案 3 :(得分:0)
查看此演示:
var jsonResponse = {
"1": [{
"A": "",
"B": "",
"C": "",
"D": "",
"E": ""
},
{
"F": "",
"G": "",
"H": "",
"I": "",
"J": ""
}
],
"2": [{
"K": "",
"L": "",
"M": "",
"N": "",
"O": ""
},
{
"P": "",
"Q": "",
"R": "",
"S": "",
"T": ""
}
]
};
$.each(jsonResponse, function(outerKey, list) {
var row = $('<tr>', {
id: 'row_' + outerKey
});
$.each(list, function(innerKey, value) {
for (var key in value) {
var col = $('<td>', {
id: key,
text: key
})
row.append(col);
}
});
$('#apps').append(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table id="apps"></table>
</div>
答案 4 :(得分:0)
CREATE PROC SearchAllTables
(
@SearchStr nvarchar(100)
)
AS
BEGIN
CREATE TABLE #Results (ColumnName nvarchar(370), ColumnValue nvarchar(3630))
SET NOCOUNT ON
DECLARE @TableName nvarchar(256), @ColumnName nvarchar(128), @SearchStr2 nvarchar(110)
SET @TableName = ''
SET @SearchStr2 = QUOTENAME('%' + @SearchStr + '%','''')
WHILE @TableName IS NOT NULL
BEGIN
SET @ColumnName = ''
SET @TableName =
(
SELECT MIN(QUOTENAME(TABLE_SCHEMA) + '.' + QUOTENAME(TABLE_NAME))
FROM INFORMATION_SCHEMA.TABLES
WHERE TABLE_TYPE = 'BASE TABLE'
AND QUOTENAME(TABLE_SCHEMA) + '.' + QUOTENAME(TABLE_NAME) > @TableName
AND OBJECTPROPERTY(
OBJECT_ID(
QUOTENAME(TABLE_SCHEMA) + '.' + QUOTENAME(TABLE_NAME)
), 'IsMSShipped'
) = 0
)
WHILE (@TableName IS NOT NULL) AND (@ColumnName IS NOT NULL)
BEGIN
SET @ColumnName =
(
SELECT MIN(QUOTENAME(COLUMN_NAME))
FROM INFORMATION_SCHEMA.COLUMNS
WHERE TABLE_SCHEMA = PARSENAME(@TableName, 2)
AND TABLE_NAME = PARSENAME(@TableName, 1)
AND DATA_TYPE IN ('char', 'varchar', 'nchar', 'nvarchar')
AND QUOTENAME(COLUMN_NAME) > @ColumnName
)
IF @ColumnName IS NOT NULL
BEGIN
INSERT INTO #Results
EXEC
(
'SELECT ''' + @TableName + '.' + @ColumnName + ''', LEFT(' + @ColumnName + ', 3630)
FROM ' + @TableName + ' (NOLOCK) ' +
' WHERE ' + @ColumnName + ' LIKE ' + @SearchStr2
)
END
END
END
SELECT ColumnName, ColumnValue FROM #Results
END
exec SearchAllTables @SearchStr='Canada'