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

【问题标题】：Use result of vkbeautify pretty print in TextArea在 TextArea 中使用 vkbeautify 漂亮打印的结果
【发布时间】：2017-02-11 02:58:19
【问题描述】：

您好，我有以下 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 内容任何其他库或想法，欢迎提出建议。谢谢。

【问题讨论】：

标签： javascript xml textarea sapui5 pretty-print

【解决方案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)
});

【讨论】：

【解决方案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 的参考源 - https://github.com/vkiryukhin/vkBeautify/blob/master/vkbeautify.js#L152。

【讨论】：