Dynamic table from JSON using javascript

Question

I use the following json to develop a table structure. But I'm unable to go ahead on adding rows according to columns.

[
{
"authType": "BasicAuth",
"phases": [
  {
    "type": "Development",
    "keys":[{
      "username": "developer"
    },{
      "password": "password123"
    }]
  },
  {
    "type": "Testing",
    "keys":[{
      "username": "tester"
    },{
      "password": "password123"
    }]
  }
]
},
{
"authType": "AccessToken",
"phases": [
  {
    "type": "Development",
    "keys":[{
      "token": "9a0554259914a86fb9e7eb014e4e5d52"
    },{
      "url": "/demo/developer"
    }]
  },
  {
    "type": "Testing",
    "keys":[{
      "token": "9a0554259914a86fb9e7eb014e4e5d52"
    },{
      "url": "/demo/testing"
    }]
  }
]
},
{
"authType": "OAuth",
"phases": [
  {
    "type": "Development",
    "keys":[{
      "consumer_key": "9a0554259914a86fb9e7eb014e4e5d52"
    },{
      "customer_key": "9a0554259914a86fb9e7eb014e4e5d52"
    },{
      "url": "/demo/development"
    }]
  },
  {
    "type": "Testing",
    "keys":[{
      "consumer_key": "9a0554259914a86fb9e7eb014e4e5d52"
    },{
      "customer_key": "9a0554259914a86fb9e7eb014e4e5d52"
    },{
      "url": "/demo/testing"
    }]
  }
]
}
]

I use the following script to iterate over the json.

var subTable = '<div class="subtable"><table data-clicked-parent-row="'+ clickedCell.row
            +'" data-clicked-column="'+ clickedCell.column +'"><tr><th>Keys</th>';
    tableData.forEach(function(e){
        if(rowType == e.authType){
            var phases;
            e.phases.forEach(function(t){
                subTable += '<th>'+ t.type +'</th>'
            })
            return subTable + '</tr></table></div>';
        }
    })

The thing is, I'm unable to add rows to the table while iterating on the objects. The following is a static version of the table. how can i write a generic function to achive the following table structure. Please let me know any better way to write the iteration.

Where is the data from column 1 populating, Seems to be from all the phases => keys, customer_key and url. Are they hardcoded as the label is different than key. — Rahul Sharma
– Rahul Sharma, Commented Nov 12, 2015 at 11:43
You iterate over each rows, then over each column ("phases") to build only your table headers… So you will have 1 header per phase per row! Besides, how do you plan to render several keys in an item from tableData? In your screenshot you stack them on several rows, and url has its own row, so you would stack several rows per item in tableData? — ghybs
– ghybs, Commented Nov 12, 2015 at 11:45

VoidVolker · Accepted Answer · 2015-11-13 07:38:01Z

var data = {
    "Items": [
        { 
            "id": "A004"
            , "name": "ACC LR2"
            , "userId": ["1","2","3","4"]
        }, { 
            "id": "0001"
            , "name": "ABG IT"
            , "userId": ["8","9","10","11"]
        }
    ]
}

function getUserId(obj){
    result = []
    obj.Items.forEach( function(item, i){
        result.push(item.userId);
    });
    return result;
}

function getUserIdAll(obj){
    result = []
    obj.Items.forEach( function(item, i){
        result = result.concat(item.userId);
    });
    return result;
}

console.log( getUserId(data) );
console.log( getUserIdAll(data) );

var data = [
  {
    "authType": "BasicAuth",
    "phases": [
      {
        "type": "Development",
        "keys": [
          {
            "username": "developer"
          },
          {
            "password": "password123"
          }
        ]
      },
      {
        "type": "Testing",
        "keys": [
          {
            "username": "tester"
          },
          {
            "password": "password123"
          }
        ]
      }
    ]
  },
  {
    "authType": "AccessToken",
    "phases": [
      {
        "type": "Development",
        "keys": [
          {
            "token": "9a0554259914a86fb9e7eb014e4e5d52"
          },
          {
            "url": "/demo/developer"
          }
        ]
      },
      {
        "type": "Testing",
        "keys": [
          {
            "token": "9a0554259914a86fb9e7eb014e4e5d52"
          },
          {
            "url": "/demo/testing"
          }
        ]
      }
    ]
  },
  {
    "authType": "OAuth",
    "phases": [
      {
        "type": "Development",
        "keys": [
          {
            "consumer_key": "9a0554259914a86fb9e7eb014e4e5d52"
          },
          {
            "customer_key": "9a0554259914a86fb9e7eb014e4e5d52"
          },
          {
            "url": "/demo/development"
          }
        ]
      },
      {
        "type": "Testing",
        "keys": [
          {
            "consumer_key": "9a0554259914a86fb9e7eb014e4e5d52"
          },
          {
            "customer_key": "9a0554259914a86fb9e7eb014e4e5d52"
          },
          {
            "url": "/demo/testing"
          }
        ]
      }
    ]
  }
];

function objGetKeyVal(obj){
    for (var key in obj) {
        return [ key, obj[key] ];
    }
}

(function createTable(tableData){
    var table = '<table>';
    // tableHeader += '<caption>Caption</caption>';
    // Creating table header

    // table += '<tr>';
    // table += '<th>Keys</th>';
    // table += '<th>Development</th>';
    // table += '<th>Testing</th>';
    // table += '</tr>';

    // Sub tables iterator
    tableData.forEach(function(subTable, i){
        tableRows = [];     // Rows array for sub table

        table += '<tr><th>Keys</th>';   // Table headers creating

        subTable.phases.forEach(function(colData, icol){
            
            table += '<th>'+colData.type+'</th>';   // Creating table headers for each phases

            colData.keys.forEach(function(key, irow){  // Converts structured data to array of rows arrays of columns
                if( tableRows[irow] === undefined) { tableRows[irow] = []; }
                rowData = objGetKeyVal(key);
                tableRows[irow][0] = rowData[0];
                tableRows[irow][icol+1] = rowData[1];
            });

        });
        
        table += '</tr>';               // End table header cration

        // Now we have usual table array - need only convert it to HTML
        // table looks like: [ ['col1', 'col2', 'col3'], ['col1', 'col2', 'col3'] ]
        table += '<tr><th colspan="3">'+subTable.authType+'</th></tr>';
        tableRows.forEach(function(row){
            table += '<tr>';
            row.forEach(function(str){ 
                table += '<td>'+str+'</td>';
            });
            table += '</tr>';
        });
        
    });

    table += '</table>';
    $('body').append(table);
    
})(data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Ahh, in my script they creates not dynamically. Ok, one moment, I'll fix it.

Emir Marques · Accepted Answer · 2015-11-12 11:21:31Z

Use this function for render table with json. Observe this function works with simple json. For complex json necessary adapter this function

var tableData = [
    {
        "Name": "Kevin",
        "Adress": "Adress UHE, SC",
    },
    {
        "Name": "Jose",
        "Adress": "Adress KUK, CC",
    },
    {
        "Name": "Kevin",
        "Adress": "Adress CGH, JK",
    }
];

function compile(){
    var subTable = '', column = '', row = '';
    
    for(c in tableData[0])
        column += '<th>' + c + '</th>';
    
    for(item in tableData){
        row += '<tr>';
        for(c in tableData[0]) row += '<td>' + tableData[item][c] + '</td>';
        row += '</tr>';
    }
    console.log(row)
    return '<table border="solid 1px"><tr>' + column + '</tr>' + row + '</table>';
};
document.write(compile());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Collectives™ on Stack Overflow

Dynamic table from JSON using javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related