Данные не отображаются из локального файла .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>

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

У контроллеров нет кода.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
518
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Этот Валидатор 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 предпочтительно, чтобы в ключе не было пробела, он также будет работать с пробелом.

Другие вопросы по теме