Concatenate data contained in a JSONModel - sapui5

Question

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>

Answer 1

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>