1

私は初心者で、剣道ウィンドウに Json をきれいに印刷する方法を見つけようとしています。使用している機能は次のとおりです。

function DisplayRequestSample(eventRequestSample) {
    var kendoWindow = $("<div />").kendoWindow({
        title: "Event Request Sample",
        resizable: false,
        modal: true,
        animation: false,
        width: 700,
        height: 600
    });
    kendoWindow.data("kendoWindow")
        .content(JSON.stringify(JSON.parse(eventRequestSample),null,4))
        .center().open();       
}

現在の出力:

{ "TrackingID": "89449f04-86b8-4e48-ad1d-52fde970261d", "RequestorID": "Web", "EventType": "Blah", "Environment": "TEST", "ProfileID": 0 }

しかし、適切なスペースと改行/インデントをどのように配置できますか。

JSON.stringify は Json をインデントしていません。正しく使用しているかどうかはわかりません。ご検討いただきありがとうございます。

4

1 に答える 1

1

問題は、JSON を aDIVおよびDIVs で出力し、スペース、タブ、改行を削除することですPRE。

kendoWindow.data("kendoWindow")
    .content("<pre>" +
             JSON.stringify(JSON.parse(eventRequestSample),null,4)
             "</pre>")
    .center().open();

2 番目のオプションは、CSS を使用して同じフォーマットを取得することDIVです。使用する必要がstyle='white-space: pre-wrap;'あり、ウィンドウの初期化は次のようになります。

var kendoWindow = $("<div style='white-space: pre-wrap;  '/>").kendoWindow({

2 番目のアプローチを示すコード スニペット:

function DisplayRequestSample(eventRequestSample) {
  var kendoWindow = $("<div style='white-space: pre-wrap;'/>").kendoWindow({
    title: "Event Request Sample",
    resizable: false,
    modal: true,
    animation: false,
    width: 300,
    height: 200
  });
  kendoWindow.data("kendoWindow")
  .content(JSON.stringify(JSON.parse(eventRequestSample),null,4))
  .center().open(); 
}

DisplayRequestSample('{ "TrackingID": "89449f04-86b8-4e48-ad1d-52fde970261d", "RequestorID": "Web", "EventType": "Blah", "Environment": "TEST", "ProfileID": 0 }');
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>

于 2015-03-20T05:57:10.187 に答える