将JSON对象映射到Javascript对象 [英] Mapping JSON Objects to Javascript Objects

问题描述

使用AJAX时，我倾向于以JSON对象（又称Javascript）的形式将对象从我的服务器传递给Javascript。我的Javascript中的某些函数依赖于我正在使用的特定类型的对象。例如，让我们使用电话号码。我有一个构造函数：

When using AJAX, I tend to pass objects from my server to Javascript in the form of JSON objects (aka Javascript). Certain functions within my Javascript rely on the specific type of object I am using. For instance, lets use a phone number for example. I have a constructor:

function PhoneNumber(number, type, isPrimary, contactId, id, className) {
    this.number = number;
    this.type = type;
    this.isPrimary = isPrimary;
    this.contactId = contactId;
    this.id = id;
    this.className = className;
}

我在Javascript中创建电话号码对象时使用的。在某些情况下，我不在JS中创建对象，我从服务器获取对象，因此它以具有完全相同字段的通用对象的形式出现。因此，当我的代码通过使用如下内容依赖于特定类型时：

Which I use when creating a phone number object in my Javascript. In some situations I don't create the object in JS, I get the object from the server so it comes in the form of a generic object with the exact same fields. So when my code relies on the specific type by using something such as this:

var objType = objArray[i].constructor.name;
var mappedObj;

switch(objType) {
    case 'PhoneNumber':
        currentArray = currentArray.phone;
        //Convert response to javascript object.
        mappedObj = mapPhone(jsonResponse[i]);
        break;
    case 'Email':
        currentArray = currentArray.email;
        mappedObj = mapEmail(jsonResponse[i]);
        break;
    case 'Address':
        currentArray = currentArray.address;
        mappedObj = mapAddress(jsonResponse[i]);
        break;
    case 'Website':
        currentArray = currentArray.website;
        mappedObj = mapWebsite(jsonResponse[i]);
}

在这种情况下，我检查对象构造函数的名称并设置某些变量基于该名称。如果我检查名称的对象是来自服务器的JSON，它只是给我一个通用的对象响应，因此代码不起作用。我通过为每个对象使用映射函数来解决这个问题，例如：

In this situation, I check the name of the objects constructor and set certain variables based on that name. If the object I check the name on is a JSON from the server, it simply gives me a generic "Object" response and thus the code does not work. I get around this by using a mapping function for each object such as:

function mapPhone(phoneObj) {
    var id = phoneObj.id;
    var contactId = phoneObj.contactId;
    var number = phoneObj.number;
    var type = phoneObj.type;
    var primary = phoneObj.isPrimary;
    var className = phoneObj.className;
    var phoneNumber = new PhoneNumber(number, type, primary, contactId, id, className);
    return phoneNumber;
}

这很好用，但对我来说似乎有点多余。这是解决JSON对象问题的最佳方法，还是有更好的解决方案？我理解这更像是我这样做是最好的方式类型的问题，但我在我的Javascript代码中不断重复这种类型的逻辑，我想我也可能会得到另一个或两个关于它的意见在我将来必须花费一小时的时间来修复它之前，这是正确的方法。

This works just fine, but to me seems a little redundant. Is this the best way to solve the JSON Object problem, or is there a better solution? I understand this is more of a "Am I doing this the best way possible" type of question, but I repeat this type of logic CONSTANTLY in my Javascript code and I figure I might as well get another opinion or two on whether or not its the proper way to do this before I have to spend hour upon hour fixing it in the future.

编辑：我最终接受了jQuery解决方案，因为我碰巧使用jQuery在我的项目中。然而，在找到jQuery选项之前，有多个解决方案对我有用。他们只是不那么干净和高效。

I ended up accepting a jQuery solution because I happen to use jQuery in my project. There are however multiple solutions that also worked for me before I found the jQuery option. They just weren't quite as clean and efficient.

推荐答案

以下要求您在对象和您的对象中具有相同的属性JSON对象。

The following requires you to have the same properties in your object and your JSON object.

var phoneNumber = $.extend(new PhoneNumber(), yourJSONObject);

这基本上会创建一个新的PhoneNumber对象，然后将JSON对象中的所有属性复制到它上面。 $ .extend（）方法来自jQuery，但您也可以使用类似于Underscore.js或其他js库/框架之一。

This basically creates a new PhoneNumber object and then copies all properties from your JSON object onto it. The $.extend() method is from jQuery, but you could also use as similar method from e.g. Underscore.js or one of the other js libraries/frameworks.

这篇关于将JSON对象映射到Javascript对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！