JavaScriptでJSONオブジェクトを取得する方法

フロントエンド テクノロジの継続的な開発により、JavaScript はクライアント開発で最も一般的に使用される言語になりました。一部のデータ対話アプリケーションでは、JSON (JavaScript Object Notation) がデータ送信に最も一般的に使用される形式の 1 つになっています。 JavaScript では、JSON オブジェクトの取得は非常に一般的な操作です。

この記事では、開発者が JavaScript で JSON オブジェクトを取得する方法を紹介します。

1. JSON 文字列の取得

まず、JSON オブジェクトを取得するための最初のステップは、JSON 文字列を取得することです。 JavaScript では、サーバーからの取得、Ajax リクエストの作成、ローカル ファイルからの読み取りなど、さまざまな方法で JSON 文字列を取得できます。

JSON文字列の取得方法は以下のとおりです。

// 通过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. JSON文字列をJSONオブジェクトに変換します

JSON文字列を取得後、次のステップでは、JSON 文字列を JSON オブジェクトに変換します。 JavaScript では、JSON.parse() メソッドを使用して、JSON 文字列を JSON オブジェクトに変換できます。

メソッドは次のとおりです。

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

3. JSON オブジェクトの値を取得します

JSON オブジェクトの値を取得するには 2 つの方法があります。 : ドット演算子と角括弧。ネストされた JSON オブジェクトの場合、ドット演算子または括弧演算子の組み合わせを使用して、ネストされたプロパティにアクセスすることもできます。

以下に示すように:

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. 実践的なアプリケーション: JD 製品情報の取得

JSON オブジェクトの上記の紹介は、理論的な説明に基づいています。開発者が実際のアプリケーションを通じてそれをより深く理解し、適用できるようになります。

このアプリケーションは、JD Web サイトから製品情報を取得して実装されます。 JD 製品情報を取得する主な手順は次のとおりです。

#指定した製品のページ HTML を取得
• #HTML コードを解析して製品情報データを取得
• 商品情報データの変換 JSON オブジェクトの場合
• JSON オブジェクトによる商品情報の表示
まず、商品ページの HTML コードを取得する必要があります。 JavaScript では、JD 製品ページの HTML を 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);
})

次に、正規表現を使用して HTML コードを解析し、製品情報データを取得する必要があります。

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

商品情報データは構造化データであるため、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);
})

最後に、フロントエンド ページを通じて製品情報の JSON オブジェクトを表示できます。

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

概要

JavaScript で JSON オブジェクトを取得することは比較的基本的なスキルであり、フロントエンド開発に必要なスキルの 1 つです。この記事を読むことで、JavaScript で JSON オブジェクトを取得する方法をより深く理解し、実際のプロジェクトに適用できるようになることを願っています。

以上がJavaScriptでJSONオブジェクトを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。