Utilisation des données JSON dans les astuces JavaScript_javascript

JSON est un format JavaScript natif, ce qui signifie que le traitement des données JSON en JavaScript ne nécessite aucune API ou boîte à outils spéciale.

Syntaxe JSON

JSON est construit à partir de deux structures :

Objet - une collection de paires nom/valeur. Dans différentes langues, il est compris comme un objet, un enregistrement, une structure, un dictionnaire, une table de hachage, une liste de clés ou un tableau associatif. Un objet commence par "{" (crochet gauche) et se termine par "}" (crochet droit). Chaque "nom" est suivi d'un ":" (deux-points) ; les paires "nom/valeur" sont séparées par un "," (virgule).

Array - Une liste ordonnée de valeurs. Dans la plupart des langues, il s'agit d'un tableau. Un tableau commence par "[" (crochet gauche) et se termine par "]" (crochet droit). Les valeurs sont séparées par "," (virgule).

JSON n'a pas de variables ou d'autres structures de contrôle. JSON n'est utilisé que pour le transfert de données.

Attribuer des données JSON aux variables

Par exemple, vous pouvez créer une nouvelle variable JavaScript et lui attribuer directement une chaîne de données au format JSON :

var people =
{ "programmers": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
{ "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
],
"authors": [
{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
],
"musicians": [
{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
]
}

C'est très simple : désormais, people contient les données au format JSON que nous avons vu plus tôt. Mais cela ne suffit pas, car la manière d’accéder aux données ne semble pas encore évidente.

Accéder aux données

Bien que cela ne semble pas évident, la longue chaîne ci-dessus n'est en réalité qu'un tableau ; vous pouvez facilement accéder à ce tableau en le plaçant dans une variable JavaScript. En fait, utilisez simplement la notation par points pour représenter les éléments du tableau. Ainsi, pour accéder au nom de famille de la première entrée dans la liste des programmeurs, utilisez simplement un code comme celui-ci en JavaScript :

people.programmers[0].lastName;

Notez que l'indexation des tableaux est de base zéro. Ainsi, cette ligne de code accède d'abord aux données de la variable people ; puis se déplace vers l'entrée appelée programmers , puis se déplace vers le premier enregistrement ( [0] ) ; Le résultat est la valeur de chaîne "McLaughlin" .

Voici quelques exemples utilisant la même variable.

people.authors[1].genre 
// Value is "fantasy"
people.musicians[3].lastName 
// Undefined. This refers to the fourth entry,and there isn't one
people.programmers[2].firstName 
// Value is "Elliotte"

En utilisant cette syntaxe, vous pouvez traiter n'importe quelle donnée au format JSON sans utiliser de boîte à outils ou d'API JavaScript supplémentaire.

Modifier les données JSON

Tout comme les données sont accessibles à l'aide de points et de parenthèses, les données peuvent être facilement modifiées de la même manière :

people.musicians[1].lastName = "Rachmaninov";

Après avoir converti la chaîne en un objet au format JavaScript json, vous pouvez modifier les données dans la variable comme ceci.

Remarque : les objets au format json et le texte json sont différents

var obj={name:" 张三 ","sex":' 男 '}; //json 格式的对象
var str=" { name: " 张三 " , "sex" : ' 男 ' }" ; //json 格式的字符串（ json 格式的文本）

Reconvertir en chaîne

Bien sûr, toutes les modifications de données ont peu de valeur si vous ne pouvez pas facilement reconvertir l'objet au format texte mentionné dans cet article. Cette conversion est également simple en JavaScript :

var newJSONtext = people.toJSONString();

C'est ça ! Vous disposez désormais d'une chaîne de texte que vous pouvez utiliser n'importe où, par exemple comme chaîne de requête dans une application Ajax.

Plus important encore, tout objet JavaScript peut être converti en texte JSON. Il n'est pas seulement possible de gérer des variables initialement affectées avec des chaînes JSON. Pour convertir un objet nommé monObjet, exécutez simplement une commande de la même forme :

<script type="text/javascript">
function Car(make,model,year,color)
{
this.make=make; 
this.model=model; 
this.year=year; 
this.color=color;
} 
function showCar()
{
var carr = new Car("Dodge","Coronet R/T",1968,"yellow"); 
alert(carr.toJSONString()); 
}
</script>

C'est la plus grande différence entre JSON et les autres formats de données. Si vous utilisez JSON, il vous suffit d'appeler une fonction simple pour obtenir les données formatées, prêtes à l'emploi. Pour les autres formats de données, une conversion entre les données brutes et formatées est requise. Même lorsque vous utilisez une API telle que Document Object Model (qui fournit des fonctions pour convertir vos propres structures de données en texte), vous devez apprendre l'API et utiliser les objets de l'API au lieu d'utiliser des objets et une syntaxe JavaScript natifs.

La conclusion finale est que si vous traitez un grand nombre d'objets JavaScript, alors JSON est presque certainement un bon choix afin que vous puissiez facilement convertir les données dans un format pouvant être envoyé au programme côté serveur dans la demande (Ajax).

Méthode pour convertir une chaîne JSON en objet JSON

Pour utiliser le str1 ci-dessus, vous devez d'abord le convertir en objet JSON en utilisant la méthode suivante :

//由JSON字符串转换为JSON对象
var obj = eval('(' + str + ')');

ou

var obj = str.parseJSON(); //由JSON字符串转换为JSON对象

ou

var obj = JSON.parse(str); //由JSON字符串转换为JSON对象

Ensuite, vous pouvez le lire comme ceci :

Alert(obj.name);
Alert(obj.sex);

Remarque spéciale : si obj est à l'origine un objet JSON, alors ce sera toujours un objet JSON après avoir utilisé la fonction eval() pour le convertir (même s'il est converti plusieurs fois), mais il y aura des problèmes après avoir utilisé le fonction parseJSON() pour le traiter (en lançant une exception de syntaxe).