Avec le développement continu de la technologie front-end, JavaScript est devenu le langage le plus couramment utilisé dans le développement client. Dans certaines applications d'interaction de données, JSON (JavaScript Object Notation) est devenu l'un des formats les plus couramment utilisés pour la transmission de données. En JavaScript, obtenir un objet JSON est une opération très courante.

Cet article présentera comment les développeurs peuvent obtenir des objets JSON en JavaScript.

1. Obtenir la chaîne JSON

Tout d'abord, la première étape pour obtenir l'objet JSON consiste à obtenir la chaîne JSON. En JavaScript, vous pouvez obtenir une chaîne JSON de plusieurs manières, par exemple en l'obtenant du serveur, en effectuant une requête Ajax, en lisant à partir d'un fichier local, etc.

La méthode pour obtenir la chaîne JSON est la suivante :

// 通过Ajax获取JSON字符串 const xhr = new XMLHttpRequest(); xhr.open('GET', 'json/data.json', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status ===200) { const jsonStr = xhr.responseText; console.log(jsonStr); } } xhr.send(); // 从JS对象中获取JSON字符串 const obj = {name: 'Alice', age: 18}; const jsonStr = JSON.stringify(obj); console.log(jsonStr); // 从本地文件读取JSON字符串 fetch('data.json') .then(response => response.json()) .then(data => { const jsonStr = JSON.stringify(data); console.log(jsonStr); }) .catch(err => { console.log('Error: ', err); })

2. Convertir la chaîne JSON en objet JSON

Après avoir obtenu la chaîne JSON, l'étape suivante consiste à convertir la chaîne JSON en objet JSON. En JavaScript, vous pouvez utiliser la méthode JSON.parse() pour convertir une chaîne JSON en objet JSON.

La méthode est la suivante :

const jsonStr = '{"name": "Alice", "age": 18}'; const jsonObj = JSON.parse(jsonStr); console.log(jsonObj); // 输出：{name: "Alice", age: 18}

3. Obtenir la valeur dans l'objet JSON

Il existe deux façons d'obtenir la valeur dans l'objet JSON : l'opérateur point et les crochets. Pour les objets JSON imbriqués, vous pouvez également utiliser une combinaison d'opérateurs point ou crochet pour accéder aux propriétés imbriquées.

Comme indiqué ci-dessous :

const jsonObj = {name: 'Alice', age: 18, address: {city: 'Shanghai', street: 'Nanjing Road'}}; // 通过点运算符访问JSON对象属性 console.log(jsonObj.name); // 输出：'Alice' // 通过方括号运算符访问JSON对象属性 console.log(jsonObj['age']); // 输出：18 // 访问嵌套JSON对象中的属性 console.log(jsonObj.address.city); // 输出：'Shanghai' console.log(jsonObj['address']['street']); // 输出：'Nanjing Road'

4. Application pratique : obtention d'informations sur le produit JD

L'introduction ci-dessus aux objets JSON est basée sur des explications théoriques. Ensuite, des applications pratiques seront utilisées pour aider les développeurs à mieux comprendre et appliquer.

Cette application sera mise en œuvre en obtenant des informations sur le produit sur le site Web de JD. Voici les principales étapes pour obtenir des informations sur le produit JD.com :

• Obtenir la page HTML du produit spécifié
• Analyser le code HTML et obtenir les données d'informations sur le produit
• Convertir les données d'informations sur le produit en un objet JSON
• Afficher les informations produit via l'objet JSON

Tout d'abord, vous devez obtenir le code HTML de la page produit. En JavaScript, la page HTML du produit JD peut être obtenue via Ajax.

function getHtml(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status >=200 && xhr.status <300 || xhr.status === 304) { resolve(xhr.responseText); } else { reject(new Error(xhr.status)); } } } xhr.send(); }); } getHtml('https://item.jd.com/10024311244369.html') .then(html => { console.log(html) }) .catch(err => { console.log('Error: ', err); })

Ensuite, vous devez utiliser des expressions régulières pour analyser le code HTML afin d'obtenir des données d'informations sur le produit.

function parseHtml(html) { const regName = /
s*
(.*?)
/gi; const regPrice = /s*¥/gi; const regImg = / { const data = parseHtml(html); console.log(data); }) .catch(err => { console.log('Error: ', err); })

function parseHtml(html) { const regName = /
s*
(.*?)
/gi; const regPrice = /s*¥/gi; const regImg = / { getHtml(url) .then(html => { const data = parseHtml(html); const json = JSON.stringify(data); resolve(json); }) .catch(err => { reject(err); }) }); } getJson('https://item.jd.com/10024311244369.html') .then(json => { console.log(json); }) .catch(err => { console.log('Error: ', err); })