javascript - Transpose dynamic table from rows to columns and vice versa - Stack Overflow

admin管理员组

文章数量:1417426

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

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

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

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

• javascript
• html
• angularjs

Share Improve this question Follow edited Apr 27, 2017 at 9:32 Bhavya Sinha 11233 bronze badges asked Apr 27, 2017 at 9:27 DixitDixit 1,37933 gold badges1818 silver badges4040 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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>

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)

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

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))

本文标签： javascriptTranspose dynamic table from rows to columns and vice versaStack Overflow