Как преобразовать строковое представление массива в массив?

Question

Я пытаюсь что-то из ...

Скажем, у меня есть это:

<div id="helloworld" 
    call="chart" 
    width="350" height="200" 
    value="[[4, 8, 1, 88, 21],[45, 2, 67, 11, 9],[33, 4, 63, 4, 1]]" 
    label="['test1', 'test2', 'test3', 'test4', 'test5']"/> 

Я использую JQuery для извлечения атрибутов в массив объектов мой весь элемент, эта часть работала, и я получаю что-то вроде этого:

Object { id="helloworld", call="chart" ... } 

Вторая часть мне нужно сделать, чтобы преобразовать «строковое представление массива» в реальный массив, он работает для моего значения с помощью JASON.parse() для значения , .. Однако попытка сделать то же самое с лейблом не сработала, ему не нравится одиночная кавычка ('), которую я там там ... Пробовал сбежать с «все еще не кубиками».

Кто-нибудь знает элегантный способ его преобразования в массив?

Answer 1

С вашего строка выглядит как JSON, вы используете JSON.parse. JSON не разрешает ', поэтому вы не можете разобрать метку.

Есть ли шанс, что вы можете изменить способ создания этого HTML-кода? Если вы создадите его с надлежащей кодировкой HTML, вы можете легко разобрать его на JSON.

<div label="[&quot;test1&quot;, &quot;test2&quot;, &quot;test3&quot;, &quot;test4&quot;, &quot;test5&quot;]"> 

JSON.parse(elm.label); // should work 

Answer 2

Поскольку это не действует в формате JSON, один вариант был бы:

arr = x.replace(/[\[\]']/g, '').replace(/\,\s/g, ',').split(','); 

где x является "['test1', 'test2', 'test3', 'test4', 'test5']"

выше даст вам массив:

["test1", "test2", "test3", "test4", "test5"] 

Answer 3

Поскольку вы используете jQuery и настраиваемые атрибуты, первое, что нужно исправить, это атрибуты:

Вместо:

<div id="helloworld" 
    call="chart" 
    width="350" height="200" 
    value="[[4, 8, 1, 88, 21],[45, 2, 67, 11, 9],[33, 4, 63, 4, 1]]" 
    label="['test1', 'test2', 'test3', 'test4', 'test5']" /> 

Вы должны использовать:

<div id="helloworld" 
    data-call="chart" 
    width="350" height="200" 
    data-value="[[4, 8, 1, 88, 21],[45, 2, 67, 11, 9],[33, 4, 63, 4, 1]]" 
    data-label='["test1", "test2", "test3", "test4", "test5"]'></div> 

Не забудьте также использовать действительную кодировку JSON для ваших данных.

Когда вы сделаете это, вы можете получить доступ к значениям атрибутов с jQuery's .data() method

$('#helloworld').data('label'); //returns the actual array 

In some cases you may want to use .attr() to access the string representation of the attribute.

---

Если вы абсолютно необходимо оставить данные, как это было, и вы можете гарантировать, что «строки» не будут содержать специальных символов, вы можете позвонить $.parseJSON($('#helloworld').attr('data-label').replace("'", '"'));, но он будет сбой, если строка содержит кавычки или другие специальные символы, которые неверны кодируются/бежал.

Answer 4

Если у вас есть контроль над тем, как формируется этот код - попробуйте переключение цитат, поэтому одиночные цитаты окружали атрибут метки:

label='["test1", ..., "test5"]' 

Но как это было предложен zzzzBov, поворачиваясь пользовательскими атрибутами данных- * атрибутов будут быть первым шагом, на который я бы пошел. Взгляните на эту небольшую статью - http://www.broken-links.com/2010/11/18/data-attributes-in-html-and-jquery/.

Answer 5

Другой способ - использовать функцию javascript eval(). Он преобразует строку в переменные js.

var arr = eval($('#helloworld').attr('label')); 

jsFiddle

Answer 6

Ok, так что окончательное решение, с комбинацией чего-то я нашел в Интернете плюс @Vega и @adeneo ответы, здесь мы идем ...

Используя следующую JQuery метод позволяет мне получить все по телефону пустой Attr():

(function($) { 
    var _old = $.fn.attr; 
    $.fn.attr = function() { 
     if (this[0] && arguments.length === 0) { 
      var map = {}; 
      var i = this[0].attributes.length; 
      while (i--) { 
       map[this[0].attributes[i].name.toLowerCase()] = this[0].attributes[i].value; 
      } 
      return map; 
     } else { 
      return _old.apply(this, arguments); 
     } 
    } 
}(jQuery)); 

я могу извлечь все атрибуты, как это:

var data = $(document.getElementById(id)).attr(); 

При том, что я держу атрибуты элементов ТОЧНО, как они, как это было раньше (с регулировкой HTML5):

<div id="helloworld" 
    data-call="chart" 
    data-width="350" 
    data-height="200" 
    data-stacked="true" 
    data-value="[[4, 8, 1, 88, 21],[45, 2, 67, 11, 9],[33, 4, 63, 4, 1]]" 
    data-label="['test1', 'test2', 'test3', 'test4', 'test5']"/> 

Затем я использую JSON.parse(), чтобы иметь дело с данными стоимости , а затем используйте метод @ adeneo для обработки массива строк.

data.value = JSON.parse(data.value); 
    data.label = data.label.split(',').map(function(val) { return val.trim().replace(/(\'|\[|\])/g,''); }); 

Для моих собственных целей других JS-код, я просто обрежьте данных- от ключа, и теперь все кошерно !!

for (key in data) { 
    var newKey = key.replace("data-",""); 
    if (newKey != key) { 
     data[newKey] = data[key]; 
     delete data[key]; 
    } 
} 

Теперь я могу передать данные моей существующей функции !!!! :)

Как я звала свою функцию до:

var data = { 
    id: 'helloworld', 
    width: 350, 
    height: 200, 
    value: [ 
     [4, 8, 1, 88, 21], 
     [45, 2, 67, 11, 9], 
     [33, 4, 63, 4, 1] 
    ], 
    stacked: true, 
    label: ["test1", "test2", "test3", "test4", "test5"] 
}; 
chart(data); 

Теперь я мог бы использовать JQuery, найти все элементы с определенным именем класса, то просто разобрать атрибуты для запуска вызова. :)