Datatable.js make table from object

Question

Suppose I have a set of objects that each contain data I want to store into a data table. Per the documentation, I would normally do something like:

var dataSet = [
    ['Trident', 'Internet Explorer 4.0', 'Win 95+', '4', 'X'],
    ['Trident', 'Internet Explorer 5.0', 'Win 95+', '5', 'C'],
    ['Trident', 'Internet Explorer 5.5', 'Win 95+', '5.5', 'A'],
    ['Gecko', 'Camino 1.0', 'OSX.2+', '1.8', 'A'],
    ['Gecko', 'Camino 1.5', 'OSX.3+', '1.8', 'A'],
    ['Gecko', 'Netscape 7.2', 'Win 95+ / Mac OS 8.6-9.2', '1.7', 'A'],
    ['Gecko', 'Netscape Browser 8', 'Win 98SE+', '1.7', 'A'],
    ['Gecko', 'Netscape Navigator 9', 'Win 98+ / OSX.2+', '1.8', 'A'],
    ['Misc', 'PSP browser', 'PSP', '-', 'C'],
    ['Other browsers', 'All others', '-', '-', 'U']
];

But my data is presented as an array of objects. Can I iterate through them in a for loop and get each piece of data? For example, if I have an object, obj, that contains a title and a some data, the following does not work:

var finalObj = "["
for (var i = 0; i < obj.length; i++) {
    finalObj = finalObj + "['" + obj[i].title + "','" + obj[i].data + "']";
}
finalobj = finalObj + "]";

This results in my datatable only containing one letter per column. What is the proper way to create a string (or other object) that will be formatted like the example above?

Gyrocode.com · Accepted Answer · 2015-06-16 22:03:07Z

1

This is achieved using the data option in the initialization object, passing in an array of data to be used (like all other DataTables handled data, this can be arrays or objects using the columns.data option)

See the example below for code and demonstration.

$(document).ready( function () {
  
  var obj = [
        {
            "title": "Tiger Nixon",
            "data": "System Architect"
        },
        {
            "title": "Garrett Winters",
            "data": "Accountant"
        },
        {
            "title": "Ashton Cox",
            "data": "Junior Technical Author"
        }
  ];
  
  $('#example').DataTable({
    "data": obj,
    "columns": [
       { "data": "title" },
       { "data": "data" }
    ]
  });

});

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

    <link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
    <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display" width="100%">
        <thead>
          <tr>
            <th>Title</th>
            <th>Data</th>
          </tr>
        </thead>

        <tfoot>
          <tr>
            <th>Title</th>
            <th>Data</th>
          </tr>
        </tfoot>

        <tbody>
        </tbody>
      </table>
    </div>
  </body>
</html>

edited Jun 16, 2015 at 22:03

answered Jun 16, 2015 at 21:48

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ale10ander Over a year ago

So here again it looks like the data is hard-coded. I'm looking for what to do if I have an object that holds, say Tiger Nixon's information. How do I convert it to this? Would I just use "\"name\":"+obj[i].name ?

Gyrocode.com Over a year ago

@Cptn_Hammer , my data variable is an object, not a string that you're trying to generate. You just need to pass obj as "data": obj instead of "data": data in my example and define object properties in columns.data option.

Gyrocode.com Over a year ago

@Cptn_Hammer, changed my example to match your structure.

cs04iz1 · Accepted Answer · 2015-06-16 21:53:59Z

1

I think you need the example about the javascript sourced data

As you can see for yourself it uses the following code to create the table

 $('#example').dataTable( {
        "data": dataSet,
        "columns": [
            { "title": "Engine" },
            { "title": "Browser" },
            { "title": "Platform" },
            { "title": "Version", "class": "center" },
            { "title": "Grade", "class": "center" }
        ]
    } );

answered Jun 16, 2015 at 21:53

cs04iz1

1,8251 gold badge20 silver badges30 bronze badges

2 Comments

ale10ander Over a year ago

Yes, this is the example I referenced in my question. :) But I don't see how I can use it to get that data from an object. It seems here I still have to know ahead of time what my data will be.

cs04iz1 Over a year ago

The json you are using doen't give you specific data. It's just data, and you have to know what they represent. now if you have an object witch the property describes the value, you could do the following to populate the table: $.each(your_object, function(index, value) { $("#your_table").DataTable().row.add([value.property1, value.property2, ....,value.propertyN]).draw(); } });

Collectives™ on Stack Overflow

Datatable.js make table from object

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related