CODEWITHSUNDEEP
javascriptjqueryhtmljson
Teodorico Levoff
Teodorico Levoff

Reputation: 1659

Creating html table from JSON data

I have a an html file that has this snippet in it. 

<div>
    <table id="apps"></table>
</div>

I am receiving JSON data that looks like this:

{
    "1": [
        {
            "A": "",
            "B": "",
            "C": "",
            "D": "",
            "E": ""
        }
    ]
}

There will be exactly one "1" , but there can be more than one dictionary within the list of "1". In this example, we only have one {} within the list, [] , but there can exist multiple {} of containing exactly five items like what is shown above.

I want to create a table from this data, where each row represents a single {} within the [] and has five columns representing A, B, C, D, E respectively.

I am unsure if I should have the structure of this, the tags already in my html(this is not in my html code provided) and then populate these tags or should my function that loads this data in my html file, access table id="apps" and create these tags and then populate these tags? Which is better? and How might one accomplish this efficiently?

Upvotes: 0

Views: 12444

Answers (5)

user12084285
user12084285

Reputation: 

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'

Upvotes: 0

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27232

Try this simple working example. I hope it will work as per your expectation.

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>

Upvotes: 3

four
four

Reputation: 564

Check this demo:

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>

Upvotes: 0

Nol
Nol

Reputation: 364

Your question is "Which is better: having the table row and cell tags already in the markup, or build them as I get data?"

I would say the better option is to build the data as you get the objects.

In 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

Does this suffice for what you wanted to know?

Upvotes: 1

Vitalij
Vitalij

Reputation: 714

Don't know your requirements for the project, but I would skip all that trouble and use a library like DataTables. There are many ways to populate a table from AJAX or other data sources. Even if you are unable to tinker with table data source to comply with its standards, there is a method to reformat.

Upvotes: 1

Related Questions