blocks|key|717556|text|您可以使用"{yourPropertyNameHere}“访问您的属性|type|unstyled|depth|inlineStyleRanges|entityRanges|data|717557|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You can access your properties by using "{yourPropertyNameHere}"

blocks|key|248164|text|简单的例子：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|248165|1.外部JSON文件(jsonfilename.json)|248166|{
++"first":"India",+
++"second":"Singapore",+
++"third":"Malaysia"
}|code-block|syntax|javascript|248167|2.在控制器中|248168|onInit:+function()+{+
++var+oModel+=+new+JSONModel();
++oModel.loadData("jsonfilename.json");+//+jsonfilename.json+is+in+root
++this.getView().setModel(oModel);
},|248169|3.在XML视图中|248170|<Text+text="{/first}"+/>
<Text+text="{/second}"+/>
<Text+text="{/third}"+/>|248171|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Simple example : 

<h2>1. External JSON File (jsonfilename.json)</h2>

<pre><code>{
 "first":"India", 
 "second":"Singapore", 
 "third":"Malaysia"
}
</code></pre>

<h2>2. In Controller</h2>

<pre><code>onInit: function() { 
 var oModel = new JSONModel();
 oModel.loadData("jsonfilename.json"); // jsonfilename.json is in root
 this.getView().setModel(oModel);
},
</code></pre>

<h2>3. In XML View</h2>

<pre><code>&lt;Text text="{/first}" /&gt;
&lt;Text text="{/second}" /&gt;
&lt;Text text="{/third}" /&gt;
</code></pre>

blocks|key|4028613|text|oMenuModel.attachRequestCompleted(function()+{
++++var+data+=+oMenuModel.getData();
++++console.log(data);
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4028614|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>oMenuModel.attachRequestCompleted(function() {
 var data = oMenuModel.getData();
 console.log(data);
});
</code></pre>

blocks|key|248176|text|Json文件：-+data.json|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|248177|{
"name":+[{
++++"fnm":+"abc",
++++"lnm":+"xyz",
++++"city":+"PQR"
}]
}|code-block|syntax|javascript|248178|Controller.js|248179|var+oModel+=+sap.ui.model.json.JSONModel("model/data.json");
this.getView().setModel(oModel);|248180|View.xml|248181|<Table+id+=+"idtbl"+items+="{/name}">
<columns>
++++<Column>
++++++++++<Text+text+=+"First+Name">
++++</Column>
++++++<Column>
++++++++++<Text+text+=+"Last+Name">
++++</Column>
+++++<Column>
++++++++++<Text+text+=+"City">
+++++</Column>
</columns>
<items>
++++<columnListItem>
+++++++++++<cells>
++++++++++++++++++<Text+text+=+"{fnm}"/>
++++++++++++++++++<Text+text+=+"{lnm}"/>
++++++++++++++++++<Text+text+=+"{city}"/>
+++++++++</cells>
++++</columnListItem>
+</items>
</Table>|248182|entityMap^0|0|I|0|0|0|D|0|0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|T|$]]

Json File:- data.json

<pre><code>{
"name": [{
 "fnm": "abc",
 "lnm": "xyz",
 "city": "PQR"
}]
}
</code></pre>

Controller.js

<pre><code>var oModel = sap.ui.model.json.JSONModel("model/data.json");
this.getView().setModel(oModel);
</code></pre>

View.xml

<pre><code>&lt;Table id = "idtbl" items ="{/name}"&gt;
&lt;columns&gt;
 &lt;Column&gt;
 &lt;Text text = "First Name"&gt;
 &lt;/Column&gt;
 &lt;Column&gt;
 &lt;Text text = "Last Name"&gt;
 &lt;/Column&gt;
 &lt;Column&gt;
 &lt;Text text = "City"&gt;
 &lt;/Column&gt;
&lt;/columns&gt;
&lt;items&gt;
 &lt;columnListItem&gt;
 &lt;cells&gt;
 &lt;Text text = "{fnm}"/&gt;
 &lt;Text text = "{lnm}"/&gt;
 &lt;Text text = "{city}"/&gt;
 &lt;/cells&gt;
 &lt;/columnListItem&gt;
 &lt;/items&gt;
&lt;/Table&gt;
</code></pre>

blocks|key|717593|text|如果您使用Odata服务，则必须按如下方式传递参数|type|unstyled|depth|inlineStyleRanges|entityRanges|data|717594|/things?$format=json|code-block|syntax|javascript|717595|如果您使用的是开放式rest+api，则必须按如下方式在标头中传递内容类型|717596|Content-type:+application/json|717597|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

If you are using Odata service then you have to pass parameter as follows

<pre><code>/things?$format=json
</code></pre>

if you are using open rest api then you have to pass content type in headers as follows

<pre><code>Content-type: application/json
</code></pre>

blocks|key|248279|text|编辑过的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|248280|这段代码应该可以帮助您将数据从控制器端传递到视图中：|248281|initThingsModel:function+()+{
++++//+create+JSONModel
++++var+oMenuModel+=+new+sap.ui.model.json.JSONModel();
++++//+loadData+returns+Promise
++++oMenuModel.loadData("http://localhost:8085/things");
++++//+set+data+to+JSONMode+and+your+view
++++this.getView().setModel(oMenuModel,+"dataModel");
}|code-block|syntax|javascript|248282|然后，您可以在XML视图中显示数据，如下所示：|248283|<Text+text="{dataModel>/property}"+/>|248284|另一个问题可能是，您的服务或后端是否支持oData协议？如果是，那么我建议使用sap.ui.model.odata.v2.ODataModel与后端进行通信。如果您的后端不支持oData，那么我建议您使用XMLHttpRequest对象创建后端请求，一旦您从后端检索到数据，您只需调用JSONModel的setData方法即可。|248285|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

EDITED

This piece of code should help you to pass data from controller side into view:

<pre><code>initThingsModel:function () {
 // create JSONModel
 var oMenuModel = new sap.ui.model.json.JSONModel();
 // loadData returns Promise
 oMenuModel.loadData("http://localhost:8085/things");
 // set data to JSONMode and your view
 this.getView().setModel(oMenuModel, "dataModel");
}
</code></pre>

Then you can display your data in XML view like following:

<pre><code>&lt;Text text="{dataModel&gt;/property}" /&gt;
</code></pre>

Another question could be, does your service or backend support oData protocol? If yes, then I would recommend to use sap.ui.model.odata.v2.ODataModel for a communication with backend. If your backend does not have oData support then I would recommend to create backend requests using XMLHttpRequest object and once you retrieve a data from a backend, you just call setData method of you JSONModel.

How can I display a JSON data using an url in SAPUI5.
I use SAPUI5 for frontend dev.

This is my controller function:

<pre><code>initThingsModel:function () {

 var oMenuModel = new sap.ui.model.json.JSONModel();

 oMenuModel.loadData("http://localhost:8085/things"); 

 sap.ui.getCore().setModel(oMenuModel);
}
</code></pre>

But I don't know how should my view.xml look.

SAPUI5 - GET request

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

如何在SAPUI5中使用url显示JSON数据。我使用SAPUI5进行前端开发。这是我的控制器函数：initThingsModel:function () {    var oMenuModel = new sap.ui.model.json.JSONModel();    oMenuModel.loadData("http://localhost:8085/things");     sap.u

问SAPUI5 - GET请求
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SAPUI5 - GET请求EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SAPUI5 - GET请求
EN