Getting column when data array has a "sub-object"

[jonnywilliamson]

• Vue.js version: 1.0.24
• consumed using: pre-compiled
• FULL error message (including stack trace): N/A
• relevant code:

https://jsfiddle.net/n5484gbk/1/

Each item in my DATA array looks like this:

{
  FlightDep: "MCO",
  FlightArr: "DUB",
  FlightAcType: "330",
  FlightDesc: "EI120",
  positionCount: {
    CP: 1,
    FO: 3,
    SU: 1,
    SN: 1,
    CC: 6,
  }
}

I want columns for FlightDesc, FlightDep and (for example) the CP section of the positionCount property.

In my vue code I have:

  data: {
    columns: ['FlightDesc', 'FlightDep', `positionCount.CP`],
    options: {
         ///Options in here
     }

However when I run this, I get three columns but the last column isn't showing the correct (or any) data positionCount.CP.

How do I access the positionCount.CP, positionCount.FO etc etc as columns?

[jonnywilliamson]

Just updated the question. I hit submit too early. Sorry!

[matfish2]

The plugin doesn't support multidimensional data. You can use a template on this column to display the data, but if your goal is to assign a column to each property I would advise you to "flatten" the returned data before assigning it, thus enabling you to sort and search by those columns.

[jonnywilliamson]

The plugin doesn't support multidimensional data.

Do you accept feature requests?!

[matfish2]

If the feature request is clear and elaborated I will consider it. Handling nested data is a very generic request that can be handled in multiple ways. The request must be specific as to the full process from data management to presentation. E.g: should the data be "flattened" before assigning it and then handled normally, thus saving the user this task, or should it stay in its original structure and the table's HTML will somehow represent it?

[Doogiemuc]

Even in a template I cannot access the sub-documents. Starting from your (awesome!) fiddle: https://jsfiddle.net/matfish2/f5h8xwgn/ Let's asume, that the data contained sub documents, e.g.

tableData: [{
      id: "1",
      name: "Sidney Brakus",pet:randomOption(),
      some_sub_doc: { foo: 'bar' },      
      birth_date: randomDate(new Date(1925, 0, 1), new Date(2012, 0, 1))

    }, {
      id: " ...

Then I tried in my template:

someColumn: "{some_sub_doc.foo}"

and expected it to show the value 'bar'. But apparently this dot notation is not supported.

I found a solution:

template functions actually receive the full row. With that one can access neested data in sub-documents, for example like this:

del: function(row) {
  return "<a href='javascript:void(0);' @click='$parent.deleteMe(\""+row._id.$oid+"\")'><i class='glyphicon glyphicon-remove'></i></a>"
}

asuming your data for each row has a { _id: { $oid: "34sadfsfX" }, otherField: ... } (mongoDB returns it like that)