javascript - 我们如何使用 OPENUI5/SAPUI5 消费 JSON 数据？-6ren

javascript - 我们如何使用 OPENUI5/SAPUI5 消费 JSON 数据？

转载作者：行者123 更新时间：2023-11-30 12:42:59

25

4

我是 SAPUI5/OPENUI5 的新手。我正在尝试一个示例程序来使用域中的 json 数据并将其显示在我的 openui5 表中。我尝试了两种方法来获取数据并将其绑定(bind)到表控件。但是我无法使用 json 数据生成表。请让我知道我在代码中的错误。也请给我一些链接，以更好地理解这个概念。

提前致谢。

请找到以下两种方法:

JSON 数据:

[
  {
    "name": "Rajesh"
  },
  {
    "name": "Kunal Jauhari"
  },
  {
    "name": "Ashish Singh"
  },
  {
    "name": "Ansuman Parhi"
  },
  {
    "name": "Arup Kumar"
  },
  {
    "name": "Deepak Malviya"
  },
  {
    "name": "Seshu"
  },
  {
    "name": "Ankush Datey"
  },
  {
    "name": "Tapesh Syawaria"
  },
  {
    "name": "Mahesh"
  },
  {
    "name": "Vinay Joshi"
  },
  {
    "name": "Ardhendu Karna"
  },
  {
    "name": "Abhishek Shukla"
  },
  {
    "name": "Kashim"
  },
  {
    "name": "Vinayak"
  }
]

方法 1:我正在使用一个 php 文件来回显 JSON 数据并在我的 ui5 屏幕中使用它。当我单独访问运行 php 文件时，它会生成数据并将数据打印在屏幕上。

我收到的错误是未调用 getJSON。

代码:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>


        <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
                id="sap-ui-bootstrap"
                data-sap-ui-libs="sap.ui.commons,sap.ui.table"
                data-sap-ui-theme="sap_bluecrystal">
        </script>
        <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

        <script>
        var json_url = "http://mydomain/teamdetails_ui5.php?t=6";
            $.ajax({
                url : json_url,
                jsonpCallback : 'getJSON',  
                contentType : "application/json",
                dataType: 'jsonp',


                success: function(data,textStatus,jqXHR) {
                    oModel.setData({data: data});
                    sap.ui.getCore().setModel(oModel);

                    var oTable1 = new sap.ui.table.Table({  
                        title : "Players List",  
                        visibleRowCount : 3,  
                        selectionMode : sap.ui.table.SelectionMode.Single,  
                        navigationMode : sap.ui.table.NavigationMode.Paginator,  
                    });

                    //Define the columns and the control templates to be used    
                    oTable1.addColumn(new sap.ui.table.Column({  
                        label : new sap.ui.commons.Label({  
                        text : "Player Name"  
                    }),  
                    template : new sap.ui.commons.TextView().bindProperty(  
                    "text", "name"),  
                    width : "10px"  
                    }));

                    oTable1.setModel(oModel);  
                    oTable1.bindRows("/oModel");  
                    oTable1.placeAt('table_cont');  

                },
                error : function(jqXHR,textStatus,errorThrown) {
                    alert("Oh no, an error occurred");
                    alert(jqXHR);
                    alert(textStatus);
                    alert(errorThrown);             
                }
            });

        </script>

    </head>
    <body class="sapUiBody" role="application">
        <div id="table_cont"></div>
    </body>
</html>

方法 2:我尝试直接在我的域上访问 JSON 文件并访问数据。

代码同上，除了url。用于此方法的网址是 (mydomain/players.json)，其中 players.json 包含上述 json 数据。

请帮助我理解 JSON 数据处理的概念。

问候，拉詹

最佳答案

首先:SAPUI5 是基于 jQuery 构建的，是的。但是应该没有必要在 SAPUI5 应用程序中使用 jQuery。

使用 JSONModel 加载 JSON 数据。 JSONModel 也可以从 URL 加载数据。参见 Documentation

这看起来像:

// create a "json" Model
var oModel = new sap.ui.model.json.JSONModel();
// load data from URL
oModel.loadData('http://mydomain/teamdetails_ui5.php?t=6');

在此之后，您可以在 sap.ui.core 中注册此模型:

sap.ui.getCore().setModel(oModel);

在这一行之后，每个控件都可以通过简单的绑定(bind)语法使用来自该模型的数据。

现在让我们创建表:

// create your table
var oTable1 = new sap.ui.table.Table({  
   title : "Players List",  
   visibleRowCount : 3,  
   selectionMode : sap.ui.table.SelectionMode.Single,  
   navigationMode : sap.ui.table.NavigationMode.Paginator,
   // bind the core-model to this table by aggregating player-Array
   rows: '{/player}'
});

注意带有“rows: '{/player}'”的部分。这是从表中的模型获取数据唯一必须做的事情。

现在通过添加列并将表格添加到 DOM 来完成演示:

// define the columns and the control templates to be used    
oTable1.addColumn(new sap.ui.table.Column({  
   label : new sap.ui.commons.Label({  
      text : "Player Name"  
   }),  
   template : new sap.ui.commons.TextView({
      text: '{name}'
   }),
   width : "10px"  
}));

//place at DOM
oTable1.placeAt('content');

就是这样。如果它不起作用，这里是一个正在运行的 DEMO .

关于javascript - 我们如何使用 OPENUI5/SAPUI5 消费 JSON 数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23725199/

25

4

0

文章推荐： c# - 在 ASP.Net 中使用 JavaScript

文章推荐： c# - DbContext 内存溢出异常

文章推荐： Javascript:如何获取图像URL的宽度

excel - 消费/订阅类模块的自定义事件
我想使用我编写的类模块的事件。类模块如下所示 ''CError64Row Public Event ErrorClicked(ByVal row As Integer, ByVal column As
c# - 消费/包装大型网络服务的架构技巧
我正在寻找实现智能架构的良好实践，以及处理针对具有许多不同 wdsl web 服务的系统的集成的方法。我已经有 2 年的爱好使用 C# 进行开发了~，因此我并不总是使用正确的术语，但我会尝试描述我正
Azure 消费 API 非常慢
目前，我正在为我的程序使用 Azure Consumer API。但它非常慢，几乎需要8秒才能给出响应。我现在应该怎么做？这是我正在使用的 azure API.. https://management
Mule 消费 JMS 主题消息
我的流程是: AcitveMQ 控制台在主题部分下显示了一个使用者，但是一旦
rust - 消费 self 并返回它对性能有何影响？
我一直在阅读类似 Why does a function that accepts a Box complain of a value being moved when a function that
php - rabbitmq AMQP::消费()
AMQP 函数 consume() 是一个带有回调的阻塞函数，是否可以为 consume() 函数设置超时，以便在特定时间后不再阻塞并且代码执行完成？最佳答案是的，方法如下: $amqp = ne
PHP 消费 JSON 流
我有一个客户端/服务器应用程序，其中客户端以 JSON 形式将对象发送到运行 PHP 脚本的服务器，然后将此数据放入数据库。问题是解码是用 json_decode 函数完成的，它似乎适用于字符串而不
java - 生产者 - 消费；消费者如何停止？
所以我已经模拟了我的生产者消费者问题并且我有下面的代码。我的问题是:如果消费者一直处于 while(true) 状态，他如何停止。在下面的代码中，我添加了 i
C++ 消费 delphi DLL
我无法使用在delphi 中开发的dll 的功能。我在类型转换方面遇到了一些困难。这是我要调用 DLL 的函数: function rData(ID: Cardinal; queue: WideSt
unity3d - Unity 中的 Kafka 消费
我想使用 Unity3D 可视化 Kafka 流。在 Unity 中访问数据流的最佳方式是什么？我已经用 Node 和 C# 编写了基本使用者，但我不确定如何将它们合并到 Unity 中。任何帮助表
rss - 消费 Atom 提要 : how does it work?
如果标题太笼统，我很抱歉，但我已经浏览了一个小时的互联网，但找不到任何架构解释。我对 RSS 和 Atom 协议(protocol)都是全新的，据我到目前为止所了解的是: 服务器发布文档客户端订阅此
soap - 使用 Guzzle 消费 SOAP
我很喜欢我刚刚发现的 Guzzle 框架。我正在使用它使用不同的响应结构跨多个 API 聚合数据。它可以使用 JSON 和 XML 找到，但我需要使用的服务之一使用 SOAP。是否有使用 Guzzle
.net - Azure.管理.消费.模型
有没有一种方法可以像访问 Microsoft.Azure.Management.Fluent 一样访问 Azure.Management.Conclusion.Models？当我执行以下代码时，我看
javafx-2 - JavaFx、事件拦截/消费
我有这个部分场景图树: CustomPane (with onMouseClicked Handler) → ChildNode (with onMousePressed Handler) 当我在
javascript - Vue.js 消费 json
我的问题是这个 json。 http://dev-rexolution.pantheonsite.io/api/noticias 我只需要使用 vuejs 2 使用数组的第一个元素才能显示它，使用我工
machine-learning - 消费 CNTK 模型
我是 ML 新手，一直在研究 CNTK 教程。我已经成功训练了几个模型。我完成了迁移学习教程 ( https://github.com/Microsoft/CNTK/blob/v2.1/Tutori
java - 如何在RabbitMq上进行 "topic-like"消费？
我是 RabbitMq 和 AMQP 的新手，但我对 ActiveMQ 和 JMS 有一些经验。我尝试在主题(JMS 中的主题之类的主题)中发布一条消息，并从多个监听器中使用此消息。比如我发布一条消息
java - 在 Jersey 消费 OffsetDateTime
我正在尝试让我的服务器解析以下 JSON: {"hardwareId":1,"registerTime":"2017-02-14T03:42:11.482Z","sensorId":1,"temper
javascript - 使用 jQuery 消费 JSON
我正在开发一个从外部 url 使用 json 的网站，我试过了但是我得到了一个错误 XMLHttpRequest 无法加载 http://reuniyo.com/tst/json.php。 Acces
java - 延迟 Kafka Streams 消费
我正在尝试使用Kafka Streams(即不是简单的Kafka Consumer)从重试主题中读取之前无法处理的事件。我希望从重试主题中进行消费，如果处理仍然失败(例如，如果外部系统已关闭)，我希望

首页

博学

6Ren·AI

商城

javascript - 我们如何使用 OPENUI5/SAPUI5 消费 JSON 数据？