json data-binding sapui5 jsonmodel property-binding

SAPUI5 bind JSON Model consisting of objects to sap.m. Table

I have a problem binding my JSON Model to a sap.m.table. The model itself gets generated through an array which itself gets filled throughout the code and in the end it consists of different objects.

Here's a screenshot of the object data:

That structure seems kind of weird to me since I always have to click the (...) in order to see the actual content.

Anyhow, I try to bind the labelName and uploadName to a two-column-table.

<m:Table id="emptyColumnText" rows="{/emptyColModel}">
   <m:headerToolbar>
       <m:Toolbar height="2rem">
           <m:Title text="{i18n>excel.emptyColMessage}" />
        </m:Toolbar>
   </m:headerToolbar>
   <m:columns>
        <m:Column>
           <m:Text text="Excel Upload" />
        </m:Column>
        <m:Column>
           <m:Text text="InfoObject" />
        </m:Column>
     </m:columns>
     <items>
        <ColumnListItem>
           <cells>
               <Text text="{/uploadName}" /> //different approaches to 
               <Text text="{>labelName}" />  // see what works
           </cells>
         </ColumnListItem>
     </items>
</m:Table>

I already tried different approaches in binding the Model to the table items and also binding the upload-/labelName to the cells, but I haven't been successful yet. Also I'd like to do all of my binding in the view, not in the controller!

Here's how I set my model:

var emptyColMessage = new sap.ui.model.json.JSONModel(emptyCol, 'emptyColModel');
dialog.setModel(emptyColMessage); // a new dialog opens which should contain the model, so I thought I'd set the model to the dialog

and this is how emptyCol looks with one entry:

Looking at the UI5 Inspector. I see, that the table has a binding to the /emptyColModel but there are no items listed or anything that points to a correct binding.

So how do I correctly bind my data? I tried several attempts of how I add the path.

Edit

I just looked at the model information an realized that the mmodel data looks like that:

So I guess, accessing uploadName gets kind of hard when it's not an actual property of the model but only a string?

Edit 2

Update regarding @TiiJ7 's help

  if (emptyCol.length !== 0) {
     var emptyColMessage = new sap.ui.model.json.JSONModel({ emptyColModel: emptyCol });
      //    var emptyColMessage = new sap.ui.model.json.JSONModel(emptyCol, 'emptyColModel');
   }
   if (randomMatch.length !== 0) {
      var randomMatchMessage = new sap.ui.model.json.JSONModel({ randomColModel: randomMatch });
   }
   if (matchedColumn.length !== 0) {
        var matchedColumnMessage = new sap.ui.model.json.JSONModel({ matchedColModel: matchedColumn });
   }
   dialog.setModel(emptyColMessage, 'emptyColModel');
   dialog.setModel(randomMatchMessage, 'randomColModel');
   dialog.setModel(matchedColumnMessage, 'matchedColModel');

my xml code for the first table:

                             <m:Table id="emptyColumnText" items="{/emptyColModel}">
                                <m:headerToolbar>
                                    <m:Toolbar height="2rem">
                                        <m:Title text="{i18n>excel.emptyColMessage}" />
                                    </m:Toolbar>
                                </m:headerToolbar>
                                <m:columns>
                                    <m:Column>
                                        <m:Text text="Excel Upload" />
                                    </m:Column>
                                    <m:Column>
                                        <m:Text text="InfoObject" />
                                    </m:Column>
                                </m:columns>
                                <m:items>
                                    <m:ColumnListItem>
                                        <m:cells>
                                            <m:Text text="{/emptyColModel>labelName}" /> //I again tried different solutions
                                           <m:Text text="{uploadName}" />
                                        </m:cells>
                                    </m:ColumnListItem>
                                </m:items>

                            </m:Table>

Solution

You bind the property "rows" of your table, but sap.m.Table doesn't have rows, it has items. Secondly, your data (emptyCol) appears to be an array. While you can set this directly as the data of your JSONModel, I would recommend wrapping it in an object, so you can give it an appropriate key. You can then map the items with this key (if you set the array to the model directly, you'd have to map it as "{/}" instead).

Here is a small working sample I made, with a few additional comments (note: I set the model to a view in this case, but it should be the same for a dialog):

var emptyCol = [{
  key: false,
  labelName: "Beschreibung lang",
  technicalName: "COL04",
  uploadName: "EMPTY_COLUMN_1"
}];

sap.ui.define("myController", [
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/json/JSONModel"
], function(Controller, JSONModel) {
  "use strict";

  return Controller.extend("myController", {
    onInit: function() {
      // Wrap the array with an object and give it a key (I chose "myItems" for this example)
      // Also note there is no second parameter to a JSONModel
      var oModel = new JSONModel({ myItems : emptyCol });
      this.getView().setModel(oModel);
    }
  });
});

sap.ui.require(["sap/ui/core/mvc/XMLView"], function(XMLView) {
  XMLView.create({
    definition: $('#myView').html()
  }).then(function(oView) {
    oView.placeAt('content');
  });
});

<html>

  <head>
    <meta charset="utf-8">
    <script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-libs='sap.m'></script>
    <script id="myView" type="sapui5/xmlview">
      <mvc:View controllerName="myController" xmlns:mvc="sap.ui.core.mvc" xmlns:m="sap.m">
        <m:Table id="emptyColumnText" items="{/myItems}">
          <m:headerToolbar>
            <m:Toolbar height="2rem">
              <m:Title text="{i18n>excel.emptyColMessage}" />
            </m:Toolbar>
          </m:headerToolbar>
          <m:columns>
            <m:Column>
              <m:Text text="Excel Upload" />
            </m:Column>
            <m:Column>
              <m:Text text="InfoObject" />
            </m:Column>
          </m:columns>
          <!-- Also: be consistent with your "m:" prefixing -->
          <m:items>
            <m:ColumnListItem>
              <m:cells>
                <!-- These are the correct relative mappings -->
                <m:Text text="{uploadName}" />
                <m:Text text="{labelName}" />
              </m:cells>
            </m:ColumnListItem>
          </m:items>
        </m:Table>
      </mvc:View>
    </script>
  </head>

  <body class='sapUiBody'><div id='content'></div></body>
</html>

EDIT

If you need to have multiple models for multiple tables, you will need to give each model its own name (as you've correctly done in your edit). In order to access the data you simply need to add the correct prefixes in your view (in the form of yourModel>...). It is important you do this in all your bindings (so both for items and for text). Here is an adapted example:

var emptyCol = [{
  key: false,
  labelName: "Beschreibung lang",
  technicalName: "COL04",
  uploadName: "EMPTY_COLUMN_1"
}];

sap.ui.define("myController", [
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/json/JSONModel"
], function(Controller, JSONModel) {
  "use strict";

  return Controller.extend("myController", {
    onInit: function() {
      var oModel = new JSONModel({ emptyColModel: emptyCol });
      // Add model name in setter
      this.getView().setModel(oModel, 'emptyColModel');
    }
  });
});

sap.ui.require(["sap/ui/core/mvc/XMLView"], function(XMLView) {
  XMLView.create({
    definition: $('#myView').html()
  }).then(function(oView) {
    oView.placeAt('content');
  });
});

<html>

  <head>
    <meta charset="utf-8">
    <script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-libs='sap.m'></script>
    <script id="myView" type="sapui5/xmlview">
      <mvc:View controllerName="myController" xmlns:mvc="sap.ui.core.mvc" xmlns:m="sap.m">
        <!-- Name of model added below -->
        <!-- Note: first "emptyColModel" is the name of the model, the second is the name of the key you chose (which is the same in this case) -->
        <m:Table id="emptyColumnText" items="{emptyColModel>/emptyColModel}">
          <m:headerToolbar>
            <m:Toolbar height="2rem">
              <m:Title text="{i18n>excel.emptyColMessage}" />
            </m:Toolbar>
          </m:headerToolbar>
          <m:columns>
            <m:Column>
              <m:Text text="Excel Upload" />
            </m:Column>
            <m:Column>
              <m:Text text="InfoObject" />
            </m:Column>
          </m:columns>
          <m:items>
            <m:ColumnListItem>
              <m:cells>
                <!-- Name of model added below -->
                <m:Text text="{emptyColModel>uploadName}" />
                <m:Text text="{emptyColModel>labelName}" />
              </m:cells>
            </m:ColumnListItem>
          </m:items>
        </m:Table>
      </mvc:View>
    </script>
  </head>

  <body class='sapUiBody'><div id='content'></div></body>
</html>