So erhalten Sie ein JSON-Objekt in Javascript

Mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie ist JavaScript zur am häufigsten verwendeten Sprache in der Client-Entwicklung geworden. In einigen Dateninteraktionsanwendungen ist JSON (JavaScript Object Notation) zu einem der am häufigsten verwendeten Formate für die Datenübertragung geworden. In JavaScript ist das Abrufen eines JSON-Objekts ein sehr häufiger Vorgang.

In diesem Artikel wird vorgestellt, wie Entwickler JSON-Objekte in JavaScript erhalten.

1. JSON-String abrufen

Der erste Schritt zum Abrufen des JSON-Objekts besteht darin, den JSON-String abzurufen. In JavaScript können Sie einen JSON-String auf viele Arten abrufen, z. B. indem Sie ihn vom Server abrufen, eine Ajax-Anfrage stellen, aus einer lokalen Datei lesen usw.

Die Methode zum Abrufen der JSON-Zeichenfolge lautet wie folgt:

// 通过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. Konvertieren Sie die JSON-Zeichenfolge in ein JSON-Objekt

#🎜 🎜 #Nach Erhalt der JSON-Zeichenfolge besteht der nächste Schritt darin, die JSON-Zeichenfolge in ein JSON-Objekt zu konvertieren. In JavaScript können Sie die Methode JSON.parse() verwenden, um einen JSON-String in ein JSON-Objekt zu konvertieren.

Die Methode ist wie folgt:

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

Den Wert im JSON-Objekt abrufen

Es gibt zwei Möglichkeiten um den Wert im JSON-Objekt zu erhalten. Möglichkeiten: Punktoperator und eckige Klammern. Für verschachtelte JSON-Objekte können Sie auch eine Kombination aus Punkt- oder Klammeroperatoren verwenden, um auf verschachtelte Eigenschaften zuzugreifen.

lautet wie folgt:

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'

Praktische Anwendung: JD-Produktinformationen abrufen

Die obige Einführung in JSON-Objekte Dabei handelt es sich allesamt um theoretische Erklärungen, denen praktische Anwendungen folgen, um Entwicklern zu helfen, sie besser zu verstehen und anzuwenden.

Diese Anwendung wird implementiert, indem Produktinformationen von der JD-Website abgerufen werden. Im Folgenden sind die Hauptschritte aufgeführt, um JD-Produktinformationen zu erhalten:

Seiten-HTML des angegebenen Produkts abrufen
• HTML-Code analysieren und Produktinformationsdaten abrufen
• #🎜 🎜#Produktinformationsdaten in JSON-Objekte konvertieren
• Produktinformationen über JSON-Objekte anzeigen
• Zuerst müssen Sie den HTML-Code erhalten der Produktseite. In JavaScript kann der HTML-Code der JD-Produktseite über Ajax abgerufen werden.

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);
})

Als nächstes müssen Sie reguläre Ausdrücke verwenden, um den HTML-Code zu analysieren und Produktinformationsdaten zu erhalten.

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);
})

Da es sich bei den Produktinformationsdaten um strukturierte Daten handelt, ist es am besten, sie in ein JSON-Objekt zu konvertieren.

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);
})

Schließlich kann das Produktinformations-JSON-Objekt über die Frontend-Seite angezeigt werden.

<!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>

Zusammenfassung

Das Abrufen von JSON-Objekten in JavaScript ist eine relativ grundlegende Fähigkeit und eine der notwendigen Fähigkeiten für die Front-End-Entwicklung. Ich hoffe, dass die Leser durch das Studium dieses Artikels besser verstehen, wie JSON-Objekte in JavaScript abgerufen werden, und dass sie es auch in tatsächlichen Projekten anwenden können.

Das obige ist der detaillierte Inhalt vonSo erhalten Sie ein JSON-Objekt in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!