Create Datatable with objects

mavbcn

Hello!

I need to create a Datatable with an inline editor with a response from an Api. 
In the response I get the objects that are the rows. I have one object for every row. And every object has an array of objects that are the data for the columns. In every cell I need to put the value for cp_id and in the first one I have to put the name of the department. like this:

---

department      zone1.    zone2.   zone3

dep1                 20           20         20

dep2                 20           20         20

Any help would be more than welcome

thanks

Here is the response from the server

{
    "data": {
        "1": [
            {
                "id": 1,
                "event_id": 1,
                "department_id": 1,
                "zone_id": 1,
                "cp_id": 20,
                "nombreZona": "Zone 1",
                "sector_id": 1,
                "department_name": "department1",
                "area_id": 1
            },
            {
                "id": 2,
                "event_id": 1,
                "department_id": 1,
                "zone_id": 2,
                "cp_id": 20,
                "nombreZona": "Zone 2",
                "sector_id": 1,
                "department_name": "department1",
                "area_id": 1
            },
            {
                "id": 3,
                "event_id": 1,
                "department_id": 1,
                "zone_id": 3,
                "cp_id": 20,
                "nombreZona": "Zone 3",
                "sector_id": 1,
                "department_name": "department1",
                "area_id": 1
            },
            {
                "id": 4,
                "event_id": 1,
                "department_id": 1,
                "zone_id": 4,
                "cp_id": 20,
                "nombreZona": "Zone 4",
                "sector_id": 1,
                "department_name": "department1",
                "area_id": 1
            },
            {
                "id": 5,
                "event_id": 1,
                "department_id": 1,
                "zone_id": 5,
                "cp_id": 20,
                "nombreZona": "Zone 5",
                "sector_id": 1,
                "department_name": "department1",
                "area_id": 1
            },
            {
                "id": 6,
                "event_id": 1,
                "department_id": 1,
                "zone_id": 6,
                "cp_id": 20,
                "nombreZona": "Zone 6",
                "sector_id": 1,
                "department_name": "department1",
                "area_id": 1
            },
            {
                "id": 7,
                "event_id": 1,
                "department_id": 1,
                "zone_id": 7,
                "cp_id": 20,
                "nombreZona": "Zone 7",
                "sector_id": 1,
                "department_name": "department1",
                "area_id": 1
            }
        ],
        "2": [
            {
                "id": 26,
                "event_id": 1,
                "department_id": 2,
                "zone_id": 1,
                "cp_id": 20,
                "nombreZona": "Zone 1",
                "sector_id": 1,
                "department_name": "Department2",
                "area_id": 1
            },
            {
                "id": 27,
                "event_id": 1,
                "department_id": 2,
                "zone_id": 2,
                "cp_id": 20,
                "nombreZona": "Zone 2",
                "sector_id": 1,
                "department_name": "Department2",
                "area_id": 1
            },
            {
                "id": 28,
                "event_id": 1,
                "department_id": 2,
                "zone_id": 3,
                "cp_id": 20,
                "nombreZona": "Zone 3",
                "sector_id": 1,
                "department_name": "Department2",
                "area_id": 1
            },
            {
                "id": 29,
                "event_id": 1,
                "department_id": 2,
                "zone_id": 4,
                "cp_id": 20,
                "nombreZona": "Zone 4",
                "sector_id": 1,
                "department_name": "Department2",
                "area_id": 1
            },
            {
                "id": 30,
                "event_id": 1,
                "department_id": 2,
                "zone_id": 5,
                "cp_id": 20,
                "nombreZona": "Zone 5",
                "sector_id": 1,
                "department_name": "Department2",
                "area_id": 1
            },
            {
                "id": 31,
                "event_id": 1,
                "department_id": 2,
                "zone_id": 6,
                "cp_id": 20,
                "nombreZona": "Zone 6",
                "sector_id": 1,
                "department_name": "Department2",
                "area_id": 1
            },
            {
                "id": 32,
                "event_id": 1,
                "department_id": 2,
                "zone_id": 7,
                "cp_id": 20,
                "nombreZona": "Zone 7",
                "sector_id": 1,
                "department_name": "Department2",
                "area_id": 1
            }
        ]
    },
    "zones": 25,
    "departments": 2,
    "success": true
}

colin

I'm not quite following, but take a look at columns.render, that shows how you render the data to be anything you like.

If that doesn't help, we're happy to take a look, but please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin