I'm trying to find a way to "pretty print" a JavaScript data structure in a human-readable form for debugging.

I have a rather big and complicated data structure being stored in JS and I need to write some code to manipulate it. In order to work out what I'm doing and where I'm going wrong, what I really need is to be able to see the data structure in its entirety, and update it whenever I make changes through the UI.

All of this stuff I can handle myself, apart from finding a nice way to dump a JavaScript data structure to a human-readable string. JSON would do, but it really needs to be nicely formatted and indented. I'd usually use Firebug's excellent DOM dumping stuff for this, but I really need to be able to see the entire structure at once, which doesn't seem to be possible in Firebug.

推荐答案

我编写了一个函数,以可读的形式转储JS对象,虽然输出没有缩进,但要添加它应该不会太难:我从为Lua(更复杂)创建的函数中创建了这个函数,该函数处理了缩进问题.

以下是"简单"版本:

function DumpObject(obj)
{
  var od = new Object;
  var result = "";
  var len = 0;

  for (var property in obj)
  {
    var value = obj[property];
    if (typeof value == 'string')
      value = "'" + value + "'";
    else if (typeof value == 'object')
    {
      if (value instanceof Array)
      {
        value = "[ " + value + " ]";
      }
      else
      {
        var ood = DumpObject(value);
        value = "{ " + ood.dump + " }";
      }
    }
    result += "'" + property + "' : " + value + ", ";
    len++;
  }
  od.dump = result.replace(/, $/, "");
  od.len = len;

  return od;
}

I will look at improving it a bit.
Note 1: To use it, do od = DumpObject(something) and use od.dump. Convoluted because I wanted the len value too (number of items) for another purpose. It is trivial to make the function return only the string.
Note 2: it doesn't handle loops in references.

EDIT

I made the indented version.

function DumpObjectIndented(obj, indent)
{
  var result = "";
  if (indent == null) indent = "";

  for (var property in obj)
  {
    var value = obj[property];
    if (typeof value == 'string')
      value = "'" + value + "'";
    else if (typeof value == 'object')
    {
      if (value instanceof Array)
      {
        // Just let JS convert the Array to a string!
        value = "[ " + value + " ]";
      }
      else
      {
        // Recursive dump
        // (replace "  " by "\t" or something else if you prefer)
        var od = DumpObjectIndented(value, indent + "  ");
        // If you like { on the same line as the key
        //value = "{\n" + od + "\n" + indent + "}";
        // If you prefer { and } to be aligned
        value = "\n" + indent + "{\n" + od + "\n" + indent + "}";
      }
    }
    result += indent + "'" + property + "' : " + value + ",\n";
  }
  return result.replace(/,\n$/, "");
}

使用递归调用在行上 Select 缩进,并通过在这一行之后切换注释行来调整样式.

... I see you whipped up your own version, which is good. Visitors will have a choice.

Json相关问答推荐

当整个数组存储为字符串时,如何在Oracle中获取json数组的大小

使用jolt删除空对象

手动解开没有可编码的SON- Swift

在ConvertFrom-Json之后需要从PowerShell对象中获取数据

Jolt Spec 跳过数组中的第一个元素

使用不同行数的数据创建嵌套Jolt

使用 jq 从字符串列表开始创建对象

如何修复通过在 tsconfig.json 文件中添加allowImportingTsExtensions引发的错误 TS5023?

将=分隔值文件转换为:json文件

JOLT 获取带有动态键的数组

转义 Haskell 记录的字段

如果值不存在,则将值插入 JSON 数组

向 JSON 文件添加注释

无法向 Json 数组添加新元素

如何配置spring mvc 3在json响应中不返回null对象?

未捕获的类型错误:无法读取 null 的属性props

在 Http Header 中使用 Json 字符串

在 Django 1.9 中,使用 JSONField(本机 postgres jsonb)的约定是什么?

雅虎财经全币种报价 API 文档

Laravel 5 控制器将 JSON 整数作为字符串发送