mapping to hierarchical objects by flattening

[baderaParticipant]

Dear all

I have a JSON Object containing an array of Objects and the Objects itself do contain again an array of objects.
I like to display this content in a flat way in a jqxGrid and therefore I wonder if I can configure the dataAdapter to do this mapping. According the API-Doc, we can do a lot in the datafield setting of the dataAdatper; however, is it possible to do this?

My input Object is the following:

{
   "readers":[
      {
         "merchantID":3,
         "id":20,
         "merchant":"Location 1",
         "label":"A179207",
         "state":"ACTIVE",
         "timestampLastActivity":1424176492950,
         "details":[
            {
               "readerTypeName":"myReader",
               "id104":"ID104",
               "id106":"ID106",
               "configName":"MyConfiguration",
               "firmwareVersion":"00.09.53-6319",
               "timestamp":1424176492947
            }
         ]
      },
      {
         "merchantID":3,
         "id":446,
         "merchant":"Location 1",
         "label":"A123091",
         "state":"ACTIVE",
         "timestampLastActivity":1424178336044,
         "details":[
            {
               "readerTypeName":"myReader",
               "id104":"ID104_01",
               "id106":"XY-0091",
               "configName":"My Configuration 02",
               "firmwareVersion":"00.09.53-6319",
               "timestamp":1424178320164
            },
            {
               "readerTypeName":"myReader",
               "id104":"ID104_02",
               "id106":"XY-0015",
               "configName":"My Configuration 01",
               "firmwareVersion":"00.09.53-6319",
               "timestamp":1424178335614
            }
         ]
      }
   ]
}

Every ‘readers’ elemenet does contain at least one array member ‘details’. So I like to display a grid with one row per detail, together with the detail’s parent data. Therefore, the dataAdapter should do ‘flattening’; this means in result, we should see three rows, each with a merge of ‘readers’ root elements with their details.

The resulting array bound to the grid should in this example be:

[
    {
         "merchantID":3,
         "id":20,
         "merchant":"Location 1",
         "label":"MIC179207",
         "state":"ACTIVE",
         "timestampLastActivity":1424176492950,
         "readerTypeName":"myReader",
         "id104":"ID104",
         "id106":"ID106",
         "configName":"MyConfiguration",
         "firmwareVersion":"00.09.53-6319",
         "timestamp":1424176492947
    },
    {
         "merchantID":3,
         "id":446,
         "merchant":"Location 1",
         "label":"MIC123091",
         "state":"ACTIVE",
         "timestampLastActivity":1424178336044,
         "readerTypeName":"myReader",
         "id104":"ID104_01",
         "id106":"XY-0091",
         "configName":"My Configuration 02",
         "firmwareVersion":"00.09.53-6319",
         "timestamp":1424178320164
    },
    {
         "merchantID":3,
         "id":446,
         "merchant":"Location 1",
         "label":"MIC123091",
         "state":"ACTIVE",
         "timestampLastActivity":1424178336044,
         "readerTypeName":"myReader",
         "id104":"ID104_02",
         "id106":"XY-0015",
         "configName":"My Configuration 01",
         "firmwareVersion":"00.09.53-6319",
         "timestamp":1424178335614
    }
]

Is this possible to configure? Or should I use the ‘beforeLoadComplete’ function to handle this?

At the end, the column ‘label’ will be display as ‘grouped’ in the grid and I get back the hierarchical view.

Thanks in advance for your help!
– badera

[DimitarParticipant]

Hello badera,

If there was only one “details” field per reader, your data could easily be mapped and “flattened”. But, as it is, it would probably be best to manually handle it in beforeLoadComplete.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[baderaParticipant]

Thanks Dimitar.

I do it now like this:

        beforeLoadComplete: function (readers) {
            var records = [];
            readers.forEach(function (reader) {
                if (angular.isArray(reader.details)) {
                    reader.details.forEach(function (detail) {
                        var record = {};
                        record.label = reader.label;
                        record.id104 = detail.id104;
                        record.timestampLastActivity = reader.timestampLastActivity;
                        record.timestamp = reader.timestamp;
                        record.state = reader.state;
                        record.configName = detail.configName;
                        record.firmwareVersion = detail.firmwareVersion;
                        records.push(record);
                    });
                }
            });

            return records;
        }

Best regards,
– badera

[Author]

Posts