Create array of objects from ajax result

Question

I am using DataTables with ajax and I am trying to dynamically generate a columns list as in the example here: https://datatables.net/examples/ajax/orthogonal-data.html (only in my case I have display and order for all items).
I tried with this approach, but this doesn't work and I am guessing push my sub values wrong.

Input (ajax result):

[{
    "itemId": {
      "order": "BG007002",
      "display": "BG007002"
    },
    "builtDate": {
      "order": "2000-03-01",
      "display": "01.03.2000"
    },
    "openedDate": {
      "order": "2005-07-09",
      "display": "09.07.2005"
    },
    "buildingSize": {
      "order": 15000,
      "display": "15.000"
    }
  }, // ...

Expected output:

[
    { data: {
        _:    "itemId.display",
        sort: "itemId.order"
        }
    },
    { data: {
        _:    "builtDate.display",
        sort: "builtDate.order"
        }
    },
    { data: {
        _:    "openedDate.display",
        sort: "openedDate.order"
        }
    },
    { data: {
        _:    "buildingSize.display",
        sort: "buildingSize.order"
        }
    }
]

My approach:

var reportColsShort = $('#reportColsShort').text().slice(0,-1);
var aoCols = [];            
var colss = reportColsShort.split(',');

for (var i = 0; i < reportColsShort.split(',').length; i++) {
    var aoColss = {};
    aoColss['data']['_'] = colss[i].display;
    aoColss['data']['sort'] = colss[i].order;
    aoCols.push(aoColss); // expected output
}

Error:

Cannot set property '_' of undefined.

Update:

Here is one more reference to what I am trying to achieve:
https://datatables.net/reference/option/columns.render#Examples

JavaScript doesn't have "associative arrays"; just objects and arrays. — Heretic Monkey
– Heretic Monkey, Commented Nov 16, 2020 at 19:40
@HereticMonkey: Thanks for pointing this out. Will keep it in mind. — keewee279
– keewee279, Commented Nov 16, 2020 at 19:41
Within the question itself, please be more specific about "what doesn't" work. — Marc
– Marc, Commented Nov 16, 2020 at 19:42
I am not able to create the expected output dynamically and therefore cannot use this to set up DataTables as intended. I get the error "Cannot set property '_' of undefined." If I hard-code the expected output then it works fine. — keewee279
– keewee279, Commented Nov 16, 2020 at 19:49
"my data set is generated dynamically so the columns will not always be the same". You can build a second data structure - let's call it var dynamicColumns - and populate that with the data needed for a DataTables columns option. You can see an example of this in this answer. It's for a different source data structure, of course - but the principle is the same. — andrewJames
– andrewJames, Commented Nov 16, 2020 at 22:07

Huw · Accepted Answer · 2020-11-16 22:07:36Z

1

You can take the ajax result and then use a map see docs to structure your data like this:

const data = [{
    "itemId": {
      "order": "BG007002",
      "display": "BG007002"
    },
    "builtDate": {
      "order": "2000-03-01",
      "display": "01.03.2000"
    },
    "openedDate": {
      "order": "2005-07-09",
      "display": "09.07.2005"
    },
    "buildingSize": {
      "order": 15000,
      "display": "15.000"
    }
  }];

const mapResult = data.map((elem) => {
  let array = [];
  Object.keys(elem).forEach((key) => {
    
    const temp = {
      data: {
        _: elem[key].display,
        sort: elem[key].order
      }
    }
    array.push(temp);
  });
  return array;
});

console.log(mapResult);

edited Nov 16, 2020 at 22:07

answered Nov 16, 2020 at 20:02

Huw

2892 silver badges5 bronze badges

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

8 Comments

keewee279 Over a year ago

Thanks a lot for this. Will try it now.

keewee279 Over a year ago

I tried with this and it looks good but my problem is that my data set is generated dynamically so the columns will not always be the same. Is there a way to use this approach dynamically, i.e. without hard-coding the column names ?

Huw Over a year ago

I would say no there isn't. If you don't know the exact order of data coming in, then without the keys of the original object ("itemId", "builtDate"...) after running a map function all you would have is a lot of random numbers: if one of "openedDate" or "buildDate' was missing you wouldn't know which one.

keewee279 Over a year ago

I also think that map is the wrong approach here but it should work with array.push I think.

Huw Over a year ago

I have made an update, is this what you were after?

|

Collectives™ on Stack Overflow

Create array of objects from ajax result

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related