Désérialiser un JSON dans un objet JavaScript

J'ai une chaîne dans une application serveur Java accessible à L'aide D'AJAX. Cela ressemble à ce qui suit:

var json = [{
    "adjacencies": [
        {
          "nodeTo": "graphnode2",
          "nodeFrom": "graphnode1",
          "data": {
            "$color": "#557EAA"
          }
        }
    ],
    "data": {
      "$color": "#EBB056",
      "$type": "triangle",
      "$dim": 9
    },
    "id": "graphnode1",
    "name": "graphnode1"
},{
    "adjacencies": [],
    "data": {
      "$color": "#EBB056",
      "$type": "triangle",
      "$dim": 9
    },
    "id": "graphnode2",
    "name": "graphnode2"
}];

Lorsque la chaîne est extraite du serveur, Existe-t-il un moyen facile de transformer cela en un objet JavaScript vivant (ou un tableau)? Ou dois-je diviser manuellement la chaîne et construire mon objet manuellement?

227
demandé sur alex 2011-06-27 02:35:16

8 réponses

Les navigateurs modernes prennent en charge JSON.parse().

var arr_from_json = JSON.parse( json_string );

Dans les navigateurs qui ne le font pas, vous pouvez inclure le json2 bibliothèque.

349
répondu user113716 2011-06-26 22:37:42

Le but de JSON est que les chaînes JSON peuvent être converties en objets natifs sans rien faire. Vérifiez ce lien

, Vous pouvez utiliser soit eval(string) ou JSON.parse(string).

Cependant, eval est risqué. De json.org:

La fonction eval est très rapide. Cependant, il peut compiler et exécuter N'importe quel programme JavaScript, donc il peut y avoir des problèmes de sécurité. L'utilisation d'eval est indiquée lorsque la source est fiable et compétente. Il est beaucoup plus sûr d'utiliser un analyseur JSON. Dans les applications web sur XMLHttpRequest, la communication est autorisée qu'à la même origine que fournissez cette page, donc elle est approuvée. Mais il pourrait ne pas être compétent. Si le serveur n'est pas rigoureux dans son encodage JSON, ou s'il ne valide pas scrupuleusement toutes ses entrées, ensuite, il pourrait fournir un texte JSON invalide qui pourrait transporter un script dangereux. La fonction eval exécuterait le script, libérant sa malice.

24
répondu Abhinav 2017-12-06 11:58:13

Faites comme jQuery! (l'essence)

function parseJSON(data) {
    return window.JSON && window.JSON.parse ? window.JSON.parse( data ) : (new Function("return " + data))(); 
}
// testing
obj = parseJSON('{"name":"John"}');
alert(obj.name);

De cette façon, vous n'avez pas besoin de bibliothèque externe et cela fonctionne toujours sur les anciens navigateurs.

14
répondu Ravan 2011-06-26 22:56:08

Pour collecter tous les éléments d'un tableau et retourner un objet json

collectData: function (arrayElements) {

        var main = [];

        for (var i = 0; i < arrayElements.length; i++) {
            var data = {};
            this.e = arrayElements[i];            
            data.text = arrayElements[i].text;
            data.val = arrayElements[i].value;
            main[i] = data;
        }
        return main;
    },

POUR analyser les mêmes données nous traversons comme ceci

dummyParse: function (json) {       
        var o = JSON.parse(json); //conerted the string into JSON object        
        $.each(o, function () {
            inner = this;
            $.each(inner, function (index) {
                alert(this.text)
            });
        });

}
6
répondu Tarun Gupta 2013-09-12 07:24:26

Vous pouvez également utiliser eval() mais {[7] } est plus sûr et plus facile, alors pourquoi le feriez-vous?

Bon et fonctionne

var yourJsonObject = JSON.parse(json_as_text);

, je ne vois aucune raison pourquoi vous préférez utiliser eval. Cela ne fait que mettre votre application en danger.

Cela dit-ceci est {[24] } également possible.

Mauvais -, mais aussi des œuvres

var yourJsonObject = eval(json_as_text);

Pourquoi eval est-ce une mauvaise idée?

Prenons l'exemple suivant.

Un tiers ou un utilisateur fourni Données de chaîne JSON.

var json = `
[{
    "adjacencies": [
        {
          "nodeTo": function(){
            return "delete server files - you have been hacked!";
          }(),
          "nodeFrom": "graphnode1",
          "data": {
            "$color": "#557EAA"
          }
        }
    ],
    "data": {
      "$color": "#EBB056",
      "$type": "triangle",
      "$dim": 9
    },
    "id": "graphnode1",
    "name": "graphnode1"
},{
    "adjacencies": [],
    "data": {
      "$color": "#EBB056",
      "$type": "triangle",
      "$dim": 9
    },
    "id": "graphnode2",
    "name": "graphnode2"
}]
`;

Votre script côté serveur traite ces données.

À l'Aide de JSON.parse:

window.onload = function(){
  var placeholder = document.getElementById('placeholder1');
  placeholder.innerHTML = JSON.parse(json)[0].adjacencies[0].nodeTo;
}

Lancera:

Uncaught SyntaxError: Unexpected token u in JSON at position X. 

La fonction ne sera pas exécutée.

Vous êtes en sécurité.

À l'Aide de eval():

window.onload = function(){
  var placeholder = document.getElementById('placeholder1');
  placeholder.innerHTML = eval(json)[0].adjacencies[0].nodeTo;
}

Exécutera la fonction et retournera le texte.

Si je remplace cette fonction inoffensive par une qui supprime les fichiers du dossier de votre site Web, vous avez été piraté. Pas d'erreurs/avertissements va être lancé dans cet exemple.

Vous N'êtes pas en sécurité.

J'ai été capable de manipuler une chaîne de texte JSON afin qu'elle agisse comme une fonction qui s'exécutera sur le serveur.

eval(JSON)[0].adjacencies[0].nodeTo s'attend à traiter une chaîne JSON mais, en réalité, nous venons d'exécuter une fonction sur notre serveur.

Cela pourrait également être évité si nous vérifions côté serveur toutes les données fournies par l'utilisateur avant de les transmettre à une fonction eval(), mais pourquoi ne pas simplement utiliser L'outil intégré pour analyser JSON et éviter tous ces problèmes et le danger?

3
répondu DevWL 2017-11-04 06:25:36

Et si vous voulez aussi que l'objet désérialisé ait des fonctions, vous pouvez utiliser mon petit outil: https://github.com/khayll/jsmix

//first you'll need to define your model
var GraphNode = function() {};
GraphNode.prototype.getType = function() {
   return this.$type;
}

var Adjacency = function() {};
Adjacency.prototype.getData =n function() {
    return this.data;
}

//then you could say:
var result = JSMix(jsonData)
    .withObject(GraphNode.prototype, "*")
    .withObject(Adjacency.prototype, "*.adjacencies")
    .build();

//and use them
console.log(result[1][0].getData());
1
répondu fishgen 2015-09-06 23:03:42

Si vous collez la chaîne côté serveur dans le code html, vous n'avez pas besoin de rien faire:

Pour java simple dans jsp:

var jsonObj=<%=jsonStringInJavaServlet%>;

Pour les entretoises de largeur jsp:

var jsonObj=<s:property value="jsonStringInJavaServlet" escape="false" escapeHtml="false"/>;
0
répondu surfealokesea 2013-06-20 14:20:48

Je pense que cela devrait aider:

Les documentations prouvent également que vous pouvez utiliser require () pour les fichiers json: https://www.bennadel.com/blog/2908-you-can-use-require-to-load-json-javascript-object-notation-files-in-node-js.htm

var jsonfile = require("./path/to/jsonfile.json");
node = jsonfile.adjacencies.nodeTo;
node2 = jsonfile.adjacencies.nodeFrom;
node3 = jsonfile.adjacencies.data.$color;
//other things.
-3
répondu PSXGamerPro1 2016-12-13 02:52:23