how to convert from string to array in javascript?

Question

So, I am reading some data with document.getElementById which is already an array.But somehow when I am reading it, it is resulting in a string insted.

I am using the document.getElementById('clients').value, and apparently this returns a string, while I would like to get an array instead.

var clients = [];
clients = document.getElementById("clients").value;
alert(clients);
console.log(clients);

for(var i =0; i < clients.length; i++){
    var client = clients[i].toString().split(',');
    alert(client);
}

//console.log(clients) gets:
["[['1'", " 'client1']", " ['2'", " 'client2']", " ['3'", " 'client3']]"]

when I am alerting the client from the for loop, I am getting each and every character found in clients one by one. While I would like to get an object to split it. Thanks a lot in advance.

It's hard to give a complete answer if you don't tell us what `clients` is. — Mark, Feb 01 '19 at 14:57
split the `clients` directly, no need to loop to split. `clients.split(",")` use `,` to split if this is the character which you want to use as separator — Calvin Nunes, Feb 01 '19 at 14:57
`document.getElementById which is already an array` --> No, it's an HTML element. Its `.value` isn't an array either, it's a string. Your `for` loop is iterating over every character of the string. — Jeremy Thille, Feb 01 '19 at 14:57
The `.value` of an HTML element is a string. What do you mean by _"While I would like to get an object to split it."_? — guest271314, Feb 01 '19 at 14:59
*"clients is not html, its from mongodb"* so why are you assign a value from a HTML element to the variable called `clients` ? — Calvin Nunes, Feb 01 '19 at 15:02
@guest271314 I would like to split it as it has other arrays in it — jurgen.s, Feb 01 '19 at 15:04
@jurgen.s "split" is perhaps not the accurate term to use to describe the expected result. Though if you post what the `.value` is at the question, and what the expected result is, it would help resolve the inquiry. See https://stackoverflow.com/help/mcve, https://stackoverflow.com/help/how-to-ask — guest271314, Feb 01 '19 at 15:05
@guest271314 I have something like this: [['1', 'client1'], ['2', 'client2'], ['3', 'client3']] and would like to get: 1 - client1..... — jurgen.s, Feb 01 '19 at 15:17
_"`//console.log(clients) gets: ["[['1'", " 'client1']", " ['2'", " 'client2']", " ['3'", " 'client3']]"]`"_ How does `console.log(clients)` output an array where the `.value` of an HTML element is a single string? Can you reproduce the output described at the edited question at stacksnippets? — guest271314, Feb 01 '19 at 15:32
@jurgen.s Try to inspect the element, copy the `.outerHTML` of the element and place that `.outerHTML` at the question. — guest271314, Feb 01 '19 at 15:45
`document.getElementById("clients").outerHTML`, also you are using split after the console.log, so it is impossible that it logs an array. Do you know how to debug using the dev tools? If yes, add a debugger right after `clients = document.getElementById("clients").value;` — Calvin Nunes, Feb 01 '19 at 15:52
ok, so, this is the very first thing that every people who is programming need to know... take a look at https://stackoverflow.com/questions/66420/how-do-you-launch-the-javascript-debugger-in-google-chrome after that, come back here — Calvin Nunes, Feb 01 '19 at 16:03
mainly I know how to use the inspect (F12), and usually I solve my errors, but I don't know why this one looks so time consuming hahaha — jurgen.s, Feb 01 '19 at 16:08

score 1 · Answer 1 · answered Feb 01 '19 at 15:26

1

I have something like this: [['1', 'client1'], ['2', 'client2'], ['3', 'client3']] and would like to get: 1 - client1.....

The .value should be valid JSON or RegExp or String methods need to be used to convert invalid JSON to valid JSON. Note the single quotes at HTML attribute surrounding the value and double quotes within the value of the attribute

[["1", "client1"], ["2", "client2"], ["3", "client3"]]

You can then use JSON.parse() to convert JSON string to JavaScript object and use for..of loop to iterate each element of each nested array.

let value = JSON.parse(clients.value);

for (let [a, b] of value) {
  console.log(a, b)
}

<input id="clients" value='[["1", "client1"], ["2", "client2"], ["3", "client3"]]'>

answered Feb 01 '19 at 15:26

guest271314

1
15
104
177

I have tried this but got an error which says: 'Unexpected token u in JSON at position 0' – jurgen.s Feb 01 '19 at 15:46
@jurgen.s That is because the string returned from `.value` is not valid `JSON`. Can you include the full `.outerHTML` of the element at the question? – guest271314 Feb 01 '19 at 15:47
`Unexpected token u` is probably due to a `undefined`. Make sure you retreive the input's value correctly. – Louys Patrice Bessette Feb 01 '19 at 15:59

jo_va · Answer 2 · 2019-02-01T15:05:55.217

If you want to input an array using an <input> tag, with values separated by commas or spaces, you have no choice but to use it with type="text", which will return you a string.

You then have to trim and split that string to build your array. You can use a regex to split the string on multiple separators:

function getClients() {
  const stringClients = document.getElementById("clients").value;
  const clients = stringClients.trim().split(/[\s,]+/);
  console.log('clients:', clients);
}

Enter a comma or space separated list:<br>
<input type="text" id="clients" oninput="getClients()">

score 0 · Answer 3 · answered Feb 01 '19 at 15:01

document.getElementById("clients").value

is a string, not an array. If you do :

for(var i =0; i < clients.length; i++)

you are actually iterating over every letter of the string, not every word.

What you can do is type client1,client2,client3 in your input field, then split them this way :

const clients = document.getElementById("clients").value.split(",") // ["client1","client2","client3"]

how to convert from string to array in javascript?

3 Answers3