JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでオブジェクト配列を出力する方法

JavaScriptでオブジェクト配列を表示・出力するには、JSON.stringify()メソッドを使用します。このメソッドはオブジェクトや配列をJSON形式の文字列に変換してくれるため、そのままHTMLに出力したり、コンソールで確認したりするのに便利です。

JSON.stringify()の基本

JSON.stringify()は以下のように引数を指定できます。

  • 第1引数： 変換したいオブジェクトや配列
  • 第2引数： 置換関数またはフィルタ用の配列（通常はnull）
  • 第3引数： インデントに使用するスペースの数（整形して見やすく出力できる）

サンプルコード

次のコードを実行すると、オブジェクト配列が整形されて画面に表示されます。

<!DOCTYPE html>
<html>
   <body>
      <pre id="test"></pre>
      <script>
         var data = [{
            date: new Date(2017, 11, 25),
            value: 10
         }, {
            date: new Date(2017, 11, 30),
            value: 20
         }];
         document.getElementById('test').innerHTML = JSON.stringify(data, null, 4);
      </script>
   </body>
</html>

実行結果

第3引数に「4」を指定しているため、インデント付きの読みやすい形式で出力されます。

[
    {
        "date": "2017-12-24T18:30:00.000Z",
        "value": 10
    },
    {
        "date": "2017-12-29T18:30:00.000Z",
        "value": 20
    }
]

ポイント

日付オブジェクト（Date）はJSON文字列に変換される際、ISO 8601形式（UTC基準）の文字列に自動的に変換されます。そのため、ローカル時刻で作成した日付でも、出力結果では時差が反映された値になる点に注意してください。また、単純にコンソールで確認したい場合は、console.log(data)やconsole.table(data)を使うと、より直感的に内容を把握できます。

  1. JavaScriptでDateオブジェクトを作成する方法をわかりやすく解説

    JavaScriptで日付や時刻を扱うには、Dateオブジェクトを使用します。new Date()コンストラクタを呼び出すだけで、現在の日時に基づいたDateオブジェクトを簡単に生成できます。以下に、ボタンをクリックすると現在の日時を持つDateオブジェクトを作成し、画面に表示するサンプルコードを示します。コード例<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport"

  2. JavaScriptで日付値をフォーマットする方法をわかりやすく解説

    JavaScriptでは、toLocaleDateString()メソッドを使うことで、Dateオブジェクトが持つ日付の値を読みやすい形式にフォーマットできます。この記事では、実際のコード例を使いながら、日付値を整形して表示する方法を紹介します。 サンプルコード 以下は、JavaScriptで日付値をフォーマットするためのコード例です。 function changeDateFormat(dateValues, addToFront = ) {     return typeof dateValues == object ? addToFront + d