在 TextArea 中使用 vkbeautify 漂亮打印的结果

Question

您好，我有以下 TextArea 来显示 JSON 字符串：

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

我的问题是 JSON 字符串格式不正确，请参阅 example。

我正在使用库 vkbeautify，如下所示：

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);

很遗憾，它不起作用。 JSON 内容与示例中的内容完全相同。这里有什么问题？

我的网络内容中有 vkbeautify.js 文件，我将其包含在索引中。

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

因为我没有收到 vkbeautify 方法的错误信息，所以我认为我以正确的方式包含了它。如果您知道任何其他方法来格式化 JSON 任何其他库或想法的内容，欢迎提出建议。谢谢。

Answer 1

您使用了错误的变量（顺便说一句：JSON.stringify 是多余的，因为您已经有一个 JSON 字符串）：

var beautifiedObj = vkbeautify.json(myObj);

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

您的示例中从未使用过该模型，因此您可以删除它或将其用作 UI5 的预期目标并将控件直接绑定到模型属性。

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

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

Answer 2

查看 vkbeautify 的源代码，如果您只是为此目的使用该库，那将毫无意义 - 您可以使用标准 JavaScript:

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

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

在此处查看 MDN 上 JSON.stringify 的文档 - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

vkbeautify 的 REF 源 - https://github.com/vkiryukhin/vkBeautify/blob/master/vkbeautify.js#L152。

在 TextArea 中使用 vkbeautify 漂亮打印的结果

Use result of vkbeautify pretty print in TextArea

javascript

xml

textarea

sapui5

pretty-print