Skip to Content

I am trying to update data in my json model with the help of input provided in my view

Sep 28, 2017 at 06:30 AM


avatar image
I am trying to update data in my json model with the help of input provided in my view but i am unable to do so, i want to know is it even possible to do so and if yes kindly provide me with the solution

I am trying to load my json model in two different methods in a view but the model is getting loaded in one place and in other place its showing me undefined and data is not present in it when i debug it
var oModel in onSubmit() is undefined and also push has some problem

I want to perform an update operation on my json data and it should get updated in the json model when i press the save button 
this is my controller
], function(Controller) {
	"use strict";

	return Controller.extend("workeLibrary.controller.Details", {
		onInit: function() {
			// 	var oModel = new sap.ui.model.json.JSONModel("workeLibrary.model", "/books.json"));
			// this.getView().setModel(oModel);
			var oModel = new sap.ui.model.json.JSONModel("model/books.json");
			this.getView().setModel(oModel, "oModelBookdata");

			// var oModel = new sap.ui.model.json.JSONModel("model/books.json");

			this.getOwnerComponent().getRouter().getRoute("Details").attachPatternMatched(this._onRouteMatched, this);
		onAfterRendering: function() {

		_onRouteMatched: function(oEvent) {
			var oArgs, oView;
			oArgs = oEvent.getParameter("arguments").productId;
			oView = this.getView();
			var xyz = this.getView().getModel();
				path: "/Books/" + oArgs,
				model: "oModelBookdata"
		onSubmit: function() {
			var Subm = this.getView().byId("Subm").getText();
			var oModel = new sap.ui.model.json.JSONModel("model/books.json");
			this.getView().setModel(oModel, "oModeldata");
			var eBooks = oModel.getProperty("/Books");
			var eName = this.getView().byId("name").getValue();
			var eAuth = this.getView().byId("auth").getValue();
			var eSeri = this.getView().byId("seri").getValue();
			var eSequ = this.getView().byId("sequ").getValue();
			var eGenr = this.getView().byId("genr").getValue();
			var eInst = this.getView().byId("instk").getValue();
			var eCat = this.getView().byId("cat").getValue();
			var ePric = this.getView().byId("pric").getValue();
			var ePage = this.getView().byId("page").getValue();

			if (Subm === "Save") {

				var objBook = {

					"cat": "",

					"name": "",

					"author": "",

					"series_t": "",

					"sequence_i": "",

					"genre_s": "",

					"inStock": "",

					"price": "",

					"pages_i": ""

				}; = eCat; = eName; = eAuth;

				objBook.series_t = eSeri;

				objBook.sequence_i = eSequ;

				objBook.genre_s = eGenr;

				objBook.inStock = eInst;

				objBook.price = ePric;

				objBook.pages_i = ePage;


				oModel.setProperty("/Books", eBooks);
			} else if (Subm === "Edit") {



		// _on]RouteMatched: function(oEvent) {
		// 	var productId = oEvent.getParameter("arguments").productId;
		// 	this.getView().bindElement("/products/"+productId);
		// },
		handleNavButtonPress: function() {

and this is my view

<mvc:View controllerName="workeLibrary.controller.Details" xmlns:html="" xmlns:f="sap.ui.layout.form"
	xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
			<Page showNavButton="true" navButtonPress="handleNavButtonPress">
					<f:SimpleForm title="Registration Form" editable="true" layout="ResponsiveGridLayout" labelSpanL="3" labelSpanM="3" emptySpanL="4"
							<Label text="Book ID"/>
							<Input id="id" value="{oModelBookdata>id}" editable="false"/>
							<!--<Text text="{oModelBookdata>id}"/>-->
							<Label text="Book Name"/>
							<!--<Text text="{oModelBookdata>name}"/>-->
							<Input id="name" value="{oModelBookdata>name}" editable="false"/>
							<Label text="Book Series"/>
							<!--<Text text="{oModelBookdata>name}"/>-->
							<Input id="seri" value="{oModelBookdata>series_t}" editable="false"/>
							<Label text="Book Genre"/>
							<!--<Text text="{oModelBookdata>name}"/>-->
							<Input id="genr" value="{oModelBookdata>genre_s}" editable="false"/>
							<Label text="Book Category"/>
							<!--<Text text="{oModelBookdata>cat}"/>-->
							<Input id="cat" value="{oModelBookdata>cat}" editable="false"/>
							<Label text="Book Author"/>
							<!--<Text text="{oModelBookdata>author}"/>-->
							<Input id="auth" value="{oModelBookdata>author}" editable="false"/>
							<Label text="Book Sequence"/>
							<!--<Text text="{oModelBookdata>sequence_i}"/>-->
							<Input id="sequ" value="{oModelBookdata>sequence_i}" editable="false"/>
							<Label text="In Stock"/>
							<!--<Text text="{oModelBookdata>inStock}"/>-->
							<Input id="instk" value="{oModelBookdata>inStock}" editable="false"/>
							<Label text="Book Price"/>
							<!--<Text text="{oModelBookdata>price}"/>-->
							<Input id="pric" value="{oModelBookdata>price}" editable="false"/>
							<Label text="Pages"/>
							<!--<Text text="{oModelBookdata>pages_i}"/>-->
							<Input id="page" value="{oModelBookdata>pages_i}" editable="false"/>
							<Button id="Subm" text="Edit" type="Emphasized" press="onSubmit"/>
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Rahul Gupta Oct 04, 2017 at 06:25 AM


Definitely it is possible to update JSON model based on the input provided in the view.

In onInit method of the controller, you have already set the model on view using:

this.getView().setModel(oModel, "oModelBookdata");

Now in Submit method, you can fetch this model as:

var oModel = this.getView().getModel("oModelBookdata");

and use setProperty method to update the model data:

oModel.setProperty("/<PROPERTY_NAME>", <PROPERTY_VALUE>);
Show 1 Share
10 |10000 characters needed characters left characters exceeded

the data is getting updated when i see it in debugger but it is not getting reflected in my json model