Comment obtenir un objet json en javascript

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 = /<div class="sku-name">s*<h1>(.*?)</h1>/gi;
  const regPrice = /<span class="p-price">s*<span class="price-symbol">&yen;</span><strong class="price J-p-d+" data-price="(.*?)">/gi;
  const regImg = /<img src="//img.*?s(.*?)"/gi;
  const name = regName.exec(html)[1];
  const price = regPrice.exec(html)[1];
  const img = 'https:' + regImg.exec(html)[1];
  return {name, price, img};
}

getHtml('https://item.jd.com/10024311244369.html')
.then(html => {
  const data = parseHtml(html);
  console.log(data);
})
.catch(err => {
  console.log('Error: ', err);
})

Étant donné que les données d'informations sur les produits sont des données structurées, il est préférable de les convertir en un objet JSON.

function parseHtml(html) {
  const regName = /<div class="sku-name">s*<h1>(.*?)</h1>/gi;
  const regPrice = /<span class="p-price">s*<span class="price-symbol">&yen;</span><strong class="price J-p-d+" data-price="(.*?)">/gi;
  const regImg = /<img src="//img.*?s(.*?)"/gi;
  const name = regName.exec(html)[1];
  const price = regPrice.exec(html)[1];
  const img = 'https:' + regImg.exec(html)[1];
  return {name, price, img};
}

function getJson(url) {
  return new Promise((resolve, reject) => {
    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);
})

Enfin, l'objet JSON d'informations sur le produit peut être affiché via la page frontale.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Get Product Info</title>
</head>
<body>
  <div id="app"></div>
  <script>
    function getJson(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) {
              const json = JSON.parse(xhr.responseText);
              resolve(json);
            } else {
              reject(new Error(xhr.status));
            }
          }
        }
        xhr.send();
      });
    }

    function render(data) {
      const appNode = document.getElementById('app');
      const imgNode = document.createElement('img');
      const nameNode = document.createElement('h2');
      const priceNode = document.createElement('h3');
      imgNode.setAttribute('src', data.img);
      nameNode.innerText = data.name;
      priceNode.innerText = '价格：' + data.price;
      appNode.appendChild(imgNode);
      appNode.appendChild(nameNode);
      appNode.appendChild(priceNode);
    }

    getJson('https://item.jd.com/10024311244369.html')
    .then(json => {
      render(json);
    })
    .catch(err => {
      console.log('Error: ', err);
    })
  </script>
</body>
</html>

Résumé

Obtenir des objets JSON en JavaScript est une compétence relativement basique et l'une des compétences nécessaires au développement front-end. En étudiant cet article, j'espère que les lecteurs comprendront mieux comment obtenir des objets JSON en JavaScript et pourront également les appliquer dans des projets réels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!