JavaScript How to get all 'name' values in a JSON array?

In JavaScript, extracting specific values from a JSON array is a common task. When working with nested objects, you can use the map() method to iterate through the array and extract the desired properties.

Sample JSON Data

Let's consider the following JSON array with customer information:

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

console.log("Original data:", details);

Original data: [
  { customerDetails: [ { customerName: 'John Smith', customerCountryName: 'US' } ] },
  { customerDetails: [ { customerName: 'David Miller', customerCountryName: 'AUS' } ] },
  { customerDetails: [ { customerName: 'Bob Taylor', customerCountryName: 'UK' } ] }
]

Extracting Customer Names Using map()

To extract only the customer names from this nested structure, use the map() method to transform each object and access the nested customerName property:

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

var allCustomerNames = details.map(obj => obj.customerDetails[0].customerName);
console.log("Customer names:", allCustomerNames);

Customer names: [ 'John Smith', 'David Miller', 'Bob Taylor' ]

Alternative: Extracting Country Names

You can use the same approach to extract other properties like country names:

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

var customerCountries = details.map(obj => obj.customerDetails[0].customerCountryName);
console.log("Countries:", customerCountries);

Countries: [ 'US', 'AUS' ]

How It Works

The map() method creates a new array by:

• Iterating through each element of the original array
• Applying the provided function to each element
• Collecting the returned values into a new array

In our case, obj.customerDetails[0].customerName accesses the nested structure to extract the customer name from each object.

Conclusion

Using map() is an efficient way to extract specific values from JSON arrays. This method transforms data while preserving the original array structure, making it ideal for extracting properties from nested objects.