javascript - Is there an equivalent of `console.table` in the browser? - Stack Overflow

admin管理员组

文章数量:1397184

console.table does exactly what I need it to do. But I want that table to be outputted in the browser. How can I do this?

I've tried a few other solutions that didn't work because either:

1. They expect an array of objects.
2. The columns aren't dynamically determined (i.e. my objects don't all have the props).

My Object looks like this:

{
  source0: {target0: 2, target1: 2, target2: 1},
  source1: {target1: 3},
  /*...*/
}

console.table does exactly what I need it to do. But I want that table to be outputted in the browser. How can I do this?

I've tried a few other solutions that didn't work because either:

1. They expect an array of objects.
2. The columns aren't dynamically determined (i.e. my objects don't all have the props).

My Object looks like this:

{
  source0: {target0: 2, target1: 2, target2: 1},
  source1: {target1: 3},
  /*...*/
}

• javascript

Share Improve this question Follow asked Nov 12, 2014 at 16:31 Ryan SmithRyan Smith 1,33522 gold badges1313 silver badges1616 bronze badges 10

• 1 what is console.table? – Jamiec Commented Nov 12, 2014 at 16:33
• 2 I wouldn't be a one-liner but is there really a problem in iterating to list the columns and then build the table with a second iteration ? Are you expecting us to write that code or do you see a blocking problem ? – Denys Séguret Commented Nov 12, 2014 at 16:33
• First off, thanks for teaching me a new debugging tool :) Secondly, you should use a templating system for this. Mustache.js maybe? – AlexanderBrevig Commented Nov 12, 2014 at 16:34
• @Jamiec: developer.chrome./devtools/docs/… – Felix Kling Commented Nov 12, 2014 at 16:35
• Even if I could inspect the dev tools and grab the table's html I would be happy at this point @dystroy – Ryan Smith Commented Nov 12, 2014 at 16:37

 |  Show 5 more ments

2 Answers 2

Sorted by: Reset to default 6

Here's a solution, with two iterations, the first one to find the columns and the second one to build the table :

var s = {
  source0: {target0: 2, target1: 2, target2: 1},
  source1: {target1: 3},
}

var cols = [];
for (var k in s) {
  for (var c in s[k]) {
    if (cols.indexOf(c)===-1) cols.push(c);
  }
}
var html = '<table><tr>'+
    cols.map(function(c){ return '<th>'+c+'</th>' }).join('')+
    '</tr>';
for (var l in s) {
  html += '<tr>'+
      cols.map(function(c){ return '<td>'+(s[l][c]||'')+'</td>' }).join('')+
      '</tr>';
}
html += '</table>';

demonstration

Of course you'd have to tailor it for your exact need. For example if you want to have the keys of the properties.

You should use a templating system for this.

Here is an example with Handlebars.js http://jsfiddle/x6r5fbw1/ (you can also run snippet below)

    $(function(){
        var data = {
          source0: {target0: 2, target1: 2, target2: 1},
          source1: {target1: 3},
        },
        table = [],
        colsDict = {},
        key = "",
        innerKey = "",
        tableData = [],
        tmp = Handlebars.pile($("#template").text()),
        html = "";
    
        for (key in data) {
          if (data.hasOwnProperty(key)) {
            table.push({title:key});
            for (innerKey in data[key]){
              if (data[key].hasOwnProperty(innerKey)) {
                table[table.length-1][innerKey] = data[key][innerKey];
                colsDict[innerKey] = ""; } } } }
    
        var cols = ["title"];
        for (key in colsDict){
          if (colsDict.hasOwnProperty(key)){
            cols.push(key); } }
          
        for (key in table){
          var obj = {};
          for (innerKey in cols){
            if (table[key].hasOwnProperty(cols[innerKey])) {
              obj[cols[innerKey]] = table[key][cols[innerKey]]; }
            else{
              obj[cols[innerKey]] = ""; } }
          tableData.push(obj); }     
    
        html = tmp({cols: cols, rows:tableData});
        $("#target").html(html);
    });

    <div id="target"></div>
    <script language="text/template" id="template">
        <table>
            <tr>
            {{#each cols}}
                <th>{{this}}</th>
            {{/each}}
            </tr>
            {{#each rows}}
            <tr>
                {{#each this}}
                <td>{{this}}</td>
                {{/each}}
            </tr>
            {{/each}}
        </table>
    </script>
    
    <script src="//code.jquery./jquery-2.1.1.min.js"></script>
    <script src="//cdnjs.cloudflare./ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>

本文标签： javascriptIs there an equivalent of consoletable in the browserStack Overflow