Use result of vkbeautify pretty print in TextArea

Question

Hi I have the following TextArea to display a JSON string:

<TextArea id="payloadlabel" width="1000px" height='auto' rows='80' />.

My problem is that the JSON string is not well formatted, see example.

I'm using the library vkbeautify as follows:

var myObj = { 
    "urn.getxxxx": {
         "urn.xxxx" : "cxxxxx-44e9-xxxx-a91b-0000xxxx\\xxxxx\\3xx\\xx\\x\\",
         "urn.xxxx" : "xxxxx",
         "urn.xxxxx" : "x",
         "urn.xxxx": "20xx-07-08xxx:03:41+02:00"
    }
};

var request = JSON.stringify(myObj);
vkbeautify.json(request);
var tryModel = new sap.ui.model.json.JSONModel();
tryModel.setData(request);


var payloadtxta =  sap.ui.getCore().byId(view.createId('payloadlabel'));
payloadtxta.setModel(tryModel);
payloadtxta.setValue(request);

Unfortunately it's not working. The JSON content remains exactly like in the example. What is wrong here?

I have the vkbeautify.js file in my web content and I included it in the index.

<script type="text/javascript" src="vkbeautify.js"></script>

As I get no error for the vkbeautify method I think I included it in the right way. Suggestions are welcomed if you know any other method to format JSON content any other library or idea. Thank you.

matbtt · Accepted Answer · 2016-10-04T07:23:53.940

You are using the wrong variable (BTW: JSON.stringify is superfluous as you already have a JSON string):

var beautifiedObj = vkbeautify.json(myObj);

var payloadtxta = this.byId(view.createId("payloadlabel"));
payloadtxta.setValue(beautifiedObj);

The model is never used in your example, thus you can remove it or use it as intendend by UI5 and bind the control directly to the model property.

<TextArea id="payloadlabel" value={/request}" width="1000px" height='auto' rows='80' />.

this.setModel(new sap.ui.model.json.JSONModel({ 
   "request" : vkbeautify.json(myObj)
});

score 0 · Answer 2 · answered Oct 04 '16 at 00:00

Looking at the source of vkbeautify, it is slightly pointless if you are just using that library for this purpose - you can do what you need with standard JavaScript:

var beautifiedTxt = JSON.stringify(myObj, null, 4);

var payloadtxta =  sap.ui.getCore().byId(view.createId("payloadlabel"));
payloadtxta.setValue(beautifiedTxt);

Check out the documentation of JSON.stringify on MDN here - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

REF source for vkbeautify - https://github.com/vkiryukhin/vkBeautify/blob/master/vkbeautify.js#L152.

Use result of vkbeautify pretty print in TextArea

2 Answers2