How do you convert a string representation of array back to array?

Question

I am trying something out...

Say I have this:

<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']"/>

I am using jQuery to fetch my all the element attribute into an object array, that part worked, and I am getting something like this:

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

The second part I need to do is to convert the "String representation of the array" into an actual array, it works for my value using JASON.parse() for the value... however trying to do the same thing with the label didn't work, it doesn't like the single quote (') I have in there... Tried escaped it with \" still no dice.

Does anyone know an elegant way to convert it back into an array?

Those appear to be custom attributes, you should not define your own custom attributes unless you're using `[data-*]` attributes. — zzzzBov, Aug 16 '13 at 15:55
Good call, I will convert them into [data-*] afterwards. Thank you. — codenamezero, Aug 16 '13 at 15:57
JSON.parse doesn't consider `'` (single quotes) as a valid `String`. You need to change the server code that renders the label to use double quotes or You need to replace all `'` single quotes to `"` double quotes before trying to parse. — Selvakumar Arumugam, Aug 16 '13 at 15:57
@Vega Hum... let me try to swap all the " and ' then.. although I hate to do that because everywhere else is using " to wrap all the values.. — codenamezero, Aug 16 '13 at 15:59
@Prusse, no that's not the correct way to HTML escape quotes within an attribute. — zzzzBov, Aug 16 '13 at 16:00
@Vega label='["test1", "test2", "test3", "test4", "test5"]' gets the job done. Although, I am now debating whether I should do it like that just for my custom label attribute. — codenamezero, Aug 16 '13 at 16:04
Creating the array manually really isn't a problem -> [**FIDDLE**](http://jsfiddle.net/9huDE/) — adeneo, Aug 16 '13 at 16:05
Posted the solution after combining Vega and adeneo solutions! See below. — codenamezero, Aug 16 '13 at 17:08

score 5 · Answer 1 · edited May 23 '17 at 11:49

As you're using jQuery, and custom attributes, the first thing to fix is the attributes:

Instead of:

<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']" />

You should use:

<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>

Be sure to also use valid JSON encoding for your data.

When you do that, you can access the values of the attributes with 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.

If you absolutely must leave the data as it was, and you can guarantee that the "strings" won't contain special characters, you could call $.parseJSON($('#helloworld').attr('data-label').replace("'", '"'));, but it will fail if the string contains quotes or other special characters that are not correctly encoded/escaped.

This is the best answer so far. Using single quotes on the outside is easier than having to escape the double quotes on the inside. — Matt Browne, Aug 16 '13 at 16:01

score 1 · Answer 2 · answered Aug 16 '13 at 15:54

1

Since your string looks like it's JSON you use JSON.parse. JSON doesn't allow ' so you can't parse the label.

Is there any chance you can change how that HTML is generated? If you generate it with proper HTML encoding you can easily parse it to JSON.

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

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

answered Aug 16 '13 at 15:54

Halcyon

57,230
10
89
128

1

As I mentioned in my question, it worked for value, but not label because it has single quote in there. :( – codenamezero Aug 16 '13 at 15:55

score 1 · Answer 3 · answered Aug 16 '13 at 15:57

1

Since it isn't valid JSON, one option would be:

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

where x is "['test1', 'test2', 'test3', 'test4', 'test5']"

The above will give you an array:

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

answered Aug 16 '13 at 15:57

techfoobar

65,616
14
114
135

score 1 · Answer 4 · answered Aug 16 '13 at 16:06

If you have control over the way that code is generated - try switching quots, so single quots would surround the label attribute:

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

But as zzzzBov suggested, turning custom attributes to data-* attributes would be the first step i'd go for. Take a look at this small article - http://www.broken-links.com/2010/11/18/data-attributes-in-html-and-jquery/.

score 0 · Accepted Answer · answered Aug 16 '13 at 17:07

Ok, so the final solution, with combination of something I found on the web plus @Vega and @adeneo answers, here we go...

Using the following jQuery method allows me to get everything by calling blank 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));

I can fetch all the attributes like this:

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

With that, I am keeping my element attributes EXACTLY as they way it was before (with HTML5 adjustment):

<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']"/>

I then use JSON.parse() to deal with the data-value, and then use @adeneo's method to handler the string array.

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

For my own other js code's purposes, I just trim off data- from the key and now everything is kosher!!

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

Now I can pass the data to my existing function!!!! :)

How I was calling my function before:

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);

Now I could use jQuery, find all element with certain class name, then just parse the attributes to trigger the call. :)

How do you convert a string representation of array back to array?

5 Answers5