Convert string with separator to array of objects in JavaScript

In this article, we'll learn how to convert a string with separators into an array of objects using JavaScript's built-in methods. This is a common data transformation task when working with CSV-like data or user input.

Understanding the Problem

We need to transform a string like "name1,name2,name3" with separator "," into an array of objects:

[{value: "name1"}, {value: "name2"}, {value: "name3"}]

Each substring becomes an object with a value property containing the original string segment.

Algorithm

Step 1: Split the input string using the separator to create an array of substrings

Step 2: Use map() to transform each substring into an object with a value property

Step 3: Return the resulting array of objects

Basic Implementation

function convertStringToObjectArray(str, separator) {
    const splitStr = str.split(separator);
    const objArray = splitStr.map((val) => {
        return { value: val };
    });
    return objArray;
}

const inputString = "Jiya,Deepak,Anmol,Smita";
const separator = ",";
const objectArray = convertStringToObjectArray(inputString, separator);

console.log(objectArray);

[
  { value: 'Jiya' },
  { value: 'Deepak' },
  { value: 'Anmol' },
  { value: 'Smita' }
]

Optimized One-Line Version

We can make this more concise by chaining the methods:

const convertToObjectArray = (str, separator) => 
    str.split(separator).map(val => ({ value: val }));

const result = convertToObjectArray("apple|banana|cherry", "|");
console.log(result);

[
  { value: 'apple' },
  { value: 'banana' },
  { value: 'cherry' }
]

Handling Edge Cases

Let's improve the function to handle empty strings and trim whitespace:

function convertWithTrim(str, separator) {
    if (!str) return [];
    
    return str.split(separator)
              .map(val => val.trim())
              .filter(val => val.length > 0)
              .map(val => ({ value: val }));
}

// Test with whitespace and empty values
const testString = "  John  , , Jane ,  Bob  ";
const result = convertWithTrim(testString, ",");
console.log(result);

[
  { value: 'John' },
  { value: 'Jane' },
  { value: 'Bob' }
]

Custom Property Names

We can extend the function to accept custom property names:

function convertWithCustomProperty(str, separator, propertyName = 'value') {
    return str.split(separator).map(val => ({
        [propertyName]: val.trim()
    }));
}

const names = convertWithCustomProperty("Alice,Bob,Charlie", ",", "name");
console.log(names);

[
  { name: 'Alice' },
  { name: 'Bob' },
  { name: 'Charlie' }
]

Complexity Analysis

Time Complexity: O(n), where n is the length of the input string. Both split() and map() operations are linear.

Space Complexity: O(n) for storing the resulting array and objects.

Conclusion

Converting strings to object arrays is efficiently handled using JavaScript's split() and map() methods. This approach provides a clean, functional solution for transforming delimited data into structured objects.