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

[Former Member]

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

[scott_stefanich · Accepted solution]

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

[Former Member · Accepted solution]

Hi Scott,

              Thank you for the reply, i used the code as you mentioned but it is displaying only the Title like this

its not displaying the data given in the json file.Should we not use binding here?

Please help

Thanks & Regards,

Lahari

[Former Member · Accepted solution]

Hi Scott,

               I have used following code in my program.

1. In the onInit function of mobile.controller.js,i have given like this

             onInit: function() {

                     var mChoice = new sap.ui.model.json.JSONModel("choice.json");

                     this.getView().setModel(mChoice, "choice");

                },

  2. In the createContent function of mobile.view.js,i have given like this

                createContent : function(oController) {

                 var that = this;

                 var oList = new sap.m.List(that.createId("listid"), {

                 mode: sap.m.ListMode.SingleSelectMaster

                  });

                  oList.bindAggregation("items",

                  {

                    path : "choice>/components",

                    factory : function(sId,oContext) {

                   var name = oContext.getProperty("FirstName");

                   var stdlist = new sap.m.StandardListItem({

                                title: name,

                               description:"ui5 is great"

                                });

                               return stdlist;

                    }

                 } );

              }

           });

Still i am not able to retrieve data from json file.

Thanks & Regards,

Lahari

[former_member182862 · Accepted solution]

hi Lahari

I believe

  new sap.ui.model.json.JSONModel("choice.json");

should be

new sap.ui.model.json.JSONModel("/data/choice.json");

[scott_stefanich · Accepted solution]

Hi Lahari,

It looks like you are using a factory function for custom list aggregation. You can try something like this,

Controller onInit function:

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

View createContent function:

createContent : function(oController) {


  var oList = new sap.m.List("listid", {
    mode: sap.m.ListMode.SingleSelectMaster
  });


  oList.bindAggregation(
    "items",
    "choice>/components",
    function(sId,oContext) {
      return new sap.m.StandardListItem({
        title: oContext.getProperty("FirstName") ,
        description:"ui5 is great"
      })
    }
  );

  return oList;
}

Regards,

Scott

[Former Member · Accepted solution]

Hi Dennis,

              Thanks for the reply,it should be new sap.ui.model.json.JSONModel("data/choice.json"); 

Regards,

Lahari

[Former Member · Accepted solution]

Hi Scott,

            Thanks a lot Scott now i am able to retrieve the FirstName. And if my requirement is to retrieve more than 4 properties of json file like FirstName,LastName,Company,Country.How to proceed with this?

My json file(choice.json) looks like this

{

    "components":

     [

        {

            "FirstName": "Jack",

            "LastName": "Son",

            "Company": "SAP",

            "Country": "Australia"

        },

        {

            "FirstName": "John",

            "LastName": "Mathew"

             "Company": "Infosys",

            "Country": "Japan"

        },

        {

            "FirstName": "Brett",

            "LastName": "Lee",

             "Company": "Accenture",

            "Country": "India"

        }

     ]

}

Thanks & Regards,

Lahari

[scott_stefanich · Accepted solution]

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

[former_member182862]

HI Lanari

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

Thanks

-D

[kai2015]

Walk through the basics and learn them:

Starting here: SAPUI5 SDK - Demo Kit

after that explore this space.