Extracting data from one Javascript object and putting it into another
<p>The situation I'm dealing with is taking the the data from a JSON object (represented as a JavaScript object) extracting some of the data and with that data producing a new object, using JavaScript. The new object will also consist of new added data. </p>

<p>Lets say I have the following object:</p>

<pre><code>sprite_set = {
    "frames": {
        "grass.png": {
            "frame": {
                "x": 1766,
                "y": 202
            },
            "rotated": false,
            "sourceSize": {
                "w": 128,
                "h": 128
            }
        },
        "dirt1.png": {
            "frame": {
                "x": 1766,
                "y": 202
            },
            "rotated": false,
            "sourceSize": {
                "w": 128,
                "h": 128
            }
        },
        "dirt2.png": {
            "frame": {
                "x": 2766,
                "y": 402
            },
            "rotated": false,
            "sourceSize": {
                "w": 128,
                "h": 128
            }
        }                
    }
};
</code></pre>

<p>From this object I want to form a new object of the from:</p>

<pre><code>sprite_set = {
    "frames": {
        "grass": {
            "frame": {
                "x": 1766,
                "y": 202
            },
            "sourceSize": {
                "w": 128,
                "h": 128
            }
        },
        "dirt": {
            "multi_frames": {
                "frame1": {
                    "x": 1766,
                    "y": 202
                },
                "frame2": {
                    "x": 2766,
                    "y": 402
                }
             },
            "sourceSize": {
                "w": 128,
                "h": 128
            }
        }       
    }
};
</code></pre>

<p>So I need to construct a function that takes the raw object and spits out the new object using the following rules:</p>

<ol>
<li>
  Remove all "rotated" properties from each "frames"
</li>
<li>
  Rename each sub-object in "frames" to remove the .png so "grass.png" will be changed to "grass"
</li>
<li>
  If a "frames" sub-objects name contains no leading number then just place it unchanged in the new object
</li>
<li>
  If a "frames" sub-objects name does contains a leading number then break each subsequent number into a new subobject whos parent is "multi_frames"
</li>
</ol>

<p>I am really completely new to JSON so any help on just how to start with this would be great. I wan't to learn so as I get some help I will tackle this problem and constantly give an update to how I'm doing it at the bottom of this answer.</p>

<p>One further question, is there a JavaScript library that can make this process a lot easier?   </p>

<p>Thanks for anyone's help.</p>

<h2>Update</h2>

<p>From help from people comments this is that I have so far:</p>

<p><em>HTML</em></p>

<pre><code>&lt;input type="file" id="files" name="files[]" /&gt;
</code></pre>

<p>*<strong><em>JavaScript</em>*</strong></p>

<pre><code>var JsonObj = null;

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
    f = files[0];
    var reader = new FileReader();

    // Closure to capture the file information.
    reader.onload = (function (theFile) {
        return function (e) {
            JsonObj = e.target.result
            console.log(JsonObj);
            var parsedJSON = JSON.parse(JsonObj);

            var oldframes = parsedJSON.frames,
                newframes = {};
            for (var framename in oldframes) {
                // var m = framename.match(/(.*)\.[^.]+$/);
                var m = framename.match(/^(.+?)(\d*)\.png$/);
                var newname = m[1];
                var frame = oldframes[framename];
                if (newname in newframes) newframes[newname].multi_frames["frame" + m[2]] = frame.frame;
                else newframes[newname] = {
                    frame: frame.frame,
                    sourcesize: frame.sourcsize
                };
                // or, if it's OK to mutate the old objects, just:
                // delete frame.rotated;
                // newframes[newname] = frame;
            }
            parsedJSON.frames = newframes;

            JsonObj = JSON.stringify(parsedJSON, null, 4)
            console.log(JsonObj);

        };
    })(f);

    // Read in JSON as a data URL.
    reader.readAsText(f, 'UTF-8');
}



document.getElementById('files').addEventListener('change', handleFileSelect, false);
</code></pre>

<p>I use the HTML5 File Api to get the JSON file. I get the following error </p>

<p><code>Uncaught TypeError: Cannot set property 'frame2' of undefined fiddle &gt;
(anonymous function)</code></p>

<p>in reference to the line:</p>

<p><code>if (newname in newframes) newframes[newname].multi_frames["frame" + m[2]] = frame.frame;</code></p>

<p>I can't see what the problem is, any ideas anyone? </p>

<p>I have a live JSFiddle here: <code>http://jsfiddle.net/jamiefearon/8kUYj/48/</code></p>

<p><strong>Now fixed: Fiddle here: <a href="http://jsfiddle.net/jamiefearon/8kUYj/50/" rel="nofollow">http://jsfiddle.net/jamiefearon/8kUYj/50/</a></strong></p>
