Question

I have a JSON object that is being passed to me as a String, but the Object in its String form contains duplicate properties. I need to temporarily add incrementing numbers to the Properties in order to avoid the problem of duplicate JSON properties. Once I am done editing the Object, I will JSON.Stringify the object back to a String and remove the numbers.

Here is the String I am passed:

{
    "View":{
        "Image":{
            "BackgroundImage":"Image.png",
             "Position":[0,0],
             "Width":320,
             "Height":480
        },
        "Button":{
            "BackgroundImage":"ButtonTop.png",
             "Position":[61,83],
             "Width":217,
             "Height":58
        },
        "Button":{
            "BackgroundImage":"ButtonBottom.png",
             "Position":[61,214],
             "Width":205,
             "Height":73
        },
        "TextField":{
            "BackgroundImage":"TextFieldLogin.png",
             "Position":[102,336],
             "Width":189,
             "Height":31
        },
        "Label":{
            "Position":[137,100],
             "Width":72,
             "Height":20,
             "Text":"Hi Steve",
             "FontSize":18,
             "Color":[0,0,0,1]
        },
        "Label":{
            "Position":[43,342],
             "Width":54,
             "Height":20,
             "Text":"Login:",
             "FontSize":18,
             "Color":[0,0,0,1]
        },
        "Label":{
            "Position":[115,234],
             "Width":54,
             "Height":20,
             "Text":"Button",
             "FontSize":18,
             "Color":[0,0,0,1]
        }
    }
}

Here is how I would like the output to be:

{
    "View_1":{
        "Image_1":{
            "BackgroundImage":"Image.png",
             "Position":[0,0],
             "Width":320,
             "Height":480
        },
        "Button_1":{
            "BackgroundImage":"ButtonTop.png",
             "Position":[61,83],
             "Width":217,
             "Height":58
        },
        "Button_2":{
            "BackgroundImage":"ButtonBottom.png",
             "Position":[61,214],
             "Width":205,
             "Height":73
        },
        "TextField_1":{
            "BackgroundImage":"TextFieldLogin.png",
             "Position":[102,336],
             "Width":189,
             "Height":31
        },
        "Label_1":{
            "Position":[137,100],
             "Width":72,
             "Height":20,
             "Text":"Hi Steve",
             "FontSize":18,
             "Color":[0,0,0,1]
        },
        "Label_2":{
            "Position":[43,342],
             "Width":54,
             "Height":20,
             "Text":"Login:",
             "FontSize":18,
             "Color":[0,0,0,1]
        },
        "Label_3":{
            "Position":[115,234],
             "Width":54,
             "Height":20,
             "Text":"Button",
             "FontSize":18,
             "Color":[0,0,0,1]
        }
    }
}

How could I use javascript .replace() to add the numbering on demand, and then remove the numbering on demand?

Answer 1

How’s this? I agree with the other voices here recommending that whoever is supplying this “JSON” be responsible for providing valid syntax, but barring that possibility this might get you started:

function formatJSON(input) {
  return input.replace(/"([^"]+?)":{(.+)}/g, function(string, key, value) {
    var dict = {};
    return '"' + key + '":{' + value.replace(/"([^"]+?)":{(.+?)}/g, function(string, key, value) {
      dict[key] = dict[key] == undefined ? 1 : ++dict[key];
      return '"' + key + '_' + dict[key] + '":{' + formatJSON(value) + '}';
    }) + '}';
  });
};

JSFiddle: http://jsfiddle.net/WYkAT/

Note that this will fail to rename all keys on a more complex, deeper JSON string. It could be easily modified to be more recursive and less specific to your particular situation, but would likely result in some performance degradation. If you need a fully fledged solution, I’d look to modifying an existing JSON.parse polyfill. Here are two (JSON2 and JSON3):

1. https://github.com/douglascrockford/JSON-js
2. https://github.com/bestiejs/json3