将Json对象显示为字符串而不是实际对象

时间:2019-05-30 20:00:28

标签: javascript jquery json

我有一个填充模态的函数。我希望模式显示数据中的字符串,而不是以字符串格式显示JSON对象或JSON obj。 ...但是它似乎正在显示文字Json对象...我不能使用toString方法,因为它似乎不存在。下面是我的代码。

模式:

<div class="modal fade" id="receiptModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Receipt</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">   
           <div id="receiptTxt">

           </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

JS:

  $(".viewReceipt").click(function (e) {

    var rowId = "#" + $(this).data("rowindex");
    var row = $(rowId);
    var transactionID = row.find(".transactionID").html().trim();

    var data = {
        receiptID: transactionID
    };

    console.log("data");
    console.log(data);

    $.ajax({
        url: '@Url.Action("ViewReceipt", "TerminalReceipts")',
        type: "POST",
        data: data,
        dataType: 'html',
        success: function (data) {
            console.log("Success");
            console.log(data)
            $("#receiptTxt").html(data);
            $("#receiptModal").modal('toggle');
        }
    });
});

您可以看到$("#receiptTxt").html(data);是问题所在。它从字面上显示数据obj。我不能做.html(data).toString()..还有什么其他选项?

@edit

根据要求,这是console.log(data)

的输出
{"data":"                  Company Name                   \r\n          2222 Ridgelake Dr           \r\n              Cape Coral, FL, 90726               \r\n                                                \r\n                                                \r\n\r\n              10/4/2018 7:21:13 AM              \r\n\r\number: ABC123                        TID: ABC123\r\nBatch #:                                       0\r\nAccount #:                      XXXXXXXXXXXX2222\r\nTrans #:                                     378\r\nAuth #:                                 00056693\r\nHost Date:                             10/4/2018\r\nHost Time:                              09:24:50\r\nSoftware Version:                        1.0.0.0\r\n\r\n              THIS IS A DEMO                   \r\nTotal:                                    $5.00\r\n                    APPROVED                    \r\n\r\n              THANK YOU VERY MUCH!              \r\n\r\n"}

2 个答案:

答案 0 :(得分:2)

JSON.stringify(data)

您可以将其存储在新变量中或通过以下方式进行设置:$("#receiptTxt").html(JSON.stringify(data));

您可以使用JSON.parse()将字符串转换回JSON对象。

希望这会有所帮助。 :)

答案 1 :(得分:-2)

这将为您提供格式良好的带有缩进的JSON字符串:

$("#receiptTxt").html(JSON.stringify(data, null, 2));

您需要将其插入<pre>元素而不是<div>中,以确保正确显示新行。