Skip to Content
0
Oct 11, 2020 at 02:24 PM

Error binding JSON model to list control - SAPUI5

60 Views Last edit Oct 11, 2020 at 02:41 PM 2 rev

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

Attachments

oninit.jpg (38.4 kB)
onpress.jpg (26.4 kB)
jsonresponse.jpg (89.1 kB)