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

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

During application development, a list of records data retrieved from REST API is in the form of an Array of records in javascript.

let’s assume, that Permissions REST API returns the list of permissions for a user in an application. for example, the following are an array of permissions returned from API, You can also check other posts on Javascript Add,Delete from Array

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

We want to output this array of strings into a single string with commas and hyphens separated.

this post talks about how we convert the array into string in javascript/Angular.

There are multiple ways we can output to a string.

How to convert Array to string using array join method in Javascript

Here is the step by step to do it.

  • Inbuilt map with String join method
  • array map method is used in the following example.
  • map iterates that each element applies callback
  • append each element using the join method of the string.
  • join method accepts a string that appends to it.

below the line of code convert to string with a comma

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

the converted string contains hypen separated for below line of code

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

In the same way, we can use spaces converted 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 toString method

Every object in javascript has toString() method.

Array also this method which prints the string representation of an array separated with commas.

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?

data comes from REST API and wants to display in the string and this data needs to display on the client-side using angular codebase.

This post does not talk about retrieving the data from API.

Assume that the following data is available in the typescript component.

It is an example where we need to display the user’s information in the data table each row can have user information, one of the columns needs to display the roles names separated with a comma.

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 component html template, displaying the string using template expression.

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

Conclusion

In this tutorial, you learned multiple ways to convert array to string in javascript and angular components.