Parse String using split() into JSON or Object using Javascript of JQuery

Question

I am getting a passed a String that is in a unique format(is consistant though) that I need to be able to parse it so that I can modify pieces of it and then put it back together and pass it back as a string.

Here is the String im getting passed. The contents of it will change regularly, but each items structure will remain the same.

    View
{
    Name: View1;
    Image
    {
        BackgroundImage: Image.gif;
        Position: 0, 0;
        Width: 320;
        Height: 480;
    }

    Button
    {
        BackgroundImage: Button.gif;
        Transition: View2;
        Position: 49, 80;
        Width: 216;
        Height: 71;
    }

    Button
    {
        BackgroundImage: Button2.gif;
        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;
    }
    Scroll
    {
        Position: 106, 91;
        Width: 96;
        Height: 34;
        Button{
            BackgroundImage: Button2.gif;
            Position: 65, 217;
            Width: 188;
            Height: 134;
        }
        Button{
            BackgroundImage: Button2.gif;
            Position: 65, 217;
            Width: 188;
            Height: 134;
        }

    }

}

I think I need a recursive function that will seek out each k,v and put it into a proper Object or JSON file so that I can modify. The furthest that I have got is being able to Parse a single level and put it into an k,v object. Here is the code and the string it Parses.

modified string to work with my code(single level deep. I dropped View{} and Scroll{}):

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: 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;
        }

        var initObjectList = '<div id="prePop">';
        $.each(obj.Controls, function (k, v) {
        initObjectList += '<div class="inLineObjects">' + '<div class="key">' + k + '</div><br/>' + '<div  class="value">' + v + '</div>' +'</div>';

        });
    initObjectList += '</div>';
    $('#code').append(initObjectList)

RETURNS:

{
    "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;}"
    }
}

My problem is that the above doesnt allow me to a). target anything iside the {} because its all a value and b). it doesnt have any type of recursive ability to deal with the multiple levels i.e. View>button>scrollview

Any help on this would be greatly appreciated!

I know..Serious. The problem is that this string is being generated by another system we have. And there are subtle differences. Any ideas how to get it into proper json? I have been messing with this for days.
A recursive approach will probably be needed. How many levels of nesting are you potentially faced with?
@LeeTaylor at this time, the max amount of levels is 4 at this time.Thanks again for the help.
a recursive descent parser would be easy to write for this. en.wikipedia.org/wiki/Recursive_descent_parser

Jason Whitted · Accepted Answer · 2012-12-27 19:34:13Z

This should work:

str = str.replace(/(\w+)\s*\{/g, "$1:{"); // add in colon after each named object
str = str.replace(/\}(\s*\w)/g, "},$1"); // add comma before each new named object
str = str.replace(/;/g, ","); // swap out semicolons with commas
str = str.replace(/,(\s+\})/g, "$1"); // get rid of trailing commas
str = str.replace(/([\d\.]+(, [\d\.]+)+)/g, "[$1]"); // create number arrays
str = str.replace(/"/g, ""); // get rid of all double quotes
str = str.replace(/:\s+([^\[\d\{][^,]+)/g, ':"$1"');  // create strings

var obj;
eval("obj={" + str + "};");

alert(obj.View.Scroll.Button.Width);

The only problem with this is that your pseudo JSON doesn't have unique property names. For example, you have two Button properties under View. I'm not sure how you want to handle fixing that, although you could do it with another regular expression. But this should at least solve your initial object creation problem.

Check out this JSFiddle if you want to see it in action.

I think this will work. What about if the string is delivered without /n line breaks.
None of the regular expressions are using \n, instead they are using the more generic \s so this will work without the newline characters.
This works great. As far as identifying duplicate properties. if I call var str I see the multiple Buttons, but if I call var obj it only capture the last Button and removes the first. Is there anything you can add to the solution to prevent this? Maybe add an index or random field to it?

wvxvw · Answer 2 · 2012-12-27 22:32:55Z

function generalizeFunnyformat(raw) {
    "use strict";
    return ",;:{}".indexOf(raw) > -1? raw :
        " \t\r\n".indexOf(raw) > -1? " ": "a";
}

function infer(value) {
    "use strict";
    if (/^\d/.test(value)) {
        return parseFloat(value);
    } else if (/["']/.test(value)) {
        return value.substr(1, value.length - 2);
    } else {
        return value;
    }
}

function tokenEnd(state, first, second) {
    "use strict";
    state.token += first;
    if (!state.meta) {
        if (state.cursor &&
            state.cursor.hasOwnProperty(state.token)) {
            // This may be overly confident. What if primitives are also
            // allowed at the same nesting level?
            // Here we hope that coursor will be adjusted by bracket()
            // but if it doesn't happen, then we are lost.
            if (!(state.cursor[state.token] instanceof Array)) {
                state.cursor[state.token] = [state.cursor[state.token]];
            }
            state.extra = true;
            state.cursor = state.cursor[state.token];
            state.meta = state.cursor.length;
        } else {
            state.cursor[state.token] = null;
            state.meta = state.token;
        }
    } else if (state.appending) {
        if (state.cursor[state.meta] instanceof Array) {
            state.cursor[state.meta].push(state.token);
        } else {
            state.cursor[state.meta] =
                [state.cursor[state.meta], infer(state.token)];
        }
    } else {
        state.cursor[state.meta] = infer(state.token);
    }
    state.token = "";
}

function space(state, first, second) {
    "use strict";
    // noop
}

function token(state, first, secon) {
    "use strict";
    state.token += first;
}

function bracket(state, first, secon) {
    "use strict";
    var newCursor = { };
    state.cursor[state.meta] = newCursor;
    state.parents.unshift(state.cursor);
    state.cursor = newCursor;
    state.meta = "";
}

function close(state, first, second) {
    "use strict";
    state.cursor = state.parents[0];
    state.parents.shift();
    if (state.extra) {
        state.cursor = state.parents[0];
        state.parents.shift();
    }
    state.extra = false;
    state.appending = false;
}

function comma(state, first, second) {
    "use strict";
    state.appending = true;
}

function colon(state, first, second) {
    "use strict";
    state.appending = false;
}

function semi(state, first, second) {
    "use strict";
    if (state.token) {
        tokenEnd(state, "", second);
    }
    state.meta = "";
    state.appending = false;
}

function error(state, first, second) {
    "use strict";
    throw "Invalid character sequence: " + second +
        " cannot follow " + first;
}

function llparseFunnyFormat(source) {
    "use strict";
    var iterator, len = source.length - 1,
        first, second, genFirst, genSecond, handler,
        state = { result: null, cursor: { }, appending: false,
                  token: "", meta: null, parents: [], extra: false },
        parseTable = { "  ": space,
                       " :": space,
                       " a": space,
                       " ,": space,
                       " }": space,
                       " ;": space,
                       " {": space, // space
                       "aa": token,
                       "a ": tokenEnd,
                       "a:": tokenEnd,
                       "a;": tokenEnd,
                       "a{": tokenEnd,
                       "a,": tokenEnd,
                       "a}": error, // token
                       "{ ": bracket,
                       "{a": bracket,
                       "{}": bracket,
                       "{,": error,
                       "{:": error,
                       "{;": error,
                       "{{": error, // bracket
                       "} ": close,
                       "}}": close,
                       "}a": error,
                       "};": error,
                       "},": error,
                       "}:": error,
                       "}{": error, // close
                       ",,": error,
                       ",a": comma,
                       ", ": comma,
                       ",;": error,
                       ",:": error,
                       ",}": error,
                       ",{": error, // comma
                       "; ": semi,
                       ";a": semi,
                       ";}": semi,
                       ";,": error,
                       ";:": error,
                       ";;": error,
                       ";{": error, // semicolon
                       "::": error,
                       ":a": colon,
                       ": ": colon,
                       ":,": error,
                       ":;": error,
                       ":{": error,
                       ":}": error
                     };
    state.parents[0] = state.cursor;
    state.result = state.cursor;
    for (iterator = 0; iterator < len; iterator++) {
        first = source[iterator];
        second = source[iterator + 1];
        genFirst = generalizeFunnyformat(first);
        genSecond = generalizeFunnyformat(second);
        handler = parseTable[genFirst + genSecond];
        handler(state, first, second);
    }
    return state.result;
}

var test =
"View" +
"{" +
"    Name: View1;" +
"    Image" +
"    {" +
"        BackgroundImage: Image.gif;" +
"        Position: 0, 0;" +
"        Width: 320;" +
"        Height: 480;" +
"    }" +
"" +
"    Button" +
"    {" +
"        BackgroundImage: Button.gif;" +
"        Transition: View2;" +
"        Position: 49, 80;" +
"        Width: 216;" +
"        Height: 71;" +
"    }" +
"" +
"    Button" +
"    {" +
"        BackgroundImage: Button2.gif;" +
"        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;" +
"    }" +
"    Scroll" +
"    {" +
"        Position: 106, 91;" +
"        Width: 96;" +
"        Height: 34;" +
"        Button{" +
"            BackgroundImage: Button2.gif;" +
"            Position: 65, 217;" +
"            Width: 188;" +
"            Height: 134;" +
"        }" +
"        Button{" +
"            BackgroundImage: Button2.gif;" +
"            Position: 65, 217;" +
"            Width: 188;" +
"            Height: 134;" +
"        }" +
"" +
"    }" +
"" +
"}";

llparseFunnyFormat(test);

The above is a fair LL(1) parser for what I could understand from your example. It looks like it does what you need, but it may be rough around the edges. Especially you may want to work on the infer() function to make a better inference of the data type it contains.

It also doesn't use eval() - which you obviously don't want to use in the data obtained through RPC.

Also, if you look into the parseTable you will see how badly the grammar was designed for this format. It has too many invalid products (even JSON is better!). So it would make total sense to ask the person who is providing you with this data to just use JSON, because what they made is certainly worse.

EDIT: Updated the code to aggregate identically named keys into arrays.

specialscope · Answer 3 · 2012-12-27 18:26:01Z

up vote -1 down vote

Okay this should work. Follow exact steps.

Remove whitespaces and linebreaks.

Replace semicolon with ;"" (semicolon,dblquote, dblquote)

Replace colon with ":" (double quote colon dblquote)

Replace opening brace with :{"

Replace closing brace with }"

You should be done.

answered Dec 27 '12 at 18:26

specialscope
1,25448

	No, it won't, the data above is a superset of what JSON can do. It is not possible to convert them, unless you loose some original data. – wvxvw Dec 27 '12 at 18:27
	BTW. I didn't downvote. This isn't a very easy question and it is easy to make mistake. Although, perhaps, it's OP's mistake. – wvxvw Dec 27 '12 at 19:18
	You would also need to cope with commas between braces, etc. – Lee Taylor Dec 27 '12 at 19:23
	The primary purpose of this is to be able to generate, target, modify the string via a web form. Once its been modified, its going to be converted back into this original format and passed back. If there is a better way to target the k,v im all ears. – Rob Dec 27 '12 at 19:26
	@specialscope could you assist with that code? I can give it a try. – Rob Dec 27 '12 at 19:29

add comment (requires an account with 50 reputation)

asked	7 months ago
viewed	697 times
active	7 months ago

Parse String using split() into JSON or Object using Javascript of JQuery

3 Answers

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript jquery json split or ask your own question.

Parse String using split() into JSON or Object using Javascript of JQuery

3 Answers

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript jquery json split or ask your own question.

Related