CODEWITHSUNDEEP
javascriptjqueryarraysparsing
codenamezero
codenamezero

Reputation: 3079

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

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?

Upvotes: 3

Views: 1942

Answers (5)

zzzzBov
zzzzBov

Reputation: 179046

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.

Upvotes: 5

codenamezero
codenamezero

Reputation: 3079

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. :)

Upvotes: 0

Max Malyk
Max Malyk

Reputation: 860

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

Upvotes: 1

techfoobar
techfoobar

Reputation: 66663

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

Upvotes: 1

Halcyon
Halcyon

Reputation: 57709

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

Upvotes: 1

Related Questions