Data Not Visible in Second View - sapui5

Question

I am facing one issue with data not being visible in my project.
I have created two views: Input.view.xml and plant.view.xml. In my first view, I have a button as "Material Details" and on clicking that, it moves to second view. However, it is coming blank.
My JSON file is having all the data but it's not coming in second view.
Can you please suggest what is the issue and how to fix it?
"Input View" (First View)
<mvc:View
controllerName="stock.controller.main"
xmlns:l="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc"
xmlns:viz="sap.viz.ui5.controls"
xmlns="sap.m">
<App id="app">
<l:VerticalLayout
class="sapUiContentPadding"
width="100%"
height="100%">
<Label
text="Product"
labelFor="productInput" />
<Input id="productInput"
placeholder="Enter Material ..."
showSuggestion="true"
showTableSuggestionValueHelp="false"
suggestionRows="{/ProductCollection}"
suggestionItemSelected="onSelectItem">
<suggestionColumns>
<Column
hAlign="Begin"
popinDisplay="Inline"
demandPopin="true">
<Label text="Name"/>
</Column>
</suggestionColumns>
<suggestionRows>
<ColumnListItem>
<Label id="inputKey" text="{ProductId} {Name}"/>
</ColumnListItem>
</suggestionRows>
</Input>
<Button id="onDisplay"
text="{i18n>materialDetails}"
press="onDisplayPlant"
class="sapUiTinyMarginEnd" />
</l:VerticalLayout>
</App>
</mvc:View>
plant.view.xml (Second View)
<mvc:View
controllerName="stock.controller.plant"
xmlns="sap.m"
xmlns:viz="sap.viz.ui5.controls"
xmlns:l="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc">
<MessagePage
showNavButton="true"
navButtonPress="onNavBack"/>
<Table id="idProductsTable"
inset="false"
items="{
path: '/ProductCollection',
sorter: {
path: 'Name'
}
}">
<headerToolbar>
<Toolbar>
<Title text="Products" level="H2" />
</Toolbar>
</headerToolbar>
<columns>
<Column width="12em">
<Text text="Product" />
</Column>
<Column
minScreenWidth="Tablet"
demandPopin="true">
<Text text="Supplier" />
</Column>
<Column
minScreenWidth="Tablet"
demandPopin="true"
hAlign="End">
<Text text="Dimensions" />
</Column>
<Column
minScreenWidth="Tablet"
demandPopin="true"
hAlign="Center">
<Text text="Weight" />
</Column>
<Column hAlign="End">
<Text text="Price" />
</Column>
</columns>
<items>
<ColumnListItem>
<ObjectIdentifier
title="{Name}"
text="{ProductId}"/>
<Text text="{SupplierName}" />
<Text text="{Width} x {Depth} x {Height} {DimUnit}" />
<ObjectNumber
number="{WeightMeasure}"
unit="{WeightUnit}"
state="{
parts: [
{path: 'WeightMeasure'},
{path: 'WeightUnit'}
],
formatter: 'stock.Formatter.weightState'
}" />
<ObjectNumber
number="{
parts: [{
path: 'Price'
}, {
path: 'CurrencyCode'
}],
type: 'sap.ui.model.type.Currency',
formatOptions: {
showMeasure: false
}
}"
unit="{CurrencyCode}" />
</ColumnListItem>
</items>
</Table>
</MessagePage>
</mvc:View>
plant.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"jquery.sap.global",
"stock/Formatter",
"sap/ui/core/routing/History",
"sap/ui/model/json/JSONModel"
], function (Controller, jQuery, Formatter, History,JSONModel) {
"use strict";
var TableController = Controller.extend("stock.controller.plant", {
onInit: function () {
var oModel = new JSONModel(jQuery.sap.getModulePath("sap.ui.demo.mock", "/products.json"));
this.getView().setModel(oModel);
},
getRouter : function () {
return sap.ui.core.UIComponent.getRouterFor(this);
},
onNavBack: function () {
var oHistory = History.getInstance();
var sPreviousHash = oHistory.getPreviousHash();
if (sPreviousHash !== undefined) {
window.history.go(-1);
} else {
this.getRouter().navTo("input", {}, true);
}
}
});
return TableController;
});
Component.js
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/core/mvc/XMLView",
"sap/ui/model/json/JSONModel"
], function(UIComponent, JSONModel, XMLView) {
"use strict";
var Component = UIComponent.extend("stock.Component", {
metadata: {
manifest: "json",
getTable: function () {
return this._rootView.getContent()[0];
}
},
publicMethods: [
"getTable"
],
dependencies: {
libs: [
"sap.m",
"sap.ui.layout"
]
},
rootView: "stock.view.input",
config: {
sample: {
files: [
"view.input.view.xml",
"controller.main.controller.js",
"Formatter.js"
],
description : "In this example assisted input is provided with table-like suggestions where several columns can display more details."
}
},
init : function () {
UIComponent.prototype.init.apply(this, arguments);
this.getRouter().initialize();
}
});
Component.prototype.createContent = function () {
this._rootView = sap.ui.xmlview({ viewName : "stock.view.plant" });
return this._rootView;
};
return Component;
});