Transformer en toute sécurité une chaîne JSON en objet

Étant donné une chaîne de données JSON, comment puis-je transformer cette chaîne en un objet JavaScript en toute sécurité?

Évidemment, je peux le faire en toute sécurité avec quelque chose comme:

var obj = eval("(" + json + ')');

mais cela me rend vulnérable à la chaîne JSON contenant un autre code, qu'il semble très dangereux d'évaluer simplement.

JSON.parse(jsonString) est une approche JavaScript pure tant que vous pouvez garantir un navigateur raisonnablement moderne.

La méthode jQuery est désormais obsolète. Utilisez plutôt cette méthode:

let jsonObject = JSON.parse(jsonString);

Réponse originale utilisant la fonctionnalité jQuery obsolète :

Si vous utilisez jQuery, utilisez simplement:

jQuery.parseJSON( jsonString );

C'est exactement ce que vous recherchez (voir la documentation jQuery ).

Cette réponse est pour IE <7, pour les navigateurs modernes, vérifiez la réponse de Jonathan ci-dessus.

Cette réponse est obsolète et la réponse de Jonathan ci-dessus ( JSON.parse(jsonString)) est maintenant la meilleure réponse .

JSON.org possède des analyseurs JSON pour de nombreuses langues, dont quatre différentes pour JavaScript. Je pense que la plupart des gens considéreraient json2.js comme leur implémentation goto.

Utilisez l'exemple de code simple dans " JSON.parse () ":

var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}';
var contact = JSON.parse(jsontext);

et l'inverser:

var str = JSON.stringify(arr);

Je ne suis pas sûr des autres façons de le faire, mais voici comment vous le faites dans Prototype (tutoriel JSON) .

new Ajax.Request('/some_url', {
  method:'get',
  requestHeaders: {Accept: 'application/json'},
  onSuccess: function(transport){
    var json = transport.responseText.evalJSON(true);
  }
});

L'appel evalJSON()avec true comme argument purifie la chaîne entrante.

Cela semble être le problème:

Une entrée reçue via Ajax websocket, etc., et elle sera au format String, mais vous devez savoir si elle l'est JSON.parsable. Le problème est que, si vous l'exécutez toujours JSON.parse, le programme PEUT continuer "avec succès" mais vous verrez toujours une erreur lancée dans la console avec le redouté "Error: unexpected token 'x'".

var data;

try {
  data = JSON.parse(jqxhr.responseText);
} catch (_error) {}

data || (data = {
  message: 'Server error, please retry'
});

Si vous utilisez jQuery , vous pouvez également utiliser:

$.getJSON(url, function(data) { });

Ensuite, vous pouvez faire des choses comme

data.key1.something
data.key1.something_else

etc.

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

Le rappel est transmis aux données renvoyées, qui seront un objet ou un tableau JavaScript tel que défini par la structure JSON et analysé à l'aide de la $.parseJSON()méthode.

Juste pour le plaisir, voici un moyen d'utiliser une fonction:

 jsonObject = (new Function('return ' + jsonFormatData))()

L'utilisation JSON.parseest probablement la meilleure façon.

Voici un exemple de démonstration en direct .

var jsonRes = '{ "students" : [' +
          '{ "firstName":"Michel" , "lastName":"John" ,"age":18},' +
          '{ "firstName":"Richard" , "lastName":"Joe","age":20 },' +
          '{ "firstName":"James" , "lastName":"Henry","age":15 } ]}';
var studentObject = JSON.parse(jsonRes);

La façon la plus simple d'utiliser la parse()méthode:

var response = '{"result":true,"count":1}';
var JsonObject= JSON.parse(response);

Ensuite, vous pouvez obtenir les valeurs des éléments JSON, par exemple:

var myResponseResult = JsonObject.result;
var myResponseCount = JsonObject.count;

Utilisation de jQuery comme décrit dans la jQuery.parseJSON()documentation:

JSON.parse(jsonString);

Essayez d'utiliser la méthode avec cet objet Data. ex: Data='{result:true,count:1}'

try {
  eval('var obj=' + Data);
  console.log(obj.count);
}
catch(e) {
  console.log(e.message);
}

Cette méthode aide vraiment dans Nodejs lorsque vous travaillez avec la programmation de port série

J'ai trouvé une "meilleure" façon:

Dans CoffeeScript:

try data = JSON.parse(jqxhr.responseText)
data ||= { message: 'Server error, please retry' }

En Javascript:

var data;

try {
  data = JSON.parse(jqxhr.responseText);
} catch (_error) {}

data || (data = {
  message: 'Server error, please retry'
});

L'analyse JSON est toujours pénible. Si l'entrée n'est pas celle attendue, elle génère une erreur et bloque ce que vous faites.

Vous pouvez utiliser la petite fonction suivante pour analyser en toute sécurité votre entrée. Il transforme toujours un objet même si l'entrée n'est pas valide ou est déjà un objet, ce qui est préférable dans la plupart des cas:

JSON.safeParse = function (input, def) {
  // Convert null to empty object
  if (!input) {
    return def || {};
  } else if (Object.prototype.toString.call(input) === '[object Object]') {
    return input;
  }
  try {
    return JSON.parse(input);
  } catch (e) {
    return def || {};
  }
};

JSON.parse(jsonString);

json.parse se transformera en objet.

Si nous avons une chaîne comme celle-ci:

"{\"status\":1,\"token\":\"65b4352b2dfc4957a09add0ce5714059\"}"

alors nous pouvons simplement utiliser JSON.parsedeux fois pour convertir cette chaîne en un objet JSON:

var sampleString = "{\"status\":1,\"token\":\"65b4352b2dfc4957a09add0ce5714059\"}"
var jsonString= JSON.parse(sampleString)
var jsonObject= JSON.parse(jsonString)

Et nous pouvons extraire des valeurs de l'objet JSON en utilisant:

// instead of last JSON.parse:
var { status, token } = JSON.parse(jsonString);

Le résultat sera:

status = 1 and token = 65b4352b2dfc4957a09add0ce5714059

JSON.parse() convertit toute chaîne JSON passée dans la fonction en un objet JSON.

Pour mieux le comprendre, appuyez sur F12pour ouvrir «Inspecter l'élément» dans votre navigateur et accédez à la console pour écrire les commandes suivantes:

var response = '{"result":true,"count":1}'; //sample json object(string form)
JSON.parse(response); //converts passed string to JSON Object.

Exécutez maintenant la commande:

console.log(JSON.parse(response));

Vous obtiendrez une sortie en tant qu'objet {result: true, count: 1}.

Pour utiliser cet objet, vous pouvez l'affecter à la variable, peut-être obj:

var obj = JSON.parse(response);

En utilisant objet l' .opérateur point ( ), vous pouvez accéder aux propriétés de l'objet JSON.

Essayez d'exécuter la commande:

console.log(obj.result);

Documentation officielle :

La JSON.parse()méthode analyse une chaîne JSON, construisant la valeur ou l'objet JavaScript décrit par la chaîne. Une reviverfonction facultative peut être fournie pour effectuer une transformation sur l'objet résultant avant son retour.

Syntaxe:

JSON.parse(text[, reviver])

Paramètres:

text : La chaîne à analyser en JSON. Voir l'objet JSON pour une description de la syntaxe JSON.

reviver (optional) : S'il s'agit d'une fonction, elle prescrit comment la valeur produite à l'origine par l'analyse est transformée, avant d'être renvoyée.

Valeur de retour

Objet correspondant au texte JSON donné.

Exceptions

Lève une exception SyntaxError si la chaîne à analyser n'est pas JSON valide.

La conversion de l'objet en JSON, puis son analyse, fonctionne pour moi, comme:

JSON.parse(JSON.stringify(object))

Analysez la chaîne JSON avec JSON.parse()et les données deviennent un objet JavaScript:

JSON.parse(jsonString)

Ici, JSON représente pour traiter l'ensemble de données JSON.

Imaginez que nous ayons reçu ce texte d'un serveur Web:

'{ "name":"John", "age":30, "city":"New York"}'

Pour analyser un objet JSON:

var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}'); 

Voici objl'objet JSON respectif qui ressemble à:

{ "name":"John", "age":30, "city":"New York"}

Pour récupérer une valeur, utilisez l' .opérateur:

obj.name // John
obj.age //30

Convertissez un objet JavaScript en chaîne avec JSON.stringify().

Juste pour analyser la couverture pour différents types d'entrée

Analysez les données avec JSON.parse (), et les données deviennent un objet JavaScript.

var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');

Lors de l'utilisation de JSON.parse () sur un JSON dérivé d'un tableau, la méthode renvoie un tableau JavaScript au lieu d'un objet JavaScript.

var myArr = JSON.parse(this.responseText);
console.log(myArr[0]);

Les objets de date ne sont pas autorisés dans JSON. Pour les dates, faites quelque chose comme ça

var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);

Les fonctions ne sont pas autorisées dans JSON. Si vous devez inclure une fonction, écrivez-la sous forme de chaîne.

var text = '{ "name":"John", "age":"function () {return 30;}", "city":"New York"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");

Question plus ancienne, je sais, mais personne ne remarque cette solution en utilisant new Function(), une fonction anonyme qui renvoie les données.

Juste un exemple:

 var oData = 'test1:"This is my object",test2:"This is my object"';

 if( typeof oData !== 'object' )
  try {
   oData = (new Function('return {'+oData+'};'))();
  }
  catch(e) { oData=false; }

 if( typeof oData !== 'object' )
  { alert( 'Error in code' ); }
 else {
        alert( oData.test1 );
        alert( oData.test2 );
      }

C'est un peu plus sûr car il s'exécute à l'intérieur d'une fonction et ne compile pas directement dans votre code. Donc, s'il y a une déclaration de fonction à l'intérieur, elle ne sera pas liée à l'objet window par défaut.

Je l'utilise pour «compiler» les paramètres de configuration des éléments DOM (par exemple l'attribut de données) de manière simple et rapide.

Sommaire:

Javascript (navigateur et NodeJS) ont un JSONobjet intégré . Sur cet objet sont 2 méthodes pratiques pour traiter JSON. Ce sont les suivants:

1. JSON.parse() Prend JSONcomme argument, retourne un objet JS
2. JSON.stringify() Prend l'objet JS comme argument renvoie l' JSONobjet

Autres applications:

En outre, pour les traiter très facilement, JSONils peuvent être utilisés à d'autres fins. La combinaison des deux JSONméthodes nous permet de créer très facilement des clones profonds de tableaux ou d'objets. Par exemple:

let arr1 = [1, 2, [3 ,4]];
let newArr = arr1.slice();

arr1[2][0] = 'changed'; 
console.log(newArr); // not a deep clone

let arr2 = [1, 2, [3 ,4]];
let newArrDeepclone = JSON.parse(JSON.stringify(arr2));

arr2[2][0] = 'changed'; 
console.log(newArrDeepclone); // A deep clone, values unchanged

Vous pouvez également utiliser la reviverfonction pour filtrer.

var data = JSON.parse(jsonString, function reviver(key, value) {
   //your code here to filter
});

Pour plus d'informations, lisez JSON.parse.

JSON.parse est la bonne façon de convertir une chaîne en objet, mais si la chaîne qui est analysée n'est pas un objet ou si la chaîne n'est pas correcte, elle générera une erreur qui provoquera la rupture du reste du code, ce qui signifie idéal pour envelopper la fonction JSON.parse dans try-catch comme

try{
   let obj = JSON.parse(string);
}catch(err){
   console.log(err);
}

Essayez ceci. Celui-ci est écrit en caractères dactylographiés.

         export function safeJsonParse(str: string) {
               try {
                 return JSON.parse(str);
                   } catch (e) {
                 return str;
                 }
           }

/**
 * Safely turning a JSON string into an object
 *
 * @param {String} str - JSON String
 * @returns deserialized object, false if error
 */
export function jsonParse(str) {
  let data = null;
  try {
    data = JSON.parse(str);
  } catch (err) {
    return false;
  }
  return data;
}