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

我正在尝试在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>

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

控制器没有任何代码。

这给了我一个关于JSON数据的错误。但是，当我删除数字前面的零时，JSON是有效的

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

此外，您的联系人视图格式不正确。我添加了一些修改。items绑定有它不需要的引号

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

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

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

这给了我一个关于JSON数据的错误。但是，当我删除数字前面的零时，JSON是有效的

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

此外，您的联系人视图格式不正确。我添加了一些修改。items绑定有它不需要的引号

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

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

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

---

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

电话号码由数字字符组成，但并不打算用作实际号码。你不能有效地将它们相加，相乘，或者用一个典型的数字做任何其他事情

---

Express您的电话号码是字符串，JavaScript中以零开头的数字文本是八进制（以8为基数），但JSON号码不能以零开头

电话号码由数字字符组成，但并不打算用作实际号码。你不能有效地将它们相加，相乘，或者用一个典型的数字做任何其他事情

---

Express您的电话号码是字符串

以下是工作示例

查看

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

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中，键最好不要有空格，它也可以使用空格。
下面是一个工作示例

查看

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

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中，键最好不要有空格，它也可以使用空格