How to show generated JSON Data in your UI?

[former_member505127]

Hi Folks,

Lets talk about JSON today.

JSON is a stand-alone JavaScript Object, and it has replaced XML as object representation by choice due to it's simplicity. ... JavaScript makes it very smooth and easy to use, and due to the simplicity that presents - the parsing of JSON is easier to implement and therefore less prone to errors than a XML implementation.

Almost all us use JSON data in our application. We stringify and parse the data according to our requirement but how to display the json in our UI5 view will be explained in this blog.

 

Before I explain much, please look at the image below which will clear about what will this blog explain.



 

To display JSON payload in the view (UI5) there is a control called CodeEditor. This control can display data not only for JSON but for jade, java, javascript, django, css, and much more. In the property type we need to just mention in which format we want to display the data. For example

<CodeEditor value="{<BindModelHere>}" type="json/django/css" height="200px" />

It is necessary to mention either height or maxLines property .
For more info : SAPUI5 Demokit - CodeEditor

Code in XML :

<code:CodeEditor value="{<BindModel>}"  type="json" editable="false" maxLines="300"/>

 

Controller code :

jsonDisp : function(oContext){

   var oModelContext = new JSONModel();

   var contextStringify = JSON.stringify(oContext);

   var contextJSON = {"contextKey":contextStringify};

   oModelContext.setData(contextJSON);

   this.getView().setModel(oModelContext, "oModelContext");

   this.getView().bindElement("oModel2");

}

 

This will display the data but not in a formatted manner. 

 

To format the data, while stringifying json in controller we need to give more parameters.
The updated controller code :

jsonDisp : function(oContext){

   var oModelContext = new JSONModel();

   var contextStringify = JSON.stringify(oContext, null, "\t");

   var contextJSON = {"contextKey":contextStringify};

   oModelContext.setData(contextJSON);

   that.getView().setModel(oModelContext, "oModelContext");

   that.getView().bindElement("oModel2>/0/");

}

JSON.stringify() offers additional customization capabilities through the use of optional parameters. The syntax is:
jsonString = JSON.stringify(value [, replacer [, space]]);

value The JavaScript object to convert into a JSON string.

replacer A function that alters the behavior of the stringification process, or an array of String and Number objects that serve as a whitelist for selecting the properties of the value object to be included in the JSON string. If this value is null or not provided, all properties of the object are included in the resulting JSON string.

space A String or Number object that's used to insert white space into the output JSON string for readability purposes. If this is a Number, it indicates the number of space characters to use as white space; this number is capped at 10 if it's larger than that. Values less than 1 indicate that no space should be used. If this is a String, the string (or the first 10 characters of the string, if it's longer than that) is used as white space. If this parameter is not provided (or is null), no white space is used.

Hope this helps you.
Thanks,
Pooja