0

I am trying to make a simple app of contacts in sapui5. I am fetching data from the .json file which is locally stored in the project and trying to get the data to display in a list. When running the app, the list is showing no data without any errors. Please guide. Thanks. Code :

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

Controllers don't have any code.

3 Answers 3

2

This JSON Validator gives me an error for the JSON data at the following part. When I delete the zero in front of the number, the JSON is valid, though.

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

Also your Contacts view is malformed. I added some revisions. The items binding had quotes which it didn't need.

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

You can define it in the datasources in the manifest first, but this is optional. I added the ContactList.json to 'webapp' --> 'model' folder. Like this:

    "sap.app": {
    "id": "ContactList",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "applicationVersion": {
        "version": "1.0.0"
    },
    "dataSources": {
        "ContactList": {
            "uri": "model/ContactList.json",
            "type": "JSON"
        }
    },

After that, you can define the model like this:

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

Numbers literals in JavaScript, which begin with a zero, are octal (base 8) but JSON numbers cannot begin with a zero.

Phone numbers are made up of characters which are digits, but they aren't intended to be used as actual numbers. You can't usefully add them together, multiply them, or anything else that you would do with a typical number.

Express your phone numbers are strings.

0
0

Here is the working example

VIEW

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

Contoller

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

Note: In ContactList.json preferable the key should not have space, it will work with space as well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.