How to Convert Array to string, comma, the hyphen in javascript

How to Convert Array to string, comma, the hyphen in javascript

In the course of application development, a list of record data retrieved from a REST API is often in the form of an array of records in JavaScript.

Let’s consider a scenario where the Permissions REST API returns the list of permissions for a user in an application. For instance, the following is an array of permissions returned from the API. You can also refer to other posts on Javascript Add,Delete from Array.

let array = ["READ", "WRITE", "DELETE", "UPLOAD"];

The objective is to output this array of strings into a single string with commas and hyphens as separators.

This post explains how we can convert the array into a string in JavaScript/Angular, presenting multiple methods to achieve this.

How to Convert Array to String Using the Array Join Method in JavaScript

Here is a step-by-step guide

  • Use the inbuilt map with join method.
  • The array map method is applied in the following example.
  • map iterates over each element, applying a callback.
  • Append each element using the join method of the string.
  • The join method accepts a string that is appended to it.

Below is the code to convert to a string with commas

let stringwithcomma = array.map((element) => element).join(",");
console.log(stringwithcomma); //READ,WRITE,DELETE,UPLOAD

For hyphen-separated strings:

let stringwithhyphen = array.map((element) => element).join("-");
console.log(stringwithhyphen); //READ-WRITE-DELETE-UPLOAD

Similarly, we can use spaces to convert to strings separated by spaces

let stringwithspace = array.map((element) => element).join(" ");
console.log(stringwithspace); //READ WRITE DELETE UPLOAD

This approach works with any type of array and any type of delimiter.

Convert Array to String Using the toString Method

Every object in JavaScript has a toString() method.

Arrays also have this method, which prints the string representation of an array separated with commas. However, this only works with primitive types, not with an array of objects.

console.log(array.toString());
//READ,WRITE,DELETE,UPLOAD

How to Convert Object Array to String in Angular

Assuming data comes from a REST API and needs to be displayed in string format on the client-side using Angular codebase, the following TypeScript component example is provided.

It is an instance where we need to display user information in a data table. Each row can have user information, and one of the columns needs to display the role names separated with a comma.

Data Converted to string using map iterator and finally join the string with a separate hyphen.

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  name = "Angular";
  roles = [
    { id: "1", name: "superadmin" },
    { id: "2", name: "admin" },
    { id: "3", name: "user" },
  ];
  roleString: String = null;
  constructor() {
    this.roleString = this.roles.map((element) => element.name).join("-");
  }
}

In the component HTML template, the string is displayed using a template expression:

<p>{{roleString}}</p>

Conclusion

In this tutorial, you have explored multiple ways to convert an array to a string in JavaScript and Angular components.