Skip to Content
avatar image
Former Member

How to Fetch data present in the JSON File and display it in the List form

Hi,

    I want to fetch the data present in the json file and display it in the list form in the view.Please help me with this.

The json file(choice.json)  i am using have the following data:

{

    "components":

     [

        {

            "FirstName": "Jack",

            "LastName": "Son"

        },

        {

            "FirstName": "John",

            "LastName": "Mathew"

        },

        {

            "FirstName": "Brett",

            "LastName": "Lee"

        }

     ]

}

and my project structure looks like this

Thanks and Regards,

Lahari

pro.JPG (22.6 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Best Answer
    Jan 13, 2015 at 07:15 PM

    Hello Lahari,

    1. In the onInit function of mobile.controller.js, create, load, and set the model:

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

    2. In the createContent function of mobile.view.js, create a sap.m.List with items bound to the JSON data:

    createContent : function(oController) {
      return new sap.m.Page({
        title: "Title",
        content: [
          new sap.m.List({
            items : {
              path : "/components",
              template : new sap.m.StandardListItem({
                title : "{FirstName}"
              })
            }
          })
        ]
      });
    }
    

    3. Save the changes and run the project as a Web App Preview.

    4. Review the code to understand how it works.

    One approach which initially appears time consuming, but is often a good investment, is to code the project by hand (code versus copying and pasting), then like Kai suggested, consulting the API and Developer Guide Documentation as you encounter code and concepts with which you are not yet familiar.

    Regards,

    Scott

    Add comment
    10|10000 characters needed characters exceeded

    • Hi Lahari,

      Retrieving multiple properties can refer to binding data to different List Item properties (e.g. description), concatenating data into a property, and so forth. In the case of the factory function approach, you can bind another list item property to a different JSON property:

                       title: oContext.getProperty("FirstName") ,
                       description: oContext.getProperty("LastName")
      
      
      

      You can concatenate a combination of JSON properties and strings into a single list item property:

      title: oContext.getProperty("FirstName") + " " + oContext.getProperty("LastName")
      
      
      

      XML Views have their own syntax, approach, and eloquence.

      Regardless of the exact intent, I highly recommend regularly consulting the SAPUI5 Documentation.

      For detailed questions, the API Documentation includes everything you need to know about a control (and more), in your case, the properties of the sap.m.StandardListItem.

      For browsing controls and concepts, Explorer and Demo Apps are a great source of inspiration.

      The Developer Guide is a wealth of information and best practices, which are often best understood after first applying worst practices 😀

      Regards,

      Scott

  • Jan 13, 2015 at 10:41 AM

    Walk through the basics and learn them:

    Starting here: SAPUI5 SDK - Demo Kit

    after that explore this space.

    Add comment
    10|10000 characters needed characters exceeded

  • Jan 13, 2015 at 05:06 PM

    HI Lanari

    Would it just new sap.ui.model.json.JSONModel('/data/choice.json')?

    Thanks

    -D

    Add comment
    10|10000 characters needed characters exceeded