how to add commas between names in an array using join method-Javascript

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

This may be super dumb question, but need help on this.
How can I join the names of the users below and separate it by ","?

code:

var users = ["fer", "jyujyu", "jhwevhfwfv"]



    <div>

      {users.map(function(user){

                  return <span key={user}className="user">{user}</span>

                })}

              </div>

Where can I apply the join here to add commas between names:
expected o/p:

fer, jyujyu, jhwevhfwfv

edited Jul 30 '18 at 5:48

mplungjan

90.6k22127186

asked Jul 30 '18 at 5:35

user1234

1,05421641

{user} ,  will work but adds extra , after last. So you just need to handle that using if else or last.

– Atul Sharma
Jul 30 '18 at 5:36

add a comment |

This may be super dumb question, but need help on this.
How can I join the names of the users below and separate it by ","?

code:

var users = ["fer", "jyujyu", "jhwevhfwfv"]



    <div>

      {users.map(function(user){

                  return <span key={user}className="user">{user}</span>

                })}

              </div>

Where can I apply the join here to add commas between names:
expected o/p:

fer, jyujyu, jhwevhfwfv

edited Jul 30 '18 at 5:48

mplungjan

90.6k22127186

asked Jul 30 '18 at 5:35

user1234

1,05421641

{user} ,  will work but adds extra , after last. So you just need to handle that using if else or last.

– Atul Sharma
Jul 30 '18 at 5:36

add a comment |

This may be super dumb question, but need help on this.
How can I join the names of the users below and separate it by ","?

code:

var users = ["fer", "jyujyu", "jhwevhfwfv"]



    <div>

      {users.map(function(user){

                  return <span key={user}className="user">{user}</span>

                })}

              </div>

Where can I apply the join here to add commas between names:
expected o/p:

fer, jyujyu, jhwevhfwfv

edited Jul 30 '18 at 5:48

mplungjan

90.6k22127186

asked Jul 30 '18 at 5:35

user1234

1,05421641

This may be super dumb question, but need help on this.
How can I join the names of the users below and separate it by ","?

code:

var users = ["fer", "jyujyu", "jhwevhfwfv"]



    <div>

      {users.map(function(user){

                  return <span key={user}className="user">{user}</span>

                })}

              </div>

Where can I apply the join here to add commas between names:
expected o/p:

fer, jyujyu, jhwevhfwfv

javascript reactjs

edited Jul 30 '18 at 5:48

mplungjan

90.6k22127186

asked Jul 30 '18 at 5:35

user1234

1,05421641

edited Jul 30 '18 at 5:48

mplungjan

90.6k22127186

asked Jul 30 '18 at 5:35

user1234

1,05421641

edited Jul 30 '18 at 5:48

mplungjan

90.6k22127186

edited Jul 30 '18 at 5:48

mplungjan

90.6k22127186

edited Jul 30 '18 at 5:48

mplungjan

90.6k22127186

asked Jul 30 '18 at 5:35

user1234

1,05421641

asked Jul 30 '18 at 5:35

user1234

1,05421641

asked Jul 30 '18 at 5:35

user1234

1,05421641

{user} ,  will work but adds extra , after last. So you just need to handle that using if else or last.

– Atul Sharma
Jul 30 '18 at 5:36

add a comment |

{user} ,  will work but adds extra , after last. So you just need to handle that using if else or last.

– Atul Sharma
Jul 30 '18 at 5:36

{user} ,  will work but adds extra , after last. So you just need to handle that using if else or last.

– Atul Sharma
Jul 30 '18 at 5:36

add a comment |

4 Answers
4

active

oldest

votes

You do not need to map if you just want to display all the items in the array.

var users = ["fer", "jyujyu", "jhwevhfwfv"]

using array join you should be able to display all items in a span

users.join(', ') will give you the expected output, this joins all items of the array with what you specified and it returns a string.

putting everything together.

var users = ["fer", "jyujyu", "jhwevhfwfv"]



<div>

  {

    <span className="user">{users.join(', ')}</span>

  }

</div>

here is the link to the sandbox of this working https://codesandbox.io/s/znrj1nopox

answered Jul 30 '18 at 7:06

Olivier JM

1517

add a comment |

Here's a simple way to do with reduce:

var users = ["fer", "jyujyu", "jhwevhfwfv"]

<div>

  {

    users

      .map(function(user){

              return <span key={user} className="user">{user}</span>

            })

      .reduce(function(prev, next){

        if(Array.isArray(prev))

          return prev.concat(<span>, </span>).concat(next)

        else return [prev, (<span>, </span>), next]

    })

  }

</div>;

Here is a codepen example

edited Jul 30 '18 at 6:57

answered Jul 30 '18 at 5:42

Terry Wei

1,356616

That looks wonky. Why not users .map(function(user){ return `${user}` }) .join(",")

– mplungjan
Jul 30 '18 at 5:51

You can do it that way. But remember that your comma has no element tag.

– Terry Wei
Jul 30 '18 at 5:52

I assume your code is React - will the return really work like that?

– mplungjan
Jul 30 '18 at 5:53

If not React, your JS in not valid is what I meant to say.

– mplungjan
Jul 30 '18 at 5:59

@mplungjan: yes Im able to return the user names and list them, however with just space and no commas, I wanted to insert commas in between

– user1234
Jul 30 '18 at 6:05

|
show 6 more comments

let numbers = [1, 2, 3].join(",").split("");



const listItems = numbers.map(number => (

    <span key={number.toString()}>{number}</span>

));

console.log(listItems);

return <div>{listItems}</div>;

I have updated the answer. Since join converts array into string we cant directly render in react component. i have converted to an array to avoid this problem. See the below working example:
https://codesandbox.io/s/ymvl8olpxx

edited Aug 1 '18 at 11:00

answered Jul 30 '18 at 5:39

Srinivas

60331127

He wants to wrap in spans

– mplungjan
Jul 30 '18 at 5:52

included the span wrapping.

– Srinivas
Jul 30 '18 at 6:07

Shouldn't it be ${user} ?

– Suhas
Jul 30 '18 at 6:08

Will this generate  elements or will it generate the string ""?

– Code-Apprentice
Jul 30 '18 at 6:12

@suhas u r right, its ${user}

– Srinivas
Jul 30 '18 at 6:14

add a comment |

-1

I would try to do something like so (built upon a previous answer):

var users = ["fer", "jyujyu", "jhwevhfwfv"];

var spannedUsers = users.map((user) => <span key={user} className="user">{user}</span>);

<div>

    {spannedUsers.join(", ")}

</div>

edited Jan 4 at 13:21

answered Jul 30 '18 at 6:07

Suhas

342110

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f51587522%2fhow-to-add-commas-between-names-in-an-array-using-join-method-javascript%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

You do not need to map if you just want to display all the items in the array.

var users = ["fer", "jyujyu", "jhwevhfwfv"]

using array join you should be able to display all items in a span

users.join(', ') will give you the expected output, this joins all items of the array with what you specified and it returns a string.

putting everything together.

var users = ["fer", "jyujyu", "jhwevhfwfv"]



<div>

  {

    <span className="user">{users.join(', ')}</span>

  }

</div>

here is the link to the sandbox of this working https://codesandbox.io/s/znrj1nopox

answered Jul 30 '18 at 7:06

Olivier JM

1517

add a comment |

You do not need to map if you just want to display all the items in the array.

var users = ["fer", "jyujyu", "jhwevhfwfv"]

using array join you should be able to display all items in a span

users.join(', ') will give you the expected output, this joins all items of the array with what you specified and it returns a string.

putting everything together.

var users = ["fer", "jyujyu", "jhwevhfwfv"]



<div>

  {

    <span className="user">{users.join(', ')}</span>

  }

</div>

here is the link to the sandbox of this working https://codesandbox.io/s/znrj1nopox

answered Jul 30 '18 at 7:06

Olivier JM

1517

add a comment |

You do not need to map if you just want to display all the items in the array.

var users = ["fer", "jyujyu", "jhwevhfwfv"]

using array join you should be able to display all items in a span

users.join(', ') will give you the expected output, this joins all items of the array with what you specified and it returns a string.

putting everything together.

var users = ["fer", "jyujyu", "jhwevhfwfv"]



<div>

  {

    <span className="user">{users.join(', ')}</span>

  }

</div>

here is the link to the sandbox of this working https://codesandbox.io/s/znrj1nopox

answered Jul 30 '18 at 7:06

Olivier JM

1517

You do not need to map if you just want to display all the items in the array.

var users = ["fer", "jyujyu", "jhwevhfwfv"]

using array join you should be able to display all items in a span

users.join(', ') will give you the expected output, this joins all items of the array with what you specified and it returns a string.

putting everything together.

var users = ["fer", "jyujyu", "jhwevhfwfv"]



<div>

  {

    <span className="user">{users.join(', ')}</span>

  }

</div>

here is the link to the sandbox of this working https://codesandbox.io/s/znrj1nopox

answered Jul 30 '18 at 7:06

Olivier JM

1517

answered Jul 30 '18 at 7:06

Olivier JM

1517

answered Jul 30 '18 at 7:06

Olivier JM

1517

answered Jul 30 '18 at 7:06

Olivier JM

1517

add a comment |

Here's a simple way to do with reduce:

var users = ["fer", "jyujyu", "jhwevhfwfv"]

<div>

  {

    users

      .map(function(user){

              return <span key={user} className="user">{user}</span>

            })

      .reduce(function(prev, next){

        if(Array.isArray(prev))

          return prev.concat(<span>, </span>).concat(next)

        else return [prev, (<span>, </span>), next]

    })

  }

</div>;

Here is a codepen example

edited Jul 30 '18 at 6:57

answered Jul 30 '18 at 5:42

Terry Wei

1,356616

That looks wonky. Why not users .map(function(user){ return `${user}` }) .join(",")

– mplungjan
Jul 30 '18 at 5:51

You can do it that way. But remember that your comma has no element tag.

– Terry Wei
Jul 30 '18 at 5:52

I assume your code is React - will the return really work like that?

– mplungjan
Jul 30 '18 at 5:53

If not React, your JS in not valid is what I meant to say.

– mplungjan
Jul 30 '18 at 5:59

@mplungjan: yes Im able to return the user names and list them, however with just space and no commas, I wanted to insert commas in between

– user1234
Jul 30 '18 at 6:05

|
show 6 more comments

Here's a simple way to do with reduce:

var users = ["fer", "jyujyu", "jhwevhfwfv"]

<div>

  {

    users

      .map(function(user){

              return <span key={user} className="user">{user}</span>

            })

      .reduce(function(prev, next){

        if(Array.isArray(prev))

          return prev.concat(<span>, </span>).concat(next)

        else return [prev, (<span>, </span>), next]

    })

  }

</div>;

Here is a codepen example

edited Jul 30 '18 at 6:57

answered Jul 30 '18 at 5:42

Terry Wei

1,356616

That looks wonky. Why not users .map(function(user){ return `${user}` }) .join(",")

– mplungjan
Jul 30 '18 at 5:51

You can do it that way. But remember that your comma has no element tag.

– Terry Wei
Jul 30 '18 at 5:52

I assume your code is React - will the return really work like that?

– mplungjan
Jul 30 '18 at 5:53

If not React, your JS in not valid is what I meant to say.

– mplungjan
Jul 30 '18 at 5:59

@mplungjan: yes Im able to return the user names and list them, however with just space and no commas, I wanted to insert commas in between

– user1234
Jul 30 '18 at 6:05

|
show 6 more comments

Here's a simple way to do with reduce:

var users = ["fer", "jyujyu", "jhwevhfwfv"]

<div>

  {

    users

      .map(function(user){

              return <span key={user} className="user">{user}</span>

            })

      .reduce(function(prev, next){

        if(Array.isArray(prev))

          return prev.concat(<span>, </span>).concat(next)

        else return [prev, (<span>, </span>), next]

    })

  }

</div>;

Here is a codepen example

edited Jul 30 '18 at 6:57

answered Jul 30 '18 at 5:42

Terry Wei

1,356616

Here's a simple way to do with reduce:

var users = ["fer", "jyujyu", "jhwevhfwfv"]

<div>

  {

    users

      .map(function(user){

              return <span key={user} className="user">{user}</span>

            })

      .reduce(function(prev, next){

        if(Array.isArray(prev))

          return prev.concat(<span>, </span>).concat(next)

        else return [prev, (<span>, </span>), next]

    })

  }

</div>;

Here is a codepen example

edited Jul 30 '18 at 6:57

answered Jul 30 '18 at 5:42

Terry Wei

1,356616

edited Jul 30 '18 at 6:57

answered Jul 30 '18 at 5:42

Terry Wei

1,356616

answered Jul 30 '18 at 5:42

Terry Wei

1,356616

answered Jul 30 '18 at 5:42

Terry Wei

1,356616

That looks wonky. Why not users .map(function(user){ return `${user}` }) .join(",")

– mplungjan
Jul 30 '18 at 5:51

You can do it that way. But remember that your comma has no element tag.

– Terry Wei
Jul 30 '18 at 5:52

I assume your code is React - will the return really work like that?

– mplungjan
Jul 30 '18 at 5:53

If not React, your JS in not valid is what I meant to say.

– mplungjan
Jul 30 '18 at 5:59

@mplungjan: yes Im able to return the user names and list them, however with just space and no commas, I wanted to insert commas in between

– user1234
Jul 30 '18 at 6:05

|
show 6 more comments

That looks wonky. Why not users .map(function(user){ return `${user}` }) .join(",")

– mplungjan
Jul 30 '18 at 5:51

You can do it that way. But remember that your comma has no element tag.

– Terry Wei
Jul 30 '18 at 5:52

I assume your code is React - will the return really work like that?

– mplungjan
Jul 30 '18 at 5:53

If not React, your JS in not valid is what I meant to say.

– mplungjan
Jul 30 '18 at 5:59

@mplungjan: yes Im able to return the user names and list them, however with just space and no commas, I wanted to insert commas in between

– user1234
Jul 30 '18 at 6:05

That looks wonky. Why not users .map(function(user){ return `${user}` }) .join(",")

– mplungjan
Jul 30 '18 at 5:51

You can do it that way. But remember that your comma has no element tag.

– Terry Wei
Jul 30 '18 at 5:52

I assume your code is React - will the return really work like that?

– mplungjan
Jul 30 '18 at 5:53

If not React, your JS in not valid is what I meant to say.

– mplungjan
Jul 30 '18 at 5:59

@mplungjan: yes Im able to return the user names and list them, however with just space and no commas, I wanted to insert commas in between

– user1234
Jul 30 '18 at 6:05

|
show 6 more comments

let numbers = [1, 2, 3].join(",").split("");



const listItems = numbers.map(number => (

    <span key={number.toString()}>{number}</span>

));

console.log(listItems);

return <div>{listItems}</div>;

edited Aug 1 '18 at 11:00

answered Jul 30 '18 at 5:39

Srinivas

60331127

He wants to wrap in spans

– mplungjan
Jul 30 '18 at 5:52

included the span wrapping.

– Srinivas
Jul 30 '18 at 6:07

Shouldn't it be ${user} ?

– Suhas
Jul 30 '18 at 6:08

Will this generate  elements or will it generate the string ""?

– Code-Apprentice
Jul 30 '18 at 6:12

@suhas u r right, its ${user}

– Srinivas
Jul 30 '18 at 6:14

add a comment |

let numbers = [1, 2, 3].join(",").split("");



const listItems = numbers.map(number => (

    <span key={number.toString()}>{number}</span>

));

console.log(listItems);

return <div>{listItems}</div>;

edited Aug 1 '18 at 11:00

answered Jul 30 '18 at 5:39

Srinivas

60331127

He wants to wrap in spans

– mplungjan
Jul 30 '18 at 5:52

included the span wrapping.

– Srinivas
Jul 30 '18 at 6:07

Shouldn't it be ${user} ?

– Suhas
Jul 30 '18 at 6:08

Will this generate  elements or will it generate the string ""?

– Code-Apprentice
Jul 30 '18 at 6:12

@suhas u r right, its ${user}

– Srinivas
Jul 30 '18 at 6:14

add a comment |

let numbers = [1, 2, 3].join(",").split("");



const listItems = numbers.map(number => (

    <span key={number.toString()}>{number}</span>

));

console.log(listItems);

return <div>{listItems}</div>;

edited Aug 1 '18 at 11:00

answered Jul 30 '18 at 5:39

Srinivas

60331127

let numbers = [1, 2, 3].join(",").split("");



const listItems = numbers.map(number => (

    <span key={number.toString()}>{number}</span>

));

console.log(listItems);

return <div>{listItems}</div>;

edited Aug 1 '18 at 11:00

answered Jul 30 '18 at 5:39

Srinivas

60331127

edited Aug 1 '18 at 11:00

answered Jul 30 '18 at 5:39

Srinivas

60331127

answered Jul 30 '18 at 5:39

Srinivas

60331127

answered Jul 30 '18 at 5:39

Srinivas

60331127

He wants to wrap in spans

– mplungjan
Jul 30 '18 at 5:52

included the span wrapping.

– Srinivas
Jul 30 '18 at 6:07

Shouldn't it be ${user} ?

– Suhas
Jul 30 '18 at 6:08

Will this generate  elements or will it generate the string ""?

– Code-Apprentice
Jul 30 '18 at 6:12

@suhas u r right, its ${user}

– Srinivas
Jul 30 '18 at 6:14

add a comment |

He wants to wrap in spans

– mplungjan
Jul 30 '18 at 5:52

included the span wrapping.

– Srinivas
Jul 30 '18 at 6:07

Shouldn't it be ${user} ?

– Suhas
Jul 30 '18 at 6:08

Will this generate  elements or will it generate the string ""?

– Code-Apprentice
Jul 30 '18 at 6:12

@suhas u r right, its ${user}

– Srinivas
Jul 30 '18 at 6:14

He wants to wrap in spans

– mplungjan
Jul 30 '18 at 5:52

included the span wrapping.

– Srinivas
Jul 30 '18 at 6:07

Shouldn't it be ${user} ?

– Suhas
Jul 30 '18 at 6:08

Will this generate  elements or will it generate the string ""?

– Code-Apprentice
Jul 30 '18 at 6:12

@suhas u r right, its ${user}

– Srinivas
Jul 30 '18 at 6:14

add a comment |

-1

I would try to do something like so (built upon a previous answer):

var users = ["fer", "jyujyu", "jhwevhfwfv"];

var spannedUsers = users.map((user) => <span key={user} className="user">{user}</span>);

<div>

    {spannedUsers.join(", ")}

</div>

edited Jan 4 at 13:21

answered Jul 30 '18 at 6:07

Suhas

342110

add a comment |

-1

I would try to do something like so (built upon a previous answer):

var users = ["fer", "jyujyu", "jhwevhfwfv"];

var spannedUsers = users.map((user) => <span key={user} className="user">{user}</span>);

<div>

    {spannedUsers.join(", ")}

</div>

edited Jan 4 at 13:21

answered Jul 30 '18 at 6:07

Suhas

342110

add a comment |

-1

I would try to do something like so (built upon a previous answer):

var users = ["fer", "jyujyu", "jhwevhfwfv"];

var spannedUsers = users.map((user) => <span key={user} className="user">{user}</span>);

<div>

    {spannedUsers.join(", ")}

</div>

edited Jan 4 at 13:21

answered Jul 30 '18 at 6:07

Suhas

342110

I would try to do something like so (built upon a previous answer):

var users = ["fer", "jyujyu", "jhwevhfwfv"];

var spannedUsers = users.map((user) => <span key={user} className="user">{user}</span>);

<div>

    {spannedUsers.join(", ")}

</div>

edited Jan 4 at 13:21

answered Jul 30 '18 at 6:07

Suhas

342110

edited Jan 4 at 13:21

answered Jul 30 '18 at 6:07

Suhas

342110

answered Jul 30 '18 at 6:07

Suhas

342110

answered Jul 30 '18 at 6:07

Suhas

342110

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk