How to read JSON data from a file using Ajax ?

Hello All,

 

This blog Describes how to load Data from a Local JSON file  with an AJAX request and render A VIZ chart using that Data.

 

for more information about VIZ charts UI5 CVOM HTML5 Charts – sap.viz.ui5 , Table – SAPUI5 Demo Kit

 

Development Tools required  for this can be downloaded from SAP Development Tools for Eclipse

 

 

Create A project can be of any type (sap.ui.commons or sap.m)

 

• create a sap.ui.commons project with an initial view blog (JSON view)
• create a folder for the JSON file as show below
• add sap.viz library in your index.html

 

 

 

 

Open the blog view and copy paste the below lines of code.

 

 

createContent : function(oController) {

 

//Data set Creation

 

  var dataset = new sap.viz.ui5.data.FlattenedDataset({

 

 

             dimensions : [ {

               axis : 1,

               name : ‘Products’,

               value : “{Product}”

             } ],

 

 

             measures : [

 

                          {

               name : ‘Litre’,

               value : ‘{Sale}’

             }

 

             ],

 

 

             data : {

               path : “/d/Products”

             }

 

 

           });

 

 

           var column2 = new sap.viz.ui5.Column({

             id : “column2”,

             width : “490px”,

             height : “292px”,

             plotArea : {

              ‘colorPalette’ : [‘#B22400’]

             },

             title : {

               visible : true,

               text : ‘Daily Production’

             },

             dataset : dataset

           });

 

       // JSON Model Creation   

 

       var AuModel = new sap.ui.model.json.JSONModel();

 

 

          // AJAX call

 

          var url =”/blog_VIZ/jsonFiles/dailyProductin.json”;

 

     $.ajax({

 

               type   :  “GET”,

               url      :   url,

               contentType : “application/json”,

               dataType      : “json”,

                data            :  {},

                     success: function(data){

                        AuModel.setData(data);

                          },

                      error:function(jqXHR,textStatus,errorThrown){

                        alert(“hi”+textStatus.toString());

                              }

              });

     

            column2.setModel(AuModel);

           return column2;

  }

 

 

 

 

Data in JSON File :

 

 

{

  “d”:

  {

    “Products”: [

          {

           “Product”:”Milk”,

           “Sale”:”70″

           },

           {

           “Product”:”Water”,

           “Sale”:”64″

           },

           {

           “Product”:”Coke”,

           “Sale”:”55″

           },

            {

           “Product”:”Sprite”,

           “Sale”:”30″

           },

           {

           “Product”:”BP”,

           “Sale”:”45″

           },

           {

           “Product”:”King fisher”,

           “Sale”:”59″

           }

            ]

         }

}

 

 

 

we are now ready to run & see the result , Right click on your index.html & click on  Run —–> Web App Preview and open the url in chrome Browser (prefered)

 

Here we go 🙂 🙂 🙂 🙂 🙂

 

 

 

 

 

 

 

 

Cheers

Pandu