afshinm / json-to-html-table Goto Github PK

View Code? Open in Web Editor NEW

391.0 27.0 169.0 25 KB

Simple Json to standard HTML table converter in fastest way

Home Page: http://afshinm.github.com/Json-to-HTML-Table/

JavaScript 100.00%

html-table table-html json json-data javascript

json-to-html-table's Introduction

Annoucement: We have developed a full-featured table library that supports JSON input as well. Please use Grid.js instead.

JSON to HTML Table

This is a simple script to convert JSON data to standard HTML table in the simplest and fastest way.

How to use

There's only one function in this library and accept four parameter that only the first one is required.

    function ConvertJsonToTable(parsedJson, tableId, tableClassName, linkText)

Simply call ConvertJsonToTable method and fill the parsedJson parameter.

Example

This is an example of using this library:

    //Example data, Object 
    var objectArray = [{
        "Total": "34",
        "Version": "1.0.4",
        "Office": "New York"
    }, {
        "Total": "67",
        "Version": "1.1.0",
        "Office": "Paris"
    }];
    
    //Example data, Array
    var stringArray = ["New York", "Berlin", "Paris", "Marrakech", "Moscow"];
    
    //Example data, nested Object. This data will create nested table also.
    var nestedTable = [{
        key1: "val1",
        key2: "val2",
        key3: {
            tableId: "tblIdNested1",
            tableClassName: "clsNested",
            linkText: "Download",
            data: [{
                subkey1: "subval1",
                subkey2: "subval2",
                subkey3: "subval3"
            }]
        }
    }];

Code sample to create a HTML table from JSON:

    //Only first parameter is required
    var jsonHtmlTable = ConvertJsonToTable(objectArray, 'jsonTable', null, 'Download');

Code sample explaned:

First parameter is JSON data
table HTML id attribute will be jsonTable
table HTML class attribute will not be added
Download text will be displayed instead of the link itself

Contributors

Afshin Mehrabani (@afshinmeh)
Sgissinger

Contributing

This is a open-source project. Fork the project, complete the code and send pull request.

License

Copyright (C) 2012 Afshin Mehrabani ([email protected])

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated 
documentation files (the "Software"), to deal in the Software without restriction, including without limitation 
the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, 
and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions 
of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED 
TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL 
THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF 
CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS 
IN THE SOFTWARE.

json-to-html-table's People

Contributors

Stargazers

Watchers

Forkers

luckymurari smruti1423 galled lachok sgissinger owniumo ashrafhasson jamesft gthorne duniadua greezemonkey saketgur artanisuk mowebtech anismiles usebogel4 pablonunez81 itsmepiyush ahitagni cgwyllie skopp scottbyrns tgedikli gillesvivas salumaat smtdn01 brenothales faroncoder buffala inkiebeard mslaven hoongman ruslanchek landtco brantxiong robinhadder pammacdotnet lennondtps rbakhru nowsoni sjs imclab bjzhush avermaprimod jbrahy jumper-forked haoyangyu teddywuinfo hamidfaraji lnickers2004 alicorvuscrm rbparrish 4lphac kalyse maxbellec2 jkso monwater deeshank zx9597446 veermaha heronour adshen ravivit9 berrytj franek043 aditya-jishnu rvacca2 juneyang luba117 fortatlas anshulkothari99 wavecollapser geraldlrh magestik247 xjsender josenildobento esjsmith tdwong theted wuminorb modulexcite ginko functionalfunctions abhishekmalani aravindguptha kmagcaling dotku titan-uz ochern mansouralsaleh flik xanthospap codekavi k2nike matrox4u mjgp2 ifa6 rahulsimpact jadefox10200 yesprasad

json-to-html-table's Issues

lines 11 and 113 for loops. Should this be 'var i' and 'var j'?

To get multiple rows to work I added 'var i' and 'var j' to create local loop variables.

Getting empty table in output for the simple JSON (DynamoDB query result)

I am trying JSON to html on the following JSON, and I am receiving empty table in the output. Any idea what I maybe missing here?

var jsonData = {"ConsumedCapacityUnits":0.5,"Item":{"FirstName":{"S":"Joe"},"LastName":{"S":"Smith"}}};
var htmlOutput = ConvertJsonToTable(jsonData); //Empty html table is returned here.

using the library

Hi,

I am trying to use the library in my code but doesn't display anything?

    <div> 
        <?php

       // echo $jsonResult;
          error_reporting(E_ALL);
         ini_set("display_errors", 1);
         include 'include/weather_data.php';
         include 'include/getJson.php';
        $jsonValue = new getjson();
        $table = 'WEATHER_SIMPLE_FORECAST';
         $jsonResult = $jsonValue->getJsonData($table);
        print_r($jsonResult);

        ?>

        <script type="text/javascript">
            var jsonHtmlTable = ConvertJsonToTable(eval([$jsonResult]), 'jsonTable', null, 'Download');
            document.write(jsonHtmlTable);
        </script>

   </div>
</body>

Could you please tell me what am i doing wrong?

Thanks

please

you could be more specific in the readme

Nesting not working.

I only get the top level objects in the display results.
Nesting not working?

Select data orientation in table - Feature Request

Hi,

it would be great to turn the orientation around.

Your: Output id:
ke1 key2
val1 val2

but i need:
key1 val1
key2 val2

greetz,
ps

It is recommended not to change the string. prototype

When a key's value is an object, this displays [object Object] in the table cell.

My JSON object looks like the following:

var myJSON = {

   key1 : val1
  ,key2 : val2
  ,key3 : {subkey1 : subval1, subkey2 : subval2, subkey3 : subval3}

}

When I run your function like so:

var disp = $('#DEBUG_AREA');
var jsonTable = ConvertJsonToTable(eval([myJSON]), "jsonData", null, 'Download');
disp.append(jsonTable);

For the key3 cell, I see [object Object]. I was expecting to see a nested table showing the structure of that particular sub-object. What parts of the code would be changed to allow for this feature?

Thanks!

Using the library in code

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script type="text/javascript" src="jsontohtml.js"></script>
    </head>
    <body>

        <div> 
            <?php

           // echo $jsonResult;
              error_reporting(E_ALL);
             ini_set("display_errors", 1);
             include 'include/weather_data.php';
             include 'include/getJson.php';
            $jsonValue = new getjson();
            $table = 'WEATHER_SIMPLE_FORECAST';
             $jsonResult = $jsonValue->getJsonData($table);
            print_r($jsonResult);

            ?>

            <script type="text/javascript">
                var jsonHtmlTable = ConvertJsonToTable(eval([$jsonResult]), 'jsonTable', null, 'Download');
                document.write(jsonHtmlTable);
            </script>

       </div>
    </body>
</html>

Could you please tell me why is it not displaying anything?

Thanks

One strange request

Hi,

thanks for great lib I have used it for a while one.. and I stumbled upon change I would like to have..

I need to remove thead block from table completely so to have all in rows (tr) appended to tbody element...

I tried to alter lines 67, 70 where var th and thRow are to td and tbody but it somehow parsed wrong..

Do you have some idea how to go with that ?

thanks, krex

have problem with json objects

library works with jsonarrays but It does not work for me using json objects
jsonData={"x":1,"y":2,"z":3};
var jsonHtmlTable = ConvertJsonToTable(jsonData, 'jsonTable', null, 'Download');

Having issues with Dates/Xmlgregoriancalendar values in table

All the date values in the cell , show null. i check the json string which has the following value
someDate":{"year":2012,"month":12,"day":17,"timezone":-360,"hour":0,"minute":0,"second":0,"fractionalSecond":0.000}

this value is shown as null in the table.

afshinm / json-to-html-table Goto Github PK

json-to-html-table's Introduction

Annoucement: We have developed a full-featured table library that supports JSON input as well. Please use Grid.js instead.

JSON to HTML Table

How to use

Example

Contributors

Contributing

License

json-to-html-table's People

Contributors

Stargazers

Watchers

Forkers

json-to-html-table's Issues

Recommend Projects

Recommend Topics

Recommend Org