从JSON数据创建html表

时间:2016-11-03 23:41:05

标签: javascript jquery html json

我有一个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;并创建这些标签,然后填充这些标签?哪个更好?如何有效地实现这一目标?

5 个答案:

答案 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'