如何显示JavaScript对象?

JavaScript

猴子Near

2020-03-09

如何像alert使用变量一样以字符串格式显示JavaScript对象的内容

我要显示对象的格式相同。

第247篇《如何显示JavaScript对象?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

9个回答
Sam梅 2020.03.09
var list = function(object) {
   for(var key in object) {
     console.log(key);
   }
}

where object is your object

or you can use this in chrome dev tools, "console" tab:

console.log(object);

Mandy伽罗 2020.03.09

Javascript Function

<script type="text/javascript">
    function print_r(theObj){ 
       if(theObj.constructor == Array || theObj.constructor == Object){ 
          document.write("<ul>") 
          for(var p in theObj){ 
             if(theObj[p].constructor == Array || theObj[p].constructor == Object){ 
                document.write("<li>["+p+"] => "+typeof(theObj)+"</li>"); 
                document.write("<ul>") 
                print_r(theObj[p]); 
                document.write("</ul>") 
             } else { 
                document.write("<li>["+p+"] => "+theObj[p]+"</li>"); 
             } 
          } 
          document.write("</ul>") 
       } 
    } 
</script>

Printing Object

<script type="text/javascript">
print_r(JAVACRIPT_ARRAY_OR_OBJECT);
</script> 

via print_r in Javascript

村村路易 2020.03.09

Another way of displaying objects within the console is with JSON.stringify. Checkout the below example:

var gandalf = {
  "real name": "Gandalf",
  "age (est)": 11000,
  "race": "Maia",
  "haveRetirementPlan": true,
  "aliases": [
    "Greyhame",
    "Stormcrow",
    "Mithrandir",
    "Gandalf the Grey",
    "Gandalf the White"
  ]
};
//to console log object, we cannot use console.log("Object gandalf: " + gandalf);
console.log("Object gandalf: ");
//this will show object gandalf ONLY in Google Chrome NOT in IE
console.log(gandalf);
//this will show object gandalf IN ALL BROWSERS!
console.log(JSON.stringify(gandalf));
//this will show object gandalf IN ALL BROWSERS! with beautiful indent
console.log(JSON.stringify(gandalf, null, 4));
LEYStafan 2020.03.09

As it was said before best and most simply way i found was

var getPrintObject=function(object)
{
    return JSON.stringify(object);
}
前端逆天 2020.03.09

Simply use

JSON.stringify(obj)

Example

var args_string = JSON.stringify(obj);
console.log(args_string);

Or

alert(args_string);

Also, note in javascript functions are considered as objects.

As an extra note :

Actually you can assign new property like this and access it console.log or display it in alert

foo.moo = "stackoverflow";
console.log(foo.moo);
alert(foo.moo);
猴子Harry 2020.03.09

try this :

console.log(JSON.stringify(obj))

This will print the stringify version of object. So instead of [object] as an output you will get the content of object.

老丝猪猪小卤蛋 2020.03.09

If you want to use alert, to print your object, you can do this:

alert("myObject is " + myObject.toSource());

It should print each property and its corresponding value in string format.

逆天GO 2020.03.09

console.dir(object)

显示指定JavaScript对象的属性的交互式列表。此清单使您可以使用显示三角形检查子对象的内容。

请注意,该console.dir()功能是非标准的。查看MDN网络文档

Harry乐Harry 2020.03.09

使用本机JSON.stringify方法。与嵌套对象一起使用,并且所有主流浏览器都支持此方法。

str = JSON.stringify(obj);
str = JSON.stringify(obj, null, 4); // (Optional) beautiful indented output.
console.log(str); // Logs output to dev tools console.
alert(str); // Displays output using window.alert()

链接到Mozilla API参考和其他示例。

obj = JSON.parse(str); // Reverses above operation (Just in case if needed.)

如果遇到此Javascript错误,请使用自定义JSON.stringify替换程序

"Uncaught TypeError: Converting circular structure to JSON"

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android