console.log显示数组对象的内容

时间:2021-09-21 16:56:19

I have tried using console.log so I can see the content of my array that contains multiple objects. However I get an error saying console.log is not an object etc. Im using jquery 1.6.2 and my array is like this:

我尝试过使用console.log,这样我就可以看到包含多个对象的数组内容。但是我得到一个错误,说console.log不是一个对象等。我使用jquery 1.6.2,我的数组是这样的:

filters = {dvals:[{'brand':'1', 'count':'1'},
                  {'brand':'2', 'count':'2'}, 
                  {'brand':'3', 'count':'3'}]}

console.log(filters);

What I want to to do is write out the contents of the array(filters) to a alert box (thats what I thought console.log did) in the filters format. How do I do that?

我想要做的是将数组(过滤器)的内容写入过滤器格式的警报框(这就是我认为的console.log所做的)。我怎么做?

7 个解决方案

#1


7  

console.log does not produce any message box. I don't think it is available in any version of IE (nor Firefox) without the addition of firebug or some equivalent.

console.log不会生成任何消息框。如果没有添加firebug或类似的东西,我认为它不适用于任何版本的IE(也不是Firefox)。

It is however available in Safari and Chrome. Since you mention Chrome I'll use that for my example.

但是它可以在Safari和Chrome中使用。既然你提到Chrome我会用它作为我的例子。

You'll need to open your window and its developer window counterpart. you can do this by right clicking any element on the page and selecting "Inspect element". your window will be divided in two parts, the developer part being the bottom. in the division between the two parts is a bar with buttons and the rightmost button there is labeled "console". You'll need to click that to switch to the console tab. Unfortunately, I don't know how to get there by keyboard in chrome. (In Safari on Mac OS X it's command + shift + I)

您需要打开窗口及其开发人员窗口。您可以通过右键单击页面上的任何元素并选择“Inspect element”来完成此操作。您的窗口将分为两部分,开发人员部分是底部。在两个部分之间的划分是带按钮的条形图,最右边的按钮标有“控制台”。您需要单击它以切换到控制台选项卡。不幸的是,我不知道怎么用铬键盘到达那里。 (在Mac OS X上的Safari中,命令+ shift + I)

Once there, you will be able to interact with whatever page is loaded on top through javascript from that console, and any messages you console.log will be displayed there.

在那里,您将能够通过该控制台的javascript与顶部加载的任何页面进行交互,并且您将在那里显示您console.log的任何消息。

#2


44  

there are two potential simple solutions to dumping an array as string. Depending on the environment you're using:

将数组转换为字符串有两种可能的简单解决方案。根据您使用的环境:

…with modern browsers use JSON:

...使用现代浏览器使用JSON:

JSON.stringify(filters);
// returns this
"{"dvals":[{"brand":"1","count":"1"},{"brand":"2","count":"2"},{"brand":"3","count":"3"}]}"

…with something like node.js you can use console.info()

...像node.js这样你可以使用console.info()

console.info(filters);
// will output:
{ dvals: 
[ { brand: '1', count: '1' },
  { brand: '2', count: '2' },
  { brand: '3', count: '3' } ] }

Edit:

JSON.stringify comes with two more optional parameters. The third "spaces" parameter enables pretty printing:

JSON.stringify附带了两个可选参数。第三个“spaces”参数可以实现漂亮的打印:

JSON.stringify(
                obj,      // the object to stringify
                replacer, // a function or array transforming the result
                spaces    // prettyprint indentation spaces
              )

example:

JSON.stringify(filters, null, "  ");
// returns this
"{
 "dvals": [
  {
   "brand": "1",
   "count": "1"
  },
  {
   "brand": "2",
   "count": "2"
  },
  {
   "brand": "3",
   "count": "3"
  }
 ]
}"

#3


4  

The console object is available in Internet Explorer 8 or newer, but only if you open the Developer Tools window by pressing F12 or via the menu.

控制台对象在Internet Explorer 8或更高版本中可用,但仅当您通过按F12或通过菜单打开“开发人员工具”窗口时才可用。

It stays available even if you close the Developer Tools window again until you close your IE.

即使您关闭IE,直到再次关闭“开发人员工具”窗口,它仍然可用。

Chorme and Opera always have an available console, at least in the current versions. Firefox has a console when using Firebug, but it may also provide one without Firebug.

Chorme和Opera总是有一个可用的控制台,至少在当前版本中。 Firefox在使用Firebug时有一个控制台,但它也可以提供没有Firebug的控制台。

In any case it is a save approach to make the use of console output optional. Here are some examples on how to do that:

在任何情况下,它都是一种保存方法,可以使控制台输出可选。以下是有关如何执行此操作的一些示例:

if (console) {
    console.log('Hello World!');
}

if (console) console.debug('value of someVar: ' + someVar);

#4


1  

Seems like Firebug or whatever Debugger you are using, is not initialized properly. Are you sure Firebug is fully initialized when you try to access the console.log()-method? Check the Console-Tab (if it's set to activated).

看起来像Firebug或您正在使用的任何调试器,未正确初始化。当您尝试访问console.log() - 方法时,您确定Firebug已完全初始化吗?检查控制台选项卡(如果已设置为激活)。

Another possibility could be, that you overwrite the console-Object yourself anywhere in the code.

另一种可能是,你自己在代码中的任何地方覆盖console-Object。

#5


1  

Json stands for JavaScript Object Notation really all json is are javascript objects so your array is in json form already. To write it out in a div you could do a bunch of things one of the easiest I think would be:

Json代表JavaScript Object Notation,所有json都是javascript对象,所以你的数组已经是json形式。要在div中写出来,你可以做一些我认为最简单的事情:

 objectDiv.innerHTML = filter;

where objectDiv is the div you want selected from the DOM using jquery. If you wanted to list parts of the array out you could access them since it is a javascript object like so:

其中objectDiv是您想要使用jquery从DOM中选择的div。如果你想列出数组的部分,你可以访问它们,因为它是一个像这样的javascript对象:

 objectDiv.innerHTML = filter.dvals.valueToDisplay; //brand or count depending.

edit: anything you want to be a string but is not currently (which is rare javascript treats almost everything as a string) just use the toString() function built in. so line above if you needed it would be filter.dvals.valueToDisplay.toString();

编辑:你想成为一个字符串,但目前不是(这是罕见的javascript几乎所有的东西作为一个字符串)只使用内置的toString()函数。所以如果你需要它上面的行将是filter.dvals.valueToDisplay。的toString();

second edit to clarify: this answer is in response to the OP's comments and not completely to his original question.

第二次编辑澄清:这个答案是对OP的评论的回应而不完全是他原来的问题。

#6


1  

I warmly recommend this snippet to ensure, accidentally left code pieces don't fail on clients browsers:

我热烈推荐这个片段以确保在客户端浏览器上不小心留下的代码片段不会失败:

/* neutralize absence of firebug */
if ((typeof console) !== 'object' || (typeof console.info) !== 'function') {
    window.console = {};
    window.console.info = window.console.log = window.console.warn = function(msg) {};
    window.console.trace = window.console.error = window.console.assert = function(msg) {};
}

rather than defining an empty function, this snippet is also a good starting point for rolling your own console surrogate if needed, i.e. dumping those infos into a .debug Container, show alerts (could get plenty) or such...

而不是定义一个空函数,这个片段也是一个很好的起点,如果需要滚动你自己的控制台代理,即将这些信息转储到.debug容器,显示警报(可以获得充足)或等等......

If you do use firefox+firebug, console.dir() is best for dumping array output, see here.

如果您确实使用firefox + firebug,则console.dir()最适合转储数组输出,请参见此处。

#7


1  

It's simple to print an object to console in Javascript. Just use the following syntax:

在Javascript中将对象打印到控制台很简单。只需使用以下语法:

console.log( object );

or

console.log('object: %O', object);

A relatively unknown method is following which prints an object or array to the console as table:

下面是一个相对未知的方法,它将对象或数组作为表打印到控制台:

console.table( object );

console.table(object);

I think it is important to say that this kind of logging statement only works inside a browser environment. I used this with Google Chrome. You can watch the output of your console.log calls inside the Developer Console: Open it by right click on any element in the webpage and select 'Inspect'. Select tab 'Console'.

我认为重要的是要说这种日志语句只能在浏览器环境中运行。我在谷歌浏览器中使用过它。您可以在Developer Console中观察console.log调用的输出:右键单击网页中的任何元素并选择“Inspect”,打开它。选择标签'控制台'。

#1


7  

console.log does not produce any message box. I don't think it is available in any version of IE (nor Firefox) without the addition of firebug or some equivalent.

console.log不会生成任何消息框。如果没有添加firebug或类似的东西,我认为它不适用于任何版本的IE(也不是Firefox)。

It is however available in Safari and Chrome. Since you mention Chrome I'll use that for my example.

但是它可以在Safari和Chrome中使用。既然你提到Chrome我会用它作为我的例子。

You'll need to open your window and its developer window counterpart. you can do this by right clicking any element on the page and selecting "Inspect element". your window will be divided in two parts, the developer part being the bottom. in the division between the two parts is a bar with buttons and the rightmost button there is labeled "console". You'll need to click that to switch to the console tab. Unfortunately, I don't know how to get there by keyboard in chrome. (In Safari on Mac OS X it's command + shift + I)

您需要打开窗口及其开发人员窗口。您可以通过右键单击页面上的任何元素并选择“Inspect element”来完成此操作。您的窗口将分为两部分,开发人员部分是底部。在两个部分之间的划分是带按钮的条形图,最右边的按钮标有“控制台”。您需要单击它以切换到控制台选项卡。不幸的是,我不知道怎么用铬键盘到达那里。 (在Mac OS X上的Safari中,命令+ shift + I)

Once there, you will be able to interact with whatever page is loaded on top through javascript from that console, and any messages you console.log will be displayed there.

在那里,您将能够通过该控制台的javascript与顶部加载的任何页面进行交互,并且您将在那里显示您console.log的任何消息。

#2


44  

there are two potential simple solutions to dumping an array as string. Depending on the environment you're using:

将数组转换为字符串有两种可能的简单解决方案。根据您使用的环境:

…with modern browsers use JSON:

...使用现代浏览器使用JSON:

JSON.stringify(filters);
// returns this
"{"dvals":[{"brand":"1","count":"1"},{"brand":"2","count":"2"},{"brand":"3","count":"3"}]}"

…with something like node.js you can use console.info()

...像node.js这样你可以使用console.info()

console.info(filters);
// will output:
{ dvals: 
[ { brand: '1', count: '1' },
  { brand: '2', count: '2' },
  { brand: '3', count: '3' } ] }

Edit:

JSON.stringify comes with two more optional parameters. The third "spaces" parameter enables pretty printing:

JSON.stringify附带了两个可选参数。第三个“spaces”参数可以实现漂亮的打印:

JSON.stringify(
                obj,      // the object to stringify
                replacer, // a function or array transforming the result
                spaces    // prettyprint indentation spaces
              )

example:

JSON.stringify(filters, null, "  ");
// returns this
"{
 "dvals": [
  {
   "brand": "1",
   "count": "1"
  },
  {
   "brand": "2",
   "count": "2"
  },
  {
   "brand": "3",
   "count": "3"
  }
 ]
}"

#3


4  

The console object is available in Internet Explorer 8 or newer, but only if you open the Developer Tools window by pressing F12 or via the menu.

控制台对象在Internet Explorer 8或更高版本中可用,但仅当您通过按F12或通过菜单打开“开发人员工具”窗口时才可用。

It stays available even if you close the Developer Tools window again until you close your IE.

即使您关闭IE,直到再次关闭“开发人员工具”窗口,它仍然可用。

Chorme and Opera always have an available console, at least in the current versions. Firefox has a console when using Firebug, but it may also provide one without Firebug.

Chorme和Opera总是有一个可用的控制台,至少在当前版本中。 Firefox在使用Firebug时有一个控制台,但它也可以提供没有Firebug的控制台。

In any case it is a save approach to make the use of console output optional. Here are some examples on how to do that:

在任何情况下,它都是一种保存方法,可以使控制台输出可选。以下是有关如何执行此操作的一些示例:

if (console) {
    console.log('Hello World!');
}

if (console) console.debug('value of someVar: ' + someVar);

#4


1  

Seems like Firebug or whatever Debugger you are using, is not initialized properly. Are you sure Firebug is fully initialized when you try to access the console.log()-method? Check the Console-Tab (if it's set to activated).

看起来像Firebug或您正在使用的任何调试器,未正确初始化。当您尝试访问console.log() - 方法时,您确定Firebug已完全初始化吗?检查控制台选项卡(如果已设置为激活)。

Another possibility could be, that you overwrite the console-Object yourself anywhere in the code.

另一种可能是,你自己在代码中的任何地方覆盖console-Object。

#5


1  

Json stands for JavaScript Object Notation really all json is are javascript objects so your array is in json form already. To write it out in a div you could do a bunch of things one of the easiest I think would be:

Json代表JavaScript Object Notation,所有json都是javascript对象,所以你的数组已经是json形式。要在div中写出来,你可以做一些我认为最简单的事情:

 objectDiv.innerHTML = filter;

where objectDiv is the div you want selected from the DOM using jquery. If you wanted to list parts of the array out you could access them since it is a javascript object like so:

其中objectDiv是您想要使用jquery从DOM中选择的div。如果你想列出数组的部分,你可以访问它们,因为它是一个像这样的javascript对象:

 objectDiv.innerHTML = filter.dvals.valueToDisplay; //brand or count depending.

edit: anything you want to be a string but is not currently (which is rare javascript treats almost everything as a string) just use the toString() function built in. so line above if you needed it would be filter.dvals.valueToDisplay.toString();

编辑:你想成为一个字符串,但目前不是(这是罕见的javascript几乎所有的东西作为一个字符串)只使用内置的toString()函数。所以如果你需要它上面的行将是filter.dvals.valueToDisplay。的toString();

second edit to clarify: this answer is in response to the OP's comments and not completely to his original question.

第二次编辑澄清:这个答案是对OP的评论的回应而不完全是他原来的问题。

#6


1  

I warmly recommend this snippet to ensure, accidentally left code pieces don't fail on clients browsers:

我热烈推荐这个片段以确保在客户端浏览器上不小心留下的代码片段不会失败:

/* neutralize absence of firebug */
if ((typeof console) !== 'object' || (typeof console.info) !== 'function') {
    window.console = {};
    window.console.info = window.console.log = window.console.warn = function(msg) {};
    window.console.trace = window.console.error = window.console.assert = function(msg) {};
}

rather than defining an empty function, this snippet is also a good starting point for rolling your own console surrogate if needed, i.e. dumping those infos into a .debug Container, show alerts (could get plenty) or such...

而不是定义一个空函数,这个片段也是一个很好的起点,如果需要滚动你自己的控制台代理,即将这些信息转储到.debug容器,显示警报(可以获得充足)或等等......

If you do use firefox+firebug, console.dir() is best for dumping array output, see here.

如果您确实使用firefox + firebug,则console.dir()最适合转储数组输出,请参见此处。

#7


1  

It's simple to print an object to console in Javascript. Just use the following syntax:

在Javascript中将对象打印到控制台很简单。只需使用以下语法:

console.log( object );

or

console.log('object: %O', object);

A relatively unknown method is following which prints an object or array to the console as table:

下面是一个相对未知的方法,它将对象或数组作为表打印到控制台:

console.table( object );

console.table(object);

I think it is important to say that this kind of logging statement only works inside a browser environment. I used this with Google Chrome. You can watch the output of your console.log calls inside the Developer Console: Open it by right click on any element in the webpage and select 'Inspect'. Select tab 'Console'.

我认为重要的是要说这种日志语句只能在浏览器环境中运行。我在谷歌浏览器中使用过它。您可以在Developer Console中观察console.log调用的输出:右键单击网页中的任何元素并选择“Inspect”,打开它。选择标签'控制台'。