Convert an Object's Values to Comma-Separated String in JS

Convert an Object's Values to Comma-Separated String #

To convert an object's values to a comma-separated string, use the Object.values() method to get an array of the object's values and concatenate them into a comma-separated string using the join() method, e.g. Object.values(obj).join(',').

Copied!
const obj = {
  country: 'Chile',
  city: 'Santiago',
  code: 1234,
};

const str = Object.values(obj).join(',');
console.log(str); // 👉️ "Chile,Santiago,1234"

We used the Object.values method to get an array of the object's values.

Copied!
const obj = {
  country: 'Chile',
  city: 'Santiago',
  code: 1234,
};

// 👇️ ['Chile', 'Santiago', 1234]
console.log(Object.values(obj));

The last step is to use the Array.join method to join the array into a string based on a provided separator.

We need a comma-separated string, so we passed a comma to the join method.

Copied!
console.log(['a', 'b', 'c'].join(',')); // 👉️ "a,b,c"
console.log(['a', 'b', 'c'].join(', ')); // 👉️ "a, b, c"

If you use this approach with an empty object, you would get an empty string back.

Copied!
console.log(Object.values({}).join(',')); // 👉️ ""

This is because the Object.values method returns an empty array when provided an empty object.

Copied!
console.log(Object.values({})); // 👉️ []

If called on an array with a length of 0, the join() method returns an empty string.

Copied!
console.log([].join(',')); // 👉️ ""

If the object contains null, undefined or empty array [] values, the join() method converts them to an empty string.

Copied!
const obj = {
  country: undefined,
  city: null,
  code: 1234,
};

// 👇️ [undefined, null, 1234]
console.log(Object.values(obj));

const str = Object.values(obj).join(',');
console.log(str); // 👉️ ",,1234"

The values of the country and city properties are undefined and null, so they got converted to empty strings, but we still get a comma-separator between them.

If you need to handle this scenario, you can use the filter() method to filter out the falsy values before joining the truthy values into a string.

Copied!
const obj = {
  country: undefined,
  city: null,
  code: 1234,
  key: 'test',
};

// 👇️ "1234,test"
console.log(Object.values(obj).filter(Boolean).join(','));

We used the Boolean object to convert each element in the array to a boolean.

The Boolean object converts all falsy values to false and all truthy values to true.

The falsy values in JavaScript are: false, null, undefined, 0, "" (empty string), NaN (not a number).

All other values get converted to true, meaning if the string contains at least 1 character, the Boolean object will convert it to true and it will get added to the array that the filter method returns.

This prevents us from joining empty string elements and having multiple separators next to one another.

Further Reading #

• Convert a Boolean value to Yes/No in JavaScript
• Convert an Array of Objects to Array of Values in JS