angular ui grid display array in a column

Question

I am trying to make a data binding from array representation to be dispalyed in one column. See http://jsfiddle.net/0vgb89vn/2/

For example:

var dataAsArray = {
"names": ["firstName", "lastName", "company", "employed"],
"data": [
    ["Cox", "Carney", "Enormo", true],
    ["Lorraine", "Wise", "Comveyer", false],
    ["Nancy", "Waters", "Fuelton", false]
]};

To be dispalyed as

first name | lastName | company | employed

Cox | Carney | Enormo | true

Lorraine | Wise | Conveyer | false

....

If simplier, another data representation could be

var dataAsArrayOption2 = {
"names": ["firstName", "lastName", "company", "employed"],
"data": [
    ["Cox", "Lorraine", "Nancy"],
    ["Carney", "Wise", "Waters"],
    ["Enormo", "Comveyer", "Fuelton"],
    [true, false, false]
]

};

Any idea how to do the data biding? do we need to use a cell template? or a mapping function to retrieve data per row and per column?

Again here is a the context of my issue:

http://jsfiddle.net/0vgb89vn/2/

Thanks in advane for our help!

CMR · Accepted Answer · 2015-09-11 15:20:08Z

-1

you would indeed need to remap your data after receiving. I updated your fiddle.

With your first format you could do something like

var dataAsArray = {
  "names": ["firstName", "lastName", "company", "employed"],
  "data": [
    ["Cox", "Carney", "Enormo", true],
    ["Lorraine", "Wise", "Comveyer", false],
    ["Nancy", "Waters", "Fuelton", false]
  ]
};

var dataOkToo = [];
for (var i = 0, len = dataAsArray.data.length; i < len; i++) {
  var obj = {};
  obj[dataAsArray['names'][0]] = dataAsArray['data'][i][0];
  obj[dataAsArray['names'][1]] = dataAsArray['data'][i][1];
  obj[dataAsArray['names'][2]] = dataAsArray['data'][i][2];
  obj[dataAsArray['names'][3]] = dataAsArray['data'][i][3];
  dataOkToo.push(obj);
}

Its a bit messy, but would provide results fast.

e: For lots of data, you can use a more complex loop-structure, like:

for (var i = 0, len = dataAsArray.data.length; i < len; i++) {
  var obj = {};
  for(var j = 0, lenTwo = dataAsArray['names'].length; j < lenTwo; j++) {
    obj[dataAsArray['names'][j]] = dataAsArray['data'][i][j];
  }
}

I didnt want to confuse by using a nested loop with a simple setup. I updated the fiddle to showcase.

edited Sep 11, 2015 at 15:20

answered Sep 11, 2015 at 12:23

CMR

9331 gold badge7 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gwen Over a year ago

Thanks for your proposal. But

Gwen Over a year ago

Thanks for your proposal. But it will be too much verbose since I have more than 100,000 rows to display with more than 20 columns? It's weird that Angular does NOT provide natively this kind of mapping. At least for a structure like that var dataAsArrayOption2 = { "names": ["firstName", "lastName", "company", "employed"], "data": [ ["Cox", "Lorraine", "Nancy"], ["Carney", "Wise", "Waters"], ["Enormo", "Comveyer", "Fuelton"], [true, false, false] ]

CMR Over a year ago

See new edit for a more complex loop that can cover lots of data easily.

Collectives™ on Stack Overflow

angular ui grid display array in a column

first name | lastName | company | employed

Cox | Carney | Enormo | true

Lorraine | Wise | Conveyer | false

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

first name | lastName | company | employed

Cox | Carney | Enormo | true

Lorraine | Wise | Conveyer | false

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related