javascript - 本地 .json 文件中的数据未显示

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>

联系人.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>

联系人列表.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"
  }

Controller 没有任何代码。

Answer 1

这个JSON Validator下面部分的 JSON 数据出现错误。不过，当我删除数字前面的零时，JSON 是有效的。

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

此外，您的“联系人” View 格式也不正确。我添加了一些修改。项目绑定(bind)包含不需要的引号。

<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>

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

    "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"
        }
    },