An array converting to a string

Question

I have the following code, which returns an array:

const authorsName = [];
this.props.authors.map((e) => authorsName.push(e.name + ' ' + e.surname));
console.log(authorsName)
// ["Jonh Snow", "Jonh Rain"]

But when I try to send this array using the following code:

const s = document.createElement('script');
s.type = 'text/javascript';
s.innerHTML = `window.customConfig.push({
   page_type: "article",
   article_authors: "${authorsName}"
})`;

the authorsName array turns into the next string:

article_authors: "Jonh Snow,Jonh Rain",

I do not understand why this is happening. Please, can you tellme what is the problem. thanks in advance.

What do you want to desired output to look like? If you want it to be a string with space separating then you need to join the array with a space delimiter. Although if that is the desired outcome, you could just build up a string, and then pass that into article_authors instead of the array. Also it is rendering like that because you are using string literal. — llamacorn
– llamacorn, Commented Jun 26, 2019 at 2:19
Change to article_authors: ${JSON.stringify(authorsName)}, though, why build out the script. — Lawrence Cherone
– Lawrence Cherone, Commented Jun 26, 2019 at 2:19

Shidersz · Accepted Answer · 2019-06-26 02:55:48Z

First of all, the usage of Array.map() that way works, but it is not quite correct. Remember that .map() returns a new array where each element is derived in some way from the original one, and do not mutates the original array. So, it will be better if you do something like next:

const authorsName = this.props.authors.map(e => e.name + ' ' + e.surname);

The other option, to keep the code more similar to the one you give, is to use Array.forEach() in this way:

const authorsName = [];
this.props.authors.forEach(e => authorsName.push(e.name + ' ' + e.surname));

Now, on your next code:

s.innerHTML = `window.customConfig.push({
    page_type: "article",
    article_authors: "${authorsName}"
})`;

the authorsName array is coerced to a string using the Array.toString() method and the MDN says next about it:

For Array objects, the toString method joins the array and returns one string containing each array element separated by commas. JavaScript calls the toString method automatically when an array is to be represented as a text value or when an array is referred to in a string concatenation.

So, instead you need to use JSON.stringify() to convert the array into a JSON representation of it.

s.innerHTML = `window.customConfig.push({
    page_type: "article",
    article_authors: "${JSON.stringify(authorsName)}"
})`;

You can check the difference between using toString() and JSON.stringify() on the next example:

let arr = [1,2,3];

console.log("With toString() =>", arr.toString());
console.log("With JSON.stringify() =>", JSON.stringify(arr));

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

kecklabs · Accepted Answer · 2019-06-26 02:32:26Z

0

article_authors is being interpolated into a string, even though it's an array.

If you want the string as in your first snippet, try this instead:

const authors = [
{name: "Jonh",
 surname: "Snow"},
 {name: "Jonh",
 surname: "Rain"}
]
const authorsName = [];
const output = authors.map((e)=> authorsName.push(e.name + ' ' + e.surname));
console.log(authorsName)
const s = document.createElement('script');
s.type = 'text/javascript';
s.innerHTML = `
   window.customConfig.push({
   page_type: "article",
   article_authors: "${JSON.stringify(authorsName)}"
   })
               `;

console.log(s.innerHTML)

answered Jun 26, 2019 at 2:32

kecklabs

435 bronze badges

Comments

Adrian Brand · Accepted Answer · 2019-06-26 02:56:00Z

0

When you include an object in a string the toString method is called to make a string out of it. The toString method on array comma concatinates the content of the array.

console.log([1,2,3,4].toString());

If you want a different format you can call join on the array to join the elements with a different sequence.

console.log([1,2,3,4].join(', '));

console.log([1,2,3,4].join(' / '));

console.log([1,2,3,4].join(' - '));

answered Jun 26, 2019 at 2:56

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

Collectives™ on Stack Overflow

An array converting to a string

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related