Question

I am trying to break down a string into an array. This code below does do it, but I now need to break it down into a either a sub array.

Here is the String and the Code:

$(document).ready(function() {
var content='Image{BackgroundImage: Image.gif;Position: 0, 0;Width: 320;Height: 480;}Button{BackgroundImage: Button.gif;Position: 49, 80;Width: 216;Height: 71;}Button{BackgroundImage: Button2.gif;Transition: View2;Position: 65, 217;Width: 188;Height: 134;}Label{Position: 106, 91;Width: 96;Height: 34;Text: "Button";FontSize: 32;Color: 0.12549, 0.298039, 0.364706, 1;}';

var result = content.split('}');
result.pop();// removing the last empty element
console.log(result);
for(var i=0;i<result.length;i++)
{
    result[i]+='}';
    console.log(result);
        $('div').append('<li>' + result[i] + '</li>');
}
})

This out puts:

<li>Image{BackgroundImage: Image.gif;Position: 0, 0;Width: 320;Height: 480;}</li>
<li>Button{BackgroundImage: Button.gif;Position: 49, 80;Width: 216;Height: 71;}</li>
<li>Button{BackgroundImage: Button2.gif;Transition: View2;Position: 65, 217;Width: 188;Height: 134;}</li>
<li>Label{Position: 106, 91;Width: 96;Height: 34;Text: "Button";FontSize: 32;Color: 0.12549, 0.298039, 0.364706, 1;}</li>

What I need to do now is break it down even further so that I have the word prior to {} i.e Image for the first one

Ideally I would like the output to be a key/value object like this

    {
        "Controls": [{ "Image":"{BackgroundImage: Image.gif;Position: 0, 0;Width: 320;Height: 480;}", 
    "Button":"{BackgroundImage: Image.gif;Position: 0, 0;Width: 320;Height: 480;}", 
"Button":"{BackgroundImage: Image.gif;Position: 0, 0;Width: 320;Height: 480;}", 
    "Label":"{BackgroundImage: Image.gif;Position: 0, 0;Width: 320;Height: 480;}", }],
    }

My main goal is to be able to target either Key or the Value at the end of this.

Any help is appreciated

Answer 1

This should produce the output you want:

$(document).ready(function() {
    var content='Image{BackgroundImage: Image.gif;Position: 0, 0;Width: 320;Height: 480;}Button{BackgroundImage: Button.gif;Position: 49, 80;Width: 216;Height: 71;}Button{BackgroundImage: Button2.gif;Transition: View2;Position: 65, 217;Width: 188;Height: 134;}Label{Position: 106, 91;Width: 96;Height: 34;Text: "Button";FontSize: 32;Color: 0.12549, 0.298039, 0.364706, 1;}';

    var result = content.split('}');
    result.pop();// removing the last empty element
    var obj = {Controls:{}};

    $.each(result, function (i, v) {
        var key = v.split('{');
        var value = v.replace(key[0], '') + '}';

        if (key[0] !== 'Button') {
            obj.Controls[key[0]] = value;
        } else {
            if (!obj.Controls.hasOwnProperty('Buttons')) {
                obj.Controls['Buttons'] = [];
            }   
            obj.Controls.Buttons.push(value);
        }
    });

    console.log(obj);
});​

Working Demo: http://jsfiddle.net/fewds/TuNTV/2/

Output Example:

{
    "Controls": {
        "Image": "{BackgroundImage: Image.gif;Position: 0, 0;Width: 320;Height: 480;}",
        "Buttons": [
            "{BackgroundImage: Button.gif;Position: 49, 80;Width: 216;Height: 71;}",
            "{BackgroundImage: Button2.gif;Transition: View2;Position: 65, 217;Width: 188;Height: 134;}"
        ],
        "Label": "{Position: 106, 91;Width: 96;Height: 34;Text: \"Button\";FontSize: 32;Color: 0.12549, 0.298039, 0.364706, 1;}"
    }
}

If you just want to have multiple key occurrences increment you could use this:

$(document).ready(function() {
    var content='Image{BackgroundImage: Image.gif;Position: 0, 0;Width: 320;Height: 480;}Image{BackgroundImage: Image2.gif;Position: 0, 0;Width: 320;Height: 480;}Button{BackgroundImage: Button.gif;Position: 49, 80;Width: 216;Height: 71;}Button{BackgroundImage: Button2.gif;Transition: View2;Position: 65, 217;Width: 188;Height: 134;}Button{BackgroundImage: Button3.gif;Transition: View2;Position: 65, 217;Width: 188;Height: 134;}Label{Position: 106, 91;Width: 96;Height: 34;Text: "Button";FontSize: 32;Color: 0.12549, 0.298039, 0.364706, 1;}Label{Position: 106, 91;Width: 96;Height: 34;Text: "Button";FontSize: 32;Color: 0.12549, 0.298039, 0.364706, 1;}';

    var result = content.split('}');
    result.pop();// removing the last empty element
    var obj = {Controls:{}};

    function nextProp(key) {
        if(obj.Controls.hasOwnProperty(key)) {
            var num = key.match(/\d+$/);
            if (num) {
                return nextProp(key.replace(num[0], '') + (parseInt(num[0], 10) + 1));
            } else {
                return nextProp(key + '1');
            }
        }

        return key;
    }

    for (var i = 0; i < result.length; i++) {
        var key = result[i].split('{');
        var value = result[i].replace(key[0], '') + '}';
        obj.Controls[nextProp(key[0])] = value;
    }

    console.log(obj);
});​

Working Demo: http://jsfiddle.net/fewds/TuNTV/5/

Output Example:

{
    "Controls": {
        "Image": "{BackgroundImage: Image.gif;Position: 0, 0;Width: 320;Height: 480;}",
        "Image1": "{BackgroundImage: Image2.gif;Position: 0, 0;Width: 320;Height: 480;}",
        "Button": "{BackgroundImage: Button.gif;Position: 49, 80;Width: 216;Height: 71;}",
        "Button1": "{BackgroundImage: Button2.gif;Transition: View2;Position: 65, 217;Width: 188;Height: 134;}",
        "Button2": "{BackgroundImage: Button3.gif;Transition: View2;Position: 65, 217;Width: 188;Height: 134;}",
        "Label": "{Position: 106, 91;Width: 96;Height: 34;Text: \"Button\";FontSize: 32;Color: 0.12549, 0.298039, 0.364706, 1;}",
        "Label1": "{Position: 106, 91;Width: 96;Height: 34;Text: \"Button\";FontSize: 32;Color: 0.12549, 0.298039, 0.364706, 1;}"
    }
}