Question

我正在处理的情况是从JSON对象（表示为JavaScript对象）获取数据，使用JavaScript提取一些数据并使用该数据生成新对象。新对象还将包含新添加的数据。

假设我有以下对象：

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

从这个对象我想形成from：

的新对象

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

所以我需要构造一个函数来获取原始对象并使用以下规则吐出新对象：

从每个“框架”中删除所有“旋转”属性
重命名“frames”中的每个子对象以删除.png，以便将“grass.png”更改为“grass”
如果“框架”子对象名称不包含前导编号，则只需将其保留在新对象中即可
如果“frames”子对象名称确实包含一个前导号码，那么将每个后续号码分成一个新的子对象，其中父对象是“multi_frames”

我对JSON真的很陌生，所以任何关于如何从这开始的帮助都会很棒。我不想学习，所以当我得到一些帮助时，我将解决这个问题并不断更新我在这个答案的底部是如何做的。

还有一个问题，是否有一个JavaScript库可以使这个过程变得更容易？

感谢任何人的帮助。

更新

从人们的评论来看，这是我到目前为止：

HTML 的

<input type="file" id="files" name="files[]" />

*的 的JavaScript *

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);

我使用HTML5文件Api来获取JSON文件。我收到以下错误

Uncaught TypeError: Cannot set property 'frame2' of undefined fiddle > (anonymous function)

参考这一行：

if (newname in newframes) newframes[newname].multi_frames["frame" + m[2]] = frame.frame;

我看不出有什么问题，有什么想法吗？

我在这里有一个实时的JSFiddle：http://jsfiddle.net/jamiefearon/8kUYj/48/

现已修复：点击此处：http://jsfiddle.net/jamiefearon/8kUYj/50/

Answer 1

这应该这样做：

var oldframes = sprite_set.frames,
    newframes = {};
for (var framename in oldframes) {
    var m = framename.match(/^(.+?)(\d*)\.png$/); // not assuming it would not match
    var newname = m[1];
    var frame = oldframes[framename];
    if (! (newname in newframes)) {
        newframes[newname] = {
            sourceSize: frame.sourceSize
        };
        if (m[2])
            newframes[newname].multi_frames = {};
    }
    if (m[2])
        newframes[newname].multi_frames["frame"+m[2]] = frame.frame;
    else
        newframes[newname].frame = frame.frame;
}
sprite_set.frames = newframes;

从一个Javascript对象中提取数据并将其放入另一个Javascript对象中

更新

1 个答案: