JavaScriptでJSON配列からすべてのcustomerNameの値を取得する方法

JSON配列の準備

例として、次のようなJSON配列を想定します。各要素には「customerDetails」という配列が含まれており、その中に顧客名（customerName）と国名（customerCountryName）が格納されています。

var details = [
    {
        "customerDetails": [
            {
                "customerName": "John Smith",
                "customerCountryName": "US"
            }
        ]
    },
    {
        "customerDetails": [
            {
                "customerName": "David Miller",
                "customerCountryName": "AUS"
            }
        ]
    },
    {
        "customerDetails": [
            {
                "customerName": "Bob Taylor",
                "customerCountryName": "UK"
            }
        ]
    }
]

map()メソッドでcustomerNameだけを抽出する

customerNameの値だけを取り出したい場合は、配列のmap()メソッドを使用します。map()は配列の各要素に対してコールバック関数を実行し、その戻り値から新しい配列を生成します。今回のデータはネストされた構造になっているため、obj.customerDetails[0].customerNameのようにアクセスするのがポイントです。

コード例

var details = [
    {
        "customerDetails": [
            {
                "customerName": "John Smith",
                "customerCountryName": "US"
            }
        ]
    },
    {
        "customerDetails": [
            {
                "customerName": "David Miller",
                "customerCountryName": "AUS"
            }
        ]
    },
    {
        "customerDetails": [
            {
                "customerName": "Bob Taylor",
                "customerCountryName": "UK"
            }
        ]
    }
]
var allCustomerName = details.map(obj =>
obj.customerDetails[0].customerName);
console.log(allCustomerName);

プログラムの実行方法

上記のプログラムを実行するには、Node.js環境で次のコマンドを使用します。ここでは、コードを「demo206.js」というファイル名で保存したものとします。

node demo206.js

実行結果

PS C:\Users\Amit\javascript-code> node demo206.js
[ 'John Smith', 'David Miller', 'Bob Taylor' ]

このように、map()メソッドを使えば、ネストされたJSON配列から特定のプロパティの値だけを簡潔に抽出できます。取得結果は配列として返されるため、その後のフィルタリングや画面表示などの処理にもそのまま活用できます。