CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsjson
sathish kumar
sathish kumar

Reputation: 1197

dynamically displaying json data as a table when the structure/field names of the json data is not provided

In my application I will receive data in json format and I would like to display the data in tabular form in web browser.Please note that I will not be aware of the structure/field names of the data I receive.My requirement is to dynamically construct an table for any json object I receive.How will I achieve it using angularjs?Is there any other javascript library/framework like jquery/dojo that can help me achieve the said functionality?

Upvotes: 1

Views: 1897

Answers (1)

bri
bri

Reputation: 3030

While it's outside of the scope of an SO answer to write the code, I can at least give you the basics here:

In your Controller: create column meta-data

Loop through 1 or more objects and create your own metadata (I think XLS and MSAccess loop through the first 10-20 rows of csv data to get a basic set of fields. maybe do that).

$scope.rows = /// Get your data ... a json array of objects, I assume.
$scope.columns = getColumnsFromRows($scope.rows);

function getColumnsFromRows(rows) {
   var cols = [];
   if(rows==undefined || rows.length==0) { return cols; }
   var sampleRow = rows[0];
   for (var key in sampleRow) {
      if (sampleRow.hasOwnProperty(key)) {
         // I would add some datatype checking here.  At least make sure
         // we aren't looking at an array or a sub-object.
         // Maybe turn a key like "firstName" into "First Name" for label 
         cols.push({label: key, fieldNm: key});
      }
   }
   return cols;
}

In your view: ng-repeat through rows/columns

The easiest thing to do would be to use ng-repeat to loop through rows/columns. 

<div ng-controller="MyController">
   <table>
      <thead>
         <tr><th ng-repeat="col in columns">{{col.label}}</th></tr>
      </thead>
      <tbody>
         <tr ng-repeat="row in rows">
            <td ng-repeat="col in columns">{{row[col.fieldNm}}]</td>
         </tr>
      </tbody>
</div>

So, pretty simple. Now, your entire table is controlled by your controller. Add filters there, add sorting there, etc.

Fair warning, this is just example code. As you get deeper, make sure to take a deeper look at ng-repeat performance. The bigger your dataset, the slower your page will run (ng-repeat creates it's own scope for every "cell" in your table). That's why most people turn to libraries or directives to accomplish this task.

But, you're a smart guy. You've got rep on stack. You probably have a good reason for asking this question. So, no preaching. Good luck with the project!

Upvotes: 1

Related Questions