a responsive grid view featuring automatically updated column headings

Question

a responsive grid view featuring automatically updated column headings

Can a table be populated in angular.js without predefining column names before the 'ng-repeat'? Currently, the table is populated like this..

                     <table class="table">
                        <thead>
                          <tr>
                            <th>Arup Mnemonic</th>
                            <th>Organism</th>
                            <th>Test</th>
                            <th>Result</th>
                            <th>Source</th>
                            <th>Source Value</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr ng-repeat="x in data">
                            <td>{{ x.Arup_Mnemonic }}</td>
                            <td>{{ x.organism }}</td>
                            <td>{{ x.test }}</td>
                            <td>{{ x.result }}</td>
                            <td>{{ x.source }}</td>
                            <td>{{ x.source_value }}</td>
                          </tr>
                        </tbody>
                    </table>

Is it possible to eliminate all hard coding and let the scope variable determine the column names and data?

Quick Edit: https://i.sstatic.net/xTfIT.png Here's a quick glance at the data in its current form.. I require the key in the key:value pairs of this object. Is there a way to retrieve those values using pure JavaScript?

javascript angularjs html-table

Answer 1

Answer №1

It appears that the columns are not known in advance. Therefore, the keys of the first object must be obtained to identify the columns.

angular:

var obj = data[0];
$scope.columns =  Object.keys(obj).filter(function(key) {
  if (obj.hasOwnProperty(key) && typeof key == 'string') {
    return key;
  }
});

$scope.format = function(str) {
    return str.replace('_',' '); //add additional formatting here. 
}

html:

<table class="table">
  <thead>
    <tr>
      <td ng-repeat="column in columns">
        {{format(column)}}
      </td>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="datum in data">
      <td ng-repeat="column in columns">
        {{datum[column]}}
      </td>
    </tr>
  </tbody>
</table>

Edit: Adopted the practice of filtering keys from another answer as a best practice for retrieving keys from objects.

Answer 2

It appears that the columns are not known in advance. Therefore, the keys of the first object must be obtained to identify the columns.

angular:

var obj = data[0];
$scope.columns =  Object.keys(obj).filter(function(key) {
  if (obj.hasOwnProperty(key) && typeof key == 'string') {
    return key;
  }
});

$scope.format = function(str) {
    return str.replace('_',' '); //add additional formatting here. 
}

html:

<table class="table">
  <thead>
    <tr>
      <td ng-repeat="column in columns">
        {{format(column)}}
      </td>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="datum in data">
      <td ng-repeat="column in columns">
        {{datum[column]}}
      </td>
    </tr>
  </tbody>
</table>

Edit: Adopted the practice of filtering keys from another answer as a best practice for retrieving keys from objects.

Answer 3

Answer №2

Have you considered creating your own model for headlines and iterating through it?

Assume we have an array called headlines which contains all possible headlines, one for each index.

<table class="table">
  <thead>           
    <tr ng-repeat="headline in headlines"> 
      <th>{{ headline }}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="x in data">
      <td>{{ x.Arup_Mnemonic }}</td>
      <td>{{ x.organism }}</td>
      <td>{{ x.test }}</td>
      <td>{{ x.result }}</td>
      <td>{{ x.source }}</td>
      <td>{{ x.source_value }}</td>
    </tr>
  </tbody>
</table>

Answer 4

Have you considered creating your own model for headlines and iterating through it?

Assume we have an array called headlines which contains all possible headlines, one for each index.

<table class="table">
  <thead>           
    <tr ng-repeat="headline in headlines"> 
      <th>{{ headline }}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="x in data">
      <td>{{ x.Arup_Mnemonic }}</td>
      <td>{{ x.organism }}</td>
      <td>{{ x.test }}</td>
      <td>{{ x.result }}</td>
      <td>{{ x.source }}</td>
      <td>{{ x.source_value }}</td>
    </tr>
  </tbody>
</table>

Answer 5

Answer №3

One potential approach to this issue (keep in mind that this code has not been verified):

// within the controller
$scope.titles = Object.keys(data[0]).filter(function(property) {
    if (data[0].hasOwnProperty(property) && typeof property == 'string') {
        return property;
    }
});

Answer 6

One potential approach to this issue (keep in mind that this code has not been verified):

// within the controller
$scope.titles = Object.keys(data[0]).filter(function(property) {
    if (data[0].hasOwnProperty(property) && typeof property == 'string') {
        return property;
    }
});

Answer 7

Answer №4

   <div data-ng-repeat="(k,v) in dataGrid">
                                <span></span>
                                <span data-ng-repeat="c in cols" data-ng-init="CurrentKey = c.key">{{v[CurrentKey]}}
                                </span>
                            </div>

Answer 8

   <div data-ng-repeat="(k,v) in dataGrid">
                                <span></span>
                                <span data-ng-repeat="c in cols" data-ng-init="CurrentKey = c.key">{{v[CurrentKey]}}
                                </span>
                            </div>

a responsive grid view featuring automatically updated column headings

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Alter the functionality of the input element that has a tag of 'multiple'

What steps can be taken to empower users to make changes to pre-selected data within the vue-select component?

The filter feature does not function properly when used with an ng-option generated from an array, but it performs effectively with static

The attempt to update several partial views using Jquery, MVC, and Json is currently malfunctioning

Accessing local JSON data through JavaScript

Storing the closed state of a pop-up box in localStorage for future reference

In Vue, the concept of using the debounce method is not clearly defined

The state may be modified, but the component remains unchanged

Ways to validate the existence of URLs from different domains with javascript

The radio buttons that can be deselected are not accurately retaining their previous value

update the componentWillMount() function

"Implementation of a dropdown menu featuring deletion capabilities within an ng-repeat loop

Storing input values in the state using Typescript by default

What is the best approach to passing multiple variables to a JavaScript function in HTML/PHP?

When attempting to retry in Next.js, the props obtained from getServerSideProps may

Caching HTML5 videos in Google Chrome

AngularJS URL Transformation: A How-To Guide

I am facing issues with the functionality of $setValidity for my validation process

Having trouble with a JQuery selector not functioning properly when trying to select a class in the HTML that contains a

Assign a value to the input field based on changes made in another input field