CODEWITHSUNDEEP
javascripthtmlangularjs
Dixit
Dixit

Reputation: 1379

Transpose dynamic table from rows to columns and vice versa

config.previewData = [
    {
        Cartridges:27989,
        Total Accounts:294,
        Metrices:"MVC",
        Toner Cartridges:5928,
        INK Cartridges:22061
    },
    {
        Cartridges:56511,
        Total Accounts:376,
        Metrices:"SMB",
        Toner Cartridges:15253,
        INK Cartridges:41258
    },
    {
        Cartridges:84,500,
        Total Accounts:670,
        Metrices:"Grand Total",
        Toner Cartridges:21,181,
        INK Cartridges:63,319
    },
]

and my html code like this

<table class="table table-striped">
    <thead>
        <tr role="row">
            <th data-ng-repeat="(key, val) in config.previewData[0]">
                {{ key}}
            </th>
        </tr>
    </thead>

    <tbody>
        <tr data-ng-repeat="row in config.previewData">
            <td data-ng-repeat="column in row">
                {{column}}
            </td>
        </tr>
    </tbody>
</table>

this code will print perfect like below image enter image description here

now i want to transpose this table into rows to columns and columns to rows. Is this possible with dynamic table because my object is dynamic not fixed.

Help me if anyone knows how to do this. After transpose table looks like this enter image description here

Upvotes: 0

Views: 7135

Answers (4)

Raunak
Raunak

Reputation: 1

If you have a 2-D array which can be logged into console by the function

 tab = [[2,3,4],[-4,6,0],[1,0,9]]
 console.table(tab)

You can log the transpose of it by using the following function:

function transpose_table(tab) {
    let columns = tab.length;
    let rows = tab[0].length;
    
    let trans = [];
    
    for (i=0; i<rows; i++) {
        trans.push([]);
    }
    
    for (i=0; i<columns; i++) {
        for (j=0; j<rows; j++) {
            trans[j][i] = tab[i][j];
        }
    }

    return trans;
}

Now run:

console.table(transpose_table(tab))

Upvotes: 0

searlea
searlea

Reputation: 8378

Using the same assumptions your example codes does (i.e. config.previewData always contains at least one object, and all objects have the same properties...)

<table class="table table-striped">
    <tbody>
        <tr data-ng-repeat="(key, val) in config.previewData[0]">
            <th>
                {{ key }}
            </th>
            <td data-ng-repeat="row in config.previewData">
                {{ row[key] }}
            </td>
        </tr>
    </tbody>
</table>

Upvotes: 2

user2648008
user2648008

Reputation: 152

this is the only (dirty) way i could think out

<tr>
        <td data-ng-repeat="row in previewData">{{row['Metrices']}}</td>
    </tr>
    <tr>
        <td data-ng-repeat="row in previewData">{{row['Total Accounts']}}</td>
    </tr>
    <tr>
        <td data-ng-repeat="row in previewData">{{row['Toner Cartridges']}}</td>
    </tr>

...... and so on

other options: Transposing JSON

Upvotes: 0

tanmay
tanmay

Reputation: 7911

Using reduce, you can have something like this to transpose your data, which can then be used to iterate over using ng-repeat very easily!

Example snippet (in Pure JS for simplification):

var previewData = [{
    "Cartridges": 27989,
    "Total Accounts": 294,
    "Metrices": "MVC",
    "Toner Cartridges": 5928,
    "INK Cartridges": 22061
  },
  {
    "Cartridges": 56511,
    "Total Accounts": 376,
    "Metrices": "SMB",
    "Toner Cartridges": 15253,
    "INK Cartridges": 41258
  },
  {
    "Cartridges": 84500,
    "Total Accounts": 670,
    "Metrices": "Grand Total",
    "Toner Cartridges": 21181,
    "INK Cartridges": 63319
  }
]

var transpose = previewData.reduce(function(arr, obj) {
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      arr[key] = arr[key] || []
      arr[key].push(obj[key])
    }
  }
  return arr
}, {})

console.log(transpose)

Upvotes: 2

Related Questions