Error binding JSON model to list control - SAPUI5

[woormsen78]

Hi community,

in the context of a PoC I have to implement the following requirement in SAPUI5: Fetching data from a REST API with appkey for authorization and displaying the data.

• As the REST API call requires further parameters, I added text boxes for entering the parameters.
• Via button click the REST API call is triggered..
• As I'm using only 1 view, I defined the JSON models in "Controller.js". One JSON model for handling the parameter data and one JSON model for handling the REST API response data. Both models are initialized in the "OnInit" event.
• Databinding is used.

I retrieve data from the REST API that I currently check via MessageToast.show(). This part works. Problem is that the list control is not populated with data. For testing reasons I added dummy data to the JSON model for the response data in the "OnInit" event. Even this data is not displayed.

"OnInit". 2 items added to list control, but no data underneath.

"OnPress". Items dynamically updated, but no data underneath.

This is my "Controller.js":

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

	var PageController = Controller.extend("gdlap.com.NYTimesReviewSample1.controller.Main", {

		onInit: function () {
			//JSON ReqData
			var reqData = {
				Title: "Lebowski",
				// cut for SAP forum
				AppKey: "Y7..."
			};
			// Create a JSON model to prefill request data
			var oReqModel = new sap.ui.model.json.JSONModel(reqData);
			this.getView().setModel(oReqModel, "oReqModel");


			var respData = {
				results: [{
					title: "Movie 1",
					byline: "byline 1"
				}, {
					title: "Movie 2",
					byline: "byline 2"
				}]
			};
			// Create a JSON model to prefill respone data for testing
			var oRespModel = new sap.ui.model.json.JSONModel(respData);
			this.getView().setModel(oRespModel, "oRespModel");
		},

		onPress: function (evt) {
			this._loadReview(evt.getSource().data("Title"), evt.getSource().data("AppKey"));
		},

		_loadReview: function (title, appKey) {
			var oView = this.getView();
			var oParams = {
				"query": title,
				"api-key": appKey
			};
			var sUrl = "/NYTimesAPI";
			oView.setBusy(true);
			var self = this;

			$.get(sUrl, oParams)
				.done(function (results) {
					oView.setBusy(false);
					self._mapResults(results);
				})
				.fail(function (err) {
					oView.setBusy(false);
						if (err !== undefined) {
						var oErrResponse = $.parseJSON(err.responseText);
						MessageToast.show(oErrResponse.message, {
							duration: 6000
						});
					} else {
						MessageToast.show("Unkown Error");
					}
				});
		},

		_mapResults: function (results) {
			var oRespModel = this.getView().getModel("oRespModel");
			var aReviewResults = [];
			for (var i = 0; i < results.results.length; i++) {
				MessageToast.show(results.results[i].byline);

				aReviewResults.push({
					title: results.results[i].display_title,
					byline: results.results[i].byline
				});
				oRespModel.setProperty("/results", aReviewResults);
			}
		}
	});
	return PageController;
});

This is my "View.xml":

<mvc:View 
xmlns:l="sap.ui.layout" 
xmlns:core="sap.ui.core" 
xmlns:mvc="sap.ui.core.mvc" 
xmlns="sap.m"
xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1" controllerName="gdlap.com.NYTimesReviewSample1.controller.Main">
<Shell id="shell">
	<App id="app">
	<pages>
	<Page id="page" title="MoveReview Demo">
		<content>
			<Input value="{oReqModel>/Title}" id="Title" tooltip="Title"/>
			<Input value="{oReqModel>/AppKey}" id="AppKey" blocked="true"/>
			<Button text="Check Review" id="button1" app:Title="{oReqModel>/Title}" app:AppKey="{oReqModel>/AppKey}" press="onPress"/>
			<List id="NYTimesReview" items="{oRespModel>/results/}" headerText="Results" noDataText="Reviews" showNoData="true">
				<items>
				<StandardListItem title="{oRespModel>/title}" description="{oRespModel>/byline}"></StandardListItem>
				</items>
			</List>
		</content>
	</Page>
	</pages>
	</App>
</Shell>
</mvc:View>

For completeness an example of my JSON response data.

Thx. upfront for taking a look on it. Cheers, Thomas

[sergei-u-niq · Accepted solution]

Hi Thomas,

first of all, make sure your view (and binding) works with the sample JSON response you put manually into the response model. Quick check: the list should be bound similarly to this:

<List items="{oRespModel>/results}">
   <StandardListItem title="{oRespModel>title}" description="{oRespModel>byline}" />
</List>

Note that the binding inside the list item has no leading slash.

When that works, automate the loading. The core of the loading business can be done in one line:

// assuming "this" is the controller
this.getView().getModel("oRespModel").loadData("/your/url?including=all&request=parameters"); 

after that, the list will automatically rebind to new data.

Hope, this helps,

Sergei

[woormsen78]

Hi Sergei,

thx for your review and answer. The leading slash was the problem. Now issue solved and everything works fine. Saved my monday on sunday :).

Cheers, Thomas