jsRender pivot rows to columns - display data in columns

Question

I'm using jsRender and I wanted to display my data as columns rather then the rows I am returning. I want to pivot the data - is this something that can be done with jsRender. I can't get the data pivoted in SQL so my only option is to do it myself.

This is basically what I am after. I want to write the column names myself.

Header | Row 1 | Row 2 | Row 3 |

Column Blah | Row data | Row data | Row data

More blah | Row data | Row data | Row data

I have tried to use the {{for}} loop for table cell but I just don't know where to start.

UPDATE: After Boris's suggestion I have tried the suggested code. Although I as it's not formatting properly I have included it here.

This is an excerpt of my JSON source:

{
  "Layers": {
    "Layer": [
      {
    "@LayerID": "1",
    "RiskRef": {
      "@ColVal": "Contract/Section Number",
      "#text": "PUSNA11000392/1"
    },
    "ContractStatus": {
      "@ColVal": "New, Renewal or NTU?",
      "#text": "New"
    },
    "AdjustRate": {
      "@ColVal": "Adjustable Rate",
      "#text": "0.53%"
    },

And my jsRender javaScript code is:

<script id="xolDetailsTemplate" type="text/x-jsrender">
            {{for Layers}}
                {{for >#data["Layer"]}}
                <td>{{>#data["@LayerID"]}}</td>
                {{/for}}
            {{/for}}
</script>

BorisMoore · Accepted Answer · 2012-09-21T19:57:50.610

1

If your data is model = { people: [{firstName: "Jo", lastName: "Colby"}, ...] }

you can use the following template to render a people array, pivoted rows to columns:

<tbody>
    <tr><td>First Name</td>{{for people}}<td>{{>firstName}}</td>{{/for}}</tr>
    <tr><td>Last Name</td>{{for people}}<td>{{>lastName}}</td>{{/for}}</tr>
</tbody>

In your comment below you say that your data is has field names like "@foo". Lets consider this example: model = { "people": [{"@firstName": "Jo", "@lastName": "Colby"}}, ...] }.

You can render this with a template as follows:

<tbody>
    <tr><td>First Name</td>{{for people}}<td>{{>#data["@firstName"]}}</td>{{/for}}</tr>
    <tr><td>Last Name</td>{{for people}}<td>{{>#data["@lastName"]}}</td>{{/for}}</tr>
</tbody>

If the field name has non JavaScript name characters, such as "@" that is where you need to use the syntax #data["@xxx"].

edited Sep 21 '12 at 19:57

answered Sep 19 '12 at 17:36

BorisMoore

8,444
1
16
27

I thought that would be the case. However my source is XML from a SQL Server database which has attributes. When I convert the XML to a JSON string I have everything in quotes. So my attributes are "@LayerNo" – Arminder Dahul Sep 20 '12 at 08:28
Here's a snippet of my JSON string. "MyData": { "Row": [ { "@RowID": "1", "Column1": { "@ColVal": "Contract/Section Number", "#text": "PUSNA11000392/1" }, "Column2": { "@ColVal": "New, Renewal or NTU?", "#text": "New" }, – Arminder Dahul Sep 20 '12 at 08:38
Ah, you had not said that in the original question. Answer updated to help you deal with those special characters... – BorisMoore Sep 21 '12 at 19:58
Apologies Boris. Thanks for the update. I will have a go. As you can imagine I've been trying out other solutions so I'm flicking between different methods at the mo. I will mark this as answered - hope to test this out soon. Thank you again for your help :-) – Arminder Dahul Sep 24 '12 at 08:46
@ArminderDahul - I see you never marked this reply as 'accepted'. Could be good to do so... – BorisMoore May 05 '16 at 18:32
Apologies, I thought I did. Better late than never. – Arminder Dahul May 06 '16 at 16:17

jsRender pivot rows to columns - display data in columns

1 Answers1