CODEWITHSUNDEEP
sapui5
Joshreyas
Joshreyas

Reputation: 11

Concatenate data contained in a JSONModel

I am looking for a code, which allows me to concatenate two JSONModel attributes and then map to a table. For example if my JSON looks something like this.

[
    {"FirstName","James", "LastName","Bond"},
    {"FirstName","Robin", "LastName","Hood"},
    {"FirstName","Peter", "LastName","Parker"}
]

I want my SAP UI table column to look something like

<table border=1>
  <tr><th>Name</th></tr>
  <tr><td>James Bond </td></tr>
   <tr><td>Robin Hood </td></tr>
   <tr><td>Peter Parker </td></tr>
  
 </table>

Upvotes: 1

Views: 927

Answers (1)

schnoedel
schnoedel

Reputation: 3948

First you have to put your json data into a model and assign that to your view or table (beware that your json data has syntax errors. below is the corrected version):

onInit:function(){
  var data = [
    {"FirstName":"James", "LastName":"Bond"},
    {"FirstName":"Robin", "LastName":"Hood"},
    {"FirstName":"Peter", "LastName":"Parker"}
    ];
  this.getView().setModel(new sap.ui.model.json.JSONModel(data));
}

Second you need something like a table:

<t:Table rows="{/}">
  <t:Column>
    <Label text="Full Name"/>
    <t:template>
      <Label text="{FirstName} {LastName}"/>
    </t:template>
  </t:Column>
</t:Table>

The table binds its aggregation rows to your array (path '/'). For each item in the array the template will be cloned and displayed. The template is a label that displays firstname and lastname separated by space: Two databindings with relative path (relative to the array item of the row).

For this to work, you need to enable the "complex databinding" feature in the bootstrap script tag: 

<script src="https://openui5.hana.ondemand.com/1.32.7/resources/sap-ui-core.js" 
    id="sap-ui-bootstrap" 
    data-sap-ui-theme="sap_bluecrystal" 
    data-sap-ui-libs="sap.m" 
    data-sap-ui-bindingSyntax="complex"></script>

You could also enable complex databinding by setting the required ui5 version to something up to date (or "edge" which is the newest available): data-sap-ui-compatVersion="edge"

sap.ui.core.mvc.Controller.extend("view1", {
  onInit:function(){
    var data = [
      {"FirstName":"James", "LastName":"Bond"},
      {"FirstName":"Robin", "LastName":"Hood"},
      {"FirstName":"Peter", "LastName":"Parker"}
      ];
    this.getView().setModel(new sap.ui.model.json.JSONModel(data));
    }
  });
var view = sap.ui.xmlview({viewContent: $("#view1").html()});
view.placeAt("content");
<script src="https://openui5.hana.ondemand.com/1.32.7/resources/sap-ui-core.js" 
        id="sap-ui-bootstrap" 
        data-sap-ui-theme="sap_bluecrystal" 
        data-sap-ui-libs="sap.m" 
        data-sap-ui-bindingSyntax="complex"></script>
<script type="sapui5/xmlview" id="view1">
  <mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:t="sap.ui.table" controllerName="view1">
    <t:Table rows="{/}">
      <t:Column>
        <Label text="Full Name"/>
        <t:template>
          <Label text="{FirstName} {LastName}"/>
        </t:template>
      </t:Column>
    </t:Table>
  </mvc:View>
</script>
<div id="content"></div>

Upvotes: 1

Related Questions