Пытаюсь сделать простое приложение контактов в 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"
}
У контроллеров нет кода.
Этот Валидатор JSON дает мне ошибку для данных 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"
}
},
Числовые литералы в JavaScript, которые начинаются с нуля, являются восьмеричными (с основанием 8), но числа 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>
Контоллер
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
предпочтительно, чтобы в ключе не было пробела, он также будет работать с пробелом.