Question

我正在尝试使用sapui5创建一个简单的联系人应用程序。我正在从本地存储在项目中的.json文件中获取数据，并尝试使数据显示在列表中。运行该应用程序时，该列表未显示任何数据，没有任何错误。请指导。谢谢。代码：

View1.view.xml

        <mvc:View controllerName="ContactsList.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
        displayBlock="true" xmlns="sap.m">
        <App class="myAppDemoWT">
        <pages>
             <Page title="{i18n>homePageTitle}">
                <content>
                   <mvc:XMLView viewName="ContactsList.view.Contacts"/>
                </content>
             </Page>
          </pages>
        </App>
    </mvc:View>

Contacts.view.xml

    <mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" 
        xmlns:html="http://www.w3.org/1999/xhtml">
        <List class="sapUiResponsiveMargin" width="auto" items="{'contact>/ContactList'}">
            <headerToolbar>
                <Toolbar>
                    <Title text="contact List"/>
                    <ToolbarSpacer></ToolbarSpacer>
                    <SearchField width="50%" search="onFilter"></SearchField>
                </Toolbar>
            </headerToolbar>
            <items>
                <ObjectListItem title="{contact>Name} " number="{contact>Phone No.}"></ObjectListItem>
            </items>
        </List>
    </mvc:View>

ContactList.json

        {
      "ContactList": [
        {
          "Name": "Swapnil Garg",
          "Phone No.": 1234
        },
        {
           "Name": "Ashutosh Garg",
          "Phone No.": 5678
        },
        {
           "Name": "Rajat Sharma",
          "Phone No.": 1987
        },
        {
          "Name": "Ankur Shukla",
          "Phone No.": 1342
        },
        {
           "Name": "Naman Kumar",
          "Phone No.": 1928
        }
      ]
    }

manifest.json：

    "models": {
        "i18n": {
            "type": "sap.ui.model.resource.ResourceModel",
            "settings": {
                "bundleName": "ContactsList.i18n.i18n"
            }
        },
         "contact": {
    "type": "sap.ui.model.json.JSONModel",
    "uri": "ContactList.json"
  }

控制器没有任何代码。

Answer 1

此JSON Validator在以下部分给我JSON数据错误。但是，当我删除数字前面的零时，JSON是有效的。

 {
    "Name": "Rajat Sharma",
    "Phone No.": 0987
 },

您的“联系人”视图也格式错误。我添加了一些修订。绑定的项目带有不需要的引号。

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml">
    <List class="sapUiResponsiveMargin" width="auto" items="{contact>/ContactList}">
        <headerToolbar>
            <Toolbar>
                <Title text="contact List"/>
                <ToolbarSpacer></ToolbarSpacer>
                <SearchField width="50%" search="onFilter"></SearchField>
            </Toolbar>
        </headerToolbar>
        <items>
            <ObjectListItem title="{contact>Name} " number="{contact>Phone No.}"></ObjectListItem>
        </items>
    </List>
</mvc:View>

您可以先在清单的数据源中定义它，但这是可选的。我将ContactList.json添加到“ webapp ”->“ 模型”文件夹中。像这样：

    "sap.app": {
    "id": "ContactList",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "applicationVersion": {
        "version": "1.0.0"
    },
    "dataSources": {
        "ContactList": {
            "uri": "model/ContactList.json",
            "type": "JSON"
        }
    },

之后，您可以像这样定义模型：

    "models": {
        "i18n": {
            "type": "sap.ui.model.resource.ResourceModel"
        },
        "contact": {
            "type": "sap.ui.model.json.JSONModel",
            "dataSource": "ContactList"
        }
    },

Answer 2

JavaScript中的数字文字以零开头，是八进制（以8为底），但是JSON数字不能以零开头。

电话号码由数字字符组成，但不能用作实际数字。您无法有效地将它们加在一起，相乘或用普通数字进行其他操作。

表示您的电话号码是字符串。

Answer 3

这是工作示例

查看

<List class="sapUiResponsiveMargin" width="auto" items="{contacts>/ContactList}">
   <headerToolbar>
       <Toolbar>
          <Title text="Contact List"/>
          <ToolbarSpacer></ToolbarSpacer>
          <SearchField width="50%" search="onFilter"></SearchField>
       </Toolbar>
   </headerToolbar>
   <items>
     <ObjectListItem title="{contacts>Name}" number="{contacts>PhoneNo}"></ObjectListItem>
   </items>
</List>

Contoller

onInit: function() {
  var oContacts = new sap.ui.model.json.JSONModel("assets/data/contacts.json");
  this.getView().setModel(oContacts, "contacts");
},

ContactList.json

{
  "ContactList": [
    { "Name": "Swapnil Garg", "PhoneNo": 1234 },
    { "Name": "Ashutosh Garg", "PhoneNo": 5678 },
    { "Name": "Rajat Sharma", "PhoneNo": 1987 },
    { "Name": "Ankur Shukla", "PhoneNo": 1342 },
    { "Name": "Naman Kumar", "PhoneNo": 1928 }
  ]
}

注意：在ContactList.json中，密钥最好不要有空格，它也可以与空格一起使用。

无法从本地.json文件显示数据

3 个答案: