Mappage d'objets JSON sur des objets Javascript

Lors de l'utilisation de l'AJAX, j'ai tendance à passer des objets à partir de mon serveur de Javascript dans la forme des objets JSON (aka Javascript). Certaines fonctions au sein de mon Javascript compter sur le type spécifique de l'objet que j'utilise. Par exemple, permet d'utiliser un numéro de téléphone par exemple. J'ai un constructeur:

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

Que j'utilise lors de la création d'un numéro de téléphone de l'objet dans mon Javascript. Dans certaines situations, je n'ai pas créer l'objet en JS, je reçois l'objet à partir du serveur de sorte qu'il se présente sous la forme d'un objet générique, avec les mêmes champs. Alors, quand mon code s'appuie sur le type spécifique en utilisant quelque chose comme ceci:

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

Dans cette situation, je vérifie le nom des objets constructeur et de définir certaines variables de ce nom. Si l'objet que j'vérifier le nom sur un JSON à partir du serveur, tout simplement, il me donne un générique de "l'Objet" de la réponse et donc le code ne fonctionne pas. Je contourner ce problème en utilisant une fonction de mappage pour chaque objet, tels que:

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

Cela fonctionne bien, mais me semble un peu redondant. Est-ce la meilleure façon de résoudre l'Objet JSON problème, ou est-il une meilleure solution? Je comprends que c'est plus un "Suis-je le faire de la meilleure façon possible" type de question, mais je le répète, ce type de logique CONSTAMMENT dans mon code Javascript et je me dis que je pourrais aussi bien avoir un autre avis ou deux sur si oui ou non ses la bonne façon de le faire avant d'avoir à passer des heures en le fixant droit dans l'avenir.

EDIT: j'ai fini par accepter un jQuery solution parce qu'il m'arrive d'utiliser jQuery dans mon projet. Il y a cependant plusieurs solutions qui a également travaillé pour moi avant que je trouve le jQuery option. Elles n'étaient tout simplement pas aussi propre et efficace.

source d'informationauteur ryandlf

javascript json

25

Suivantes vous oblige à avoir les mêmes propriétés de votre objet et votre objet JSON.
```
var phoneNumber = $.extend(new PhoneNumber(), yourJSONObject);
```
En fait cela crée un nouveau Numéro de l'objet et ensuite des copies de toutes les propriétés de votre objet JSON sur elle. Le $.extend() méthode est à partir de jQuery, mais vous pouvez également l'utiliser comme méthode similaire, par exemple, d'Underscore.js ou l'un des autres bibliothèques js/cadres.

Cette question semblable a beaucoup de réponses intéressantes:

Analyser Chaîne JSON dans un Prototype d'Objet en JavaScript

Basée sur l'affiche de sa propre réponse, je pense que ce serait une solution efficace pour vous:

function recastJSON(jsonObject) {
    //return generic object if objectType is not specified
    if (!jsonObject.objectType)
        return jsonObject;

    //otherwise create a new object of type specified
    var obj = eval('new '+jsonObject.objectType+'()');
    for(var i in jsonObject)
        obj[i] = jsonObject[i];
    return obj;
}

Vous aurez besoin d'ajouter objectType pour les objets JSON que vous recevez à définir le javascript de la classe à instancier. Puis, quand vous appelez cette fonction, il sera jeté l'objet de ce type et de copier les données sur (y compris la variable "objectType').

À l'aide de votre numéro de téléphone par exemple, votre code devrait ressembler à ceci:

//generic object from JSON
var genericObject = {objectType:'PhoneNumber', number:'555-555-5555', type:'home', primary:true, contactId:123, id:1234, className:'stdPhone'};
var phoneObject = recastJSON(genericObject);

Autant que je sache, en tout ce qui n'est pas IE, vous pouvez le faire:

//define a class
var Foo = function(name) {
  this.name = name;
}
//make a method
Foo.prototype.shout = function() {
  return "I am " + this.name;
}
//make a simple object from JSON:
var x = JSON.parse('{ "name": "Jason" }');
//force its class to be Foo
x.__proto__ = Foo.prototype;
//the method works
x.shout();

Malheureusement, IE ne prend pas en charge la __proto__ accesseur, de sorte que vous aurez besoin de faire est d'abord de créer un vide d'instance de votre objet, puis il suffit de copier le tout sur:

//make a simple object from JSON:
var x = JSON.parse('{ "name": "Jason" }');
//make an empty Foo
var y = Object.create(Foo.prototype);
//copy stuff over
for (a in x) {
  y[a] = x[a];
}
y.shout();

Ces deux approches sont un peu plus générique que votre mapWhatever fonctions, de garder au SEC.

Si pas de soutenir les navigateurs plus anciens est ok, Vous pouvez utiliser Object.create pour effectuer le mappage pour vous. (chute de la cale—au moins la cale au MDN sera pas fixer les navigateurs plus anciens, depuis que la cale n'accepte pas le deuxième paramètre.)

DÉMO

function makeThisExtend(obj, CtorFunc) {
    for (var k in obj)
        if ({}.hasOwnProperty.call(obj, k))
            obj[k] = { value: obj[k] };

    return Object.create(CtorFunc.prototype, obj);
}

var objFromServer = { Number: "123", id: 5 };
objFromServer = makeThisExtend(objFromServer, PhoneNumber);


alert(objFromServer.Number + " " + objFromServer.id); //123 5
alert(objFromServer.constructor); //function PhoneNumber ...

Vous devez vous connecter pour publier un commentaire.