代码之家 › 专栏 › 技术社区 › Swappy

无法从local.json文件显示数据

sapui5 json javascript

Swappy · 技术社区 · 7 年前

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

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

控制器没有任何代码。

3 回复 | 直到 7 年前

Matthijs Mennens 7 年前

这个 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 去 网络应用 '-->' 模型 '文件夹。这样地:

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

Quentin 7 年前

JavaScript中以零开头的数字文本是八进制(基8),但JSON数字不能从零开始。

电话号码是由数字字符组成的,但不打算用作实际号码。你不能把它们加在一起,相乘,或者用一个典型的数字做任何其他的事情。

快说你的电话号码是串 .

Inizio 7 年前

下面是一个工作示例

查看

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

控制器

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

联系人列表.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 最好钥匙不要有空间,也要有空间。