Join data from various model / transpose data in models

Question

Hello there,
is there a best practice or pattern to re-use data from a model when the original layout does not match the control's necessities right? Consider the following example:
var oData = {
  "persons": [
    {"name": "Sonja Software", "phones": ["12345", "54321"]},
    {"name": "Conrad Coder", "phones": []},
    {"name": "Mike Mailinglist", "phones": ["6789"]},
    {"name": "Hugo Hacker", "phones": ["54321"]}]};
This could be easily used to set up a table for example, see this gist here.
What is the best way to also show a table of all telephone numbers? I could manually go over the data and set up another model to achieve this:
var oDataTransposed = {
  "phones": [
    {"number": "12345", "persons": ["Sonja Software"]},
    {"number": "54321", "persons": ["Sonja Software", "Hugo Hacker"]},
    {"number": "6789", "persons": ["Mike Mailinglist"]}]};
But this would make the two models get out of sync once, e.g. a name is changed. The above mentioned gist has three files. The `exampleTransposed.js` contains a manual inversion making the phone numbers the primary items. But there is certainly a more elegant way to achieve this, isn't it? Maybe by creating a model which itself is bound to the original model by some kind of databinding or some sort of calculated properties, see this comment on knockoutjs.
M.
PS: Maybe one should also add a
{"number": undefined, "persons": ["Conrad Coder"]}
In order to not to loose some of the persons but this is just a minor detail.

Answer 1

Hello Martin,
in the example https://gist.github.com/ricma/cf81829181cfd4e86354 the JSONModel is used. JSONModel is a client-side model. Each of the two tables (person table, phone table) needs its own data and model. In order to synchronize models after editing a table cell, two conversion functions are needed. One function converts person data into phone data, the other converts phone data into person data (see example for implementation):
function makePhoneList(oPersonList) {
function makePersonList(oPhoneList) {
Furthermore, two callback functions are needed. These callback functions shall be called whenever a table cell is modified:
function personModelChanged(oControlEvent) {
  oPhoneData = makePhoneList(oPersonData);
  oPhoneModel.setData(oPhoneData);
oPersonTable.addColumn(new sap.ui.table.Column({
  label: new sap.ui.commons.Label({text: "Name"}),
  template: new sap.ui.commons.TextField({
    value: "{personModel>name}",
    change: personModelChanged})}));
function phoneModelChanged(oControlEvent) {
  oPersonData = makePersonList(oPhoneData);
  oPersonModel.setData(oPersonData);
oPhoneTable.addColumn(new sap.ui.table.Column({
  label: new sap.ui.commons.Label({text: "Phone Number"}),
  template: new sap.ui.commons.TextField({
    value: "{phoneModel>number}",
    change: phoneModelChanged})}));
The solution works but has some disadvantages:
data and models have to be synchronized manually
for n models, 2n-2 conversion functions are needed
every modification causes creation of at least n-1 data structures and models
Best regards,
Frank