Как из HTML передать массив в JS?

Question

[off]

я ввожу [1,2,3] и получаю

length= – undefined 
value= – "[1,2,3]" 
mas= – [] (0)

подскажите, как передавать массив, или что я сделал не так?

function test() {
  var d = document,
   inp = d.getElementById('Temp'),
   mas = [];
    console.log("length=",inp.length);
    console.log("value=",inp.value);

   for (var i = 0; i < inp.length; i++) {
     mas[i] = inp[i].value;
   }
   console.log("mas=",mas);
}

function test() {
  var d = document,
   inp = d.getElementById('Temp'),
   mas = [];
    console.log("length=",inp.length);
    console.log("value=",inp.value);

   for (var i = 0; i < inp.length; i++) {
     mas[i] = inp[i].value;
   }
   console.log("mas=",mas);
}

Answer 1

[Сергей Соколов]

value текстового поля ввода это просто строка текста, что бы там ни вводили.

Я бы не ждал от пользователя знания синтаксиса JSON массивов JavaScript со всеми этими квадратными скобками, и позволил вводить числа через запятую и, может, ещё пробел.

Строку текста можно разбить в массив методом split():

const str = '1,2, 3,   4'; // то, что забрали из value инпута
const separator = /,\s*/; // рег. выражение: запятая и потом 0 или больше пробелов
const arr = str.split(separator); // [ "1", "2", "3", "4" ]

тут ешё один подвох: элементы массива по-прежнему строки. Не число 1, а строка "1".

Перевести элементы массива в числа можно, например, функцией Number(). Нужно каждый элемент получившегося массива прогнать через эту функцию. Для этого есть метод массива map():

const arr = str
  .split(separator)
  .map(Number); // [ 1, 2, 3, 4 ]

вот теперь больше похоже на желаемый, наверное, результат?

Comments

[off]

спасибо

Answer 2

[Денис Инешин]

Пример https://jsfiddle.net/IonDen/xzng6cLh/

const rawString = '[1,2,3]';

console.log(typeof rawString); // string

function parseArrayFromString(str) {
  const parsedStr = str.substring(1, str.length - 1);
	return parsedStr.split(',');
}

const arr = parseArrayFromString(rawString);
console.log(arr, Array.isArray(arr), arr[1]); // [1,2,3], true, 2