javascript - 在 HTML 中显示格式化的 JSON(大对象)

Question

我尝试在 HTML 页面中显示格式化的 JSON，但在处理较大的对象(对象数组)时遇到一些问题。

当前，当我收到服务器的响应时，我正在使用 JSON.stringify(data) 显示 JSON 对象。我的 PHP 使用 json_encode($response) 将结果作为数组返回，并且我正在显示结果。

正如您从下面的示例响应中看到的，当涉及较小的对象时，它会正确显示。

如果服务器的结果更大，我仍然会收到结果(使用 console.log(data) 转储到控制台，但是当 $('#apiResult').append(JSON.stringify(data, undefined, 2)); 被执行，需要很长时间或者大多数情况下浏览器会挂起。

我想我的问题是是否有更有效的方法来做到这一点，或者我做错了什么？

我想在浏览器中显示它的原因是因为我正在为本地应用程序创建一个 API 测试工具。

感谢您提前提供的帮助。

示例响应:

{
  "posted_data": {
    "anything sent": "",
    "etc...": ""
  },
  "server_datetime": "2019-10-19 19:05:36",
  "ip_address": "7.28.185.248",
  "cookies": []
}

Javascript

function executeAPI() {
  var method = $('[name=apiMethod]').val();
  var sendData = {};
  if(method == 'post' || method == 'put') {
    sendData = $('[name=apiBody]').val();
  }
  $.ajax({
    type: $('[name=apiMethod]').val(),
    url: apiObj.baseURL + $('[name=apiPath]').val(),
    data: sendData,
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    cache: false,
    crossDomain: true,
    beforeSend: function(){
      $('#apiResult').removeClass('text-primary text-danger').html('Request sent, waiting for response...');
      $('#btnApiRequest').prop('disabled', true).text('Please wait...');
    }
  })
  .done(function(data,responseText,jqXHR) {
    $('#apiResult').empty();
    $('#apiStatus').html('<b>Status:&nbsp;<span class="text-success">'+jqXHR.status+' - '+jqXHR.statusText+'</span></b>');    
    if(typeof data === 'object' && data !== null) {
      $('#apiResult').append(JSON.stringify(data, undefined, 2));
    } else {
      $('#apiResult').html(data);
    }
  })
  .fail(function(jqXHR,textStatus,errorThrown) {
    $('#apiStatus').html('<b>Status:&nbsp;<span class="text-danger">'+jqXHR.status+' - '+jqXHR.statusText+'</span></b>');
    if(jqXHR.responseJSON === undefined) {
      $('#apiResult').html('...');
    } else {
      $('#apiResult').html(jqXHR.responseJSON);
    }
  })
  .always(function() {
    $('#btnApiRequest').removeAttr('disabled').html('Send Request&nbsp;<i class="fa fa-send"></i>');
  });
}

Answer 1

如果您只需要在客户端显示数据(并且不需要操作它)，则根本不应该解析它。将其视为纯文本:

$.ajax({
  // ...
  dataType: "text", // replace "json" with "text"
  // ...
}).done(function(data,responseText,jqXHR) {
  // ...
  $('#apiResult').append(data);
  // ...
})

如果你想缩进，服务器端可以使用 json_encode($response, JSON_PRETTY_PRINT); ，但正如 @Bravo 提到的，这会让 react 更大。

On a side note, if the response is so big that it makes the browser hang, the issue might not be the one you posted, but the way you designed your API. Do the results contain large Arrays? If so, you might want to consider result pagination.