打印JSON解析对象?


200

我有一个使用JSON解析过的javascript对象,JSON.parse现在我想打印该对象,以便对其进行调试(该函数出了点问题)。当我执行以下操作时...

for (property in obj) {
    output += property + ': ' + obj[property]+'; ';
}
console.log(output);

我列出了多个[object Object]。我想知道如何打印此内容以查看内容?


5
作为旁注,for(obj中的属性)将列出所有属性,甚至包括继承的属性。因此,您将获得大量与Object.prototype和任何“母类”无关的组合。这对于json对象来说很不方便。您必须使用hasOwnProperty()对其进行过滤,以仅获取此对象拥有的属性。
BiAiB

Answers:


124

大多数调试器控制台都支持直接显示对象。只需使用

console.log(obj);

根据您的调试器,这很可能会将对象在控制台中显示为折叠的树。您可以打开树并检查对象。


122
值得一提的是,在chrome(可能还有其他浏览器)中,当与这样的字符串结合使用时:console.log("object: " + obj)它不显示对象,而是输出“ object:[Object obj]”。
Shahar

24
@Shahar console.log("object: %O", obj)(Chrome)或 console.log("object: %o", obj)(Firefox | Safari)可以让您访问对象的详细信息,请参阅下面的答案。
戴夫·安德森

1
@DaveAnderson在控制台中对对象进行格式化的好方法。
lekant

@Shahar谢谢,您的信息就是我需要的信息。应该添加到答案中。
Leo Flaherty

3
除@DaveAnderson的方法外,使用逗号将字符串与对象分开也可以:console.log("My object: ", obj)
Shahar

571

您知道JSON代表什么吗? JavaScript对象符号。它为对象提供了很好的格式。

JSON.stringify(obj) 将给您返回对象的字符串表示形式。


12
我很惊讶这个答案在底部……这应该是公认的答案:-)
Mingyu 2015年

1
如果您不希望使用字符串表示形式,而是想要在代码编辑器中显示的对象怎么办?
SuperUberDuper 2015年

5
@SuperUberDuper:...那么,您现在就不会尝试构建字符串表示形式了。:)
cHao 2015年

我相信SuperUberDuper正在询问是否可以在不将其转换为字符串的情况下记录或查看该对象。如果在浏览器中查看DOM需要一个元素,则可以将json字符串化,然后将元素内容innerHTML设置为该字符串以在页面上查看它。
jasonleonhard

例如:从'./data.json'导入Json; var el = document.createElement('div'); el.innerHTML = JSON.stringify(Json);
jasonleonhard

54

尝试console.dir()代替console.log()

console.dir(obj);

MDN表示console.dir()支持:

  • FF8 +
  • IE9 +
  • 歌剧
  • 苹果浏览器

1
在IE9 +仅适用
jasonscript

3
console.dir()还可以在FF8 +,Opera,Chrome和Safari中使用:developer.mozilla.org/en-US/docs/Web/API/console.dir
olibre 2013年

大!这对我来说是最好的解决方案。谢谢。
昂勒2015年

1
那Node js呢?
Xsmael

好,但不支持像log(“ string” + variable)这样的字符串连接
Nassim

47

如果您想要带缩进的漂亮多行JSON,则可以将JSON.stringify其第3个参数使用:

JSON.stringify(value[, replacer[, space]])

例如:

var obj = {a:1,b:2,c:{d:3, e:4}};

JSON.stringify(obj, null, "    ");

要么

JSON.stringify(obj, null, 4);

将为您提供以下结果:

"{
    "a": 1,
    "b": 2,
    "c": {
        "d": 3,
        "e": 4
    }
}"

在浏览器console.log(obj)中做得更好,但在Shell控制台(node.js)中则没有。



25

使用字符串格式;

console.log("%s %O", "My Object", obj);

Chrome具有以下格式说明符

  • %s 将值格式化为字符串。
  • %d%i将值格式化为整数。
  • %f 将值格式化为浮点值。
  • %o 将值格式化为可扩展的DOM元素(如Elements面板中所示)。
  • %O 将值格式化为可扩展的JavaScript对象。
  • %c 根据您提供的CSS样式格式化输出字符串。

Firefox也有String Substitions,它们具有相似的选项。

  • %o将超链接输出到JavaScript对象。单击链接将打开一个检查器。
  • %d%i输出一个整数。尚不支持格式化。
  • %s 输出一个字符串。
  • %f输出浮点值。尚不支持格式化。

Safari具有printf样式格式化程序

  • %d%i整数
  • %[0.N]f 浮点数,精度为N位数字
  • %o 目的
  • %s

1
好的参考答案
David

1
%O确实有帮助
埃弗顿

4

简单好看:

console.log("object: %O", obj)

1
您能否描述%O的作用?具体来说应该是O吗?-您的解决方案像魅力一样工作
Anthonius

O代表对象,因此只要可以将对象打印为字符串,就可以毫无问题地打印出来。这帮助我在不确定不确定错误
出处的

我忘了在这里通知,实际上我们不需要使用%O。我们可以直接使用console.log(“ object:”,obj)谢谢@mbenhalima
Anthonius

3

只需使用

console.info("CONSOLE LOG : ")
console.log(response);
console.info("CONSOLE DIR : ")
console.dir(response);

并且您将在chrome控制台中获得此信息:

CONSOLE LOG : 
facebookSDK_JS.html:56 Object {name: "Diego Matos", id: "10155988777540434"}
facebookSDK_JS.html:57 CONSOLE DIR : 
facebookSDK_JS.html:58 Objectid: "10155988777540434"name: "Diego Matos"__proto__: Object

2

简单的功能,用于警告对象或数组的内容。
用数组或字符串或对象来通知此内容,以调用此函数。

功能

function print_r(printthis, returnoutput) {
    var output = '';

    if($.isArray(printthis) || typeof(printthis) == 'object') {
        for(var i in printthis) {
            output += i + ' : ' + print_r(printthis[i], true) + '\n';
        }
    }else {
        output += printthis;
    }
    if(returnoutput && returnoutput == true) {
        return output;
    }else {
        alert(output);
    }
}

用法

var data = [1, 2, 3, 4];
print_r(data);

2

以下代码将在警报框中显示完整的json数据

var data= '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

json = JSON.parse(data);
window.alert(JSON.stringify(json));

2

如果要调试,为什么不使用控制台调试

window.console.debug(jsonObject);

0

如果您正在服务器上使用js进行工作,那么仅需进行一点点体操就可以了……这是我的ppos(服务器上漂亮打印):

ppos = (object, space = 2) => JSON.stringify(object, null, space).split('\n').forEach(s => console.log(s));

这在创建我在编写服务器代码时可以实际读取的内容方面起到了很大的作用。


0

我不知道它是如何从未正式制作过的,但是我jsonconsole对象添加了自己的方法,以便于打印带字符串的日志:

观察javascript中的对象(非原始对象)有点像量子力学。您“测量”的可能不是真实状态,它已经发生了变化。

console.json = console.json || function(argument){
    for(var arg=0; arg < arguments.length; ++arg)
        console.log(  JSON.stringify(arguments[arg], null, 4)  )
}

// use example
console.json(   [1,'a', null, {a:1}], {a:[1,2]}    )

很多时候需要查看一个对象的字符串化版本,因为按原样打印它(原始对象)将打印该对象的“实时”版本,该版本会随着程序的进行而变化,并且不会镜像该对象的状态。在记录的时间点,例如:

var foo = {a:1, b:[1,2,3]}

// lets peek under the hood
console.log(foo) 

// program keeps doing things which affect the observed object
foo.a = 2
foo.b = null
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.