web-dev-qa-db-ja.com

配列オブジェクトの内容を示すconsole.log

console.logを使用してみたので、複数のオブジェクトを含む配列のコンテンツを確認できます。ただし、console.logはオブジェクトなどではないというエラーが表示されます。jquery1.6.2を使用していますが、配列は次のようになります。

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

console.log(filters);

私がやりたいことは、array(filters)の内容をフィルター形式で警告ボックスに書き出すことです（これがconsole.logがしたと思ったことです）。それ、どうやったら出来るの？

javascriptarraysalert
40
ONYX

console.logはメッセージボックスを生成しません。 firebugまたはそれに相当するものを追加せずにIE（Firefoxでも）のどのバージョンでも利用できるとは思わない。

ただし、SafariおよびChromeでは使用できます。 Chromeに言及しているので、この例で使用します。

ウィンドウとそれに対応する開発者ウィンドウを開く必要があります。これを行うには、ページ上の任意の要素を右クリックし、「要素を検査」を選択します。ウィンドウは2つの部分に分割され、開発者の部分が下部になります。 2つの部分の区分にはボタンのあるバーがあり、右端のボタンには「コンソール」というラベルが付いています。コンソールタブに切り替えるには、それをクリックする必要があります。残念ながら、クロムのキーボードでそこに到達する方法がわかりません。 （Mac OS XのSafariでは、command + shift + Iです）

そこに到達すると、そのコンソールからjavascriptを使用して上部に読み込まれているページとやり取りできるようになり、console.logというメッセージが表示されます。

7
Kris

配列を文字列としてダンプするには、2つの簡単な解決策が考えられます。使用している環境に応じて：

…最新のブラウザではJSONを使用します。

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

…node.jsのようなものでconsole.info（）を使用できます

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

編集：

JSON.stringifyには、さらに2つのオプションのパラメーターが付属しています。 3番目の「スペース」パラメーターは、きれいな印刷を可能にします。

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

例：

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

consoleオブジェクトはInternet Explorer 8以降で使用できますが、F12を押すかメニューからDeveloper Toolsウィンドウを開いた場合のみです。

IEを閉じるまで、[開発ツール]ウィンドウを再度閉じても使用可能です。

少なくとも現在のバージョンでは、ChormeとOperaには常にconsoleがあります。 Firefoxには、Firebugを使用するときにconsoleがありますが、Firebugを使用しない場合もあります。

いずれにせよ、console出力の使用をオプションにするのは保存アプローチです。その方法の例を次に示します。

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

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

Javascriptでオブジェクトをコンソールに出力するのは簡単です。次の構文を使用するだけです。

console.log( object );

または

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

比較的未知の方法は、オブジェクトまたは配列をテーブルとしてコンソールに出力することです。

console.table（object）;

この種のロギングステートメントは、ブラウザ環境内でのみ機能すると言うことが重要だと思います。これをGoogle Chromeで使用しました。開発者コンソール内でconsole.log呼び出しの出力を見ることができます。Webページの任意の要素を右クリックして開き、「検査」を選択します。 「コンソール」タブを選択します。

4
Torsten Barthel

クライアントのブラウザで誤って残されたコードが失敗しないように、このスニペットをお勧めします。

/* 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) {};
}

空の関数を定義するのではなく、このスニペットは必要に応じて独自のコンソールサロゲートをローリングするための良い出発点でもあります。

Firefox + firebugを使用する場合、console.dir()が配列出力のダンプに最適です こちらを参照 。

1
Frank Nocke

JsonはJavaScript Object Notationの略で、実際にはすべてのjsonはjavascriptオブジェクトなので、配列はすでにjson形式になっています。 divに書き出すには、私が思うに最も簡単なことの1つをたくさん行うことができます：

 objectDiv.innerHTML = filter;

objectDivは、jqueryを使用してDOMから選択するdivです。配列の一部をリストしたい場合は、次のようなjavascriptオブジェクトであるため、それらにアクセスできます。

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

編集：文字列になりたいが、現在ではない（まれなjavascriptがほとんどすべてを文字列として扱う）ものはすべて、組み込みのtoString()関数を使用します。必要な場合は上の行はfilter.dvals.valueToDisplay.toString();

明確にするための2番目の編集：この回答は、OPのコメントに対する応答であり、彼の元の質問に対する完全な回答ではありません。

1
Ryan

Firebugまたは使用しているデバッガーが適切に初期化されていないようです。 console.log（）-methodにアクセスしようとすると、Firebugは完全に初期化されますか？ Console-Tabを確認します（アクティブに設定されている場合）。

別の可能性として、コード内のどこでもconsole-Objectを自分で上書きすることができます。

1
Neq