Bagaimana untuk mendapatkan objek json dalam javascript

Dengan pembangunan berterusan teknologi bahagian hadapan, JavaScript telah menjadi bahasa yang paling biasa digunakan dalam pembangunan pelanggan. Dalam sesetengah aplikasi interaksi data, JSON (JavaScript Object Notation) telah menjadi salah satu format yang paling biasa digunakan untuk penghantaran data. Dalam JavaScript, mendapatkan objek JSON adalah operasi yang sangat biasa.

Artikel ini akan memperkenalkan cara pembangun boleh mendapatkan objek JSON dalam JavaScript.

1. Dapatkan rentetan JSON

Pertama sekali, langkah pertama untuk mendapatkan objek JSON ialah mendapatkan rentetan JSON. Dalam JavaScript, anda boleh mendapatkan rentetan JSON dalam banyak cara, seperti mendapatkannya daripada pelayan, membuat permintaan Ajax, membaca daripada fail setempat, dsb.

Kaedah untuk mendapatkan rentetan JSON adalah seperti berikut:

// 通过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. Tukar rentetan JSON kepada objek JSON

Selepas memperoleh rentetan JSON, Langkah seterusnya ialah menukar rentetan JSON kepada objek JSON. Dalam JavaScript, anda boleh menggunakan kaedah JSON.parse() untuk menukar rentetan JSON kepada objek JSON.

Kaedahnya adalah seperti berikut:

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

3. Dapatkan nilai dalam objek JSON

Terdapat dua cara untuk mendapatkan nilai dalam objek JSON : pengendali titik dan kurungan segi empat sama. Untuk objek JSON bersarang, anda juga boleh menggunakan gabungan pengendali titik atau kurungan untuk mengakses sifat bersarang.

Seperti yang ditunjukkan di bawah:

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. Aplikasi praktikal: Mendapatkan maklumat produk JD

Pengenalan objek JSON di atas adalah berdasarkan penjelasan teori berikut akan membantu pembangun lebih memahami dan mengaplikasikannya melalui aplikasi praktikal.

Aplikasi ini akan dilaksanakan dengan mendapatkan maklumat produk dari laman web JD. Berikut adalah langkah utama untuk mendapatkan maklumat produk JD:

• Dapatkan halaman HTML produk yang ditentukan
• Hilang kod HTML dan dapatkan data maklumat produk
• Tukar data maklumat produk Paparkan maklumat produk melalui objek JSON

Pertama, anda perlu mendapatkan kod HTML halaman produk. Dalam JavaScript, HTML halaman produk JD boleh diperolehi melalui 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);
})

Seterusnya, anda perlu menggunakan ungkapan biasa untuk menghuraikan kod HTML untuk mendapatkan data maklumat produk.

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

Memandangkan data maklumat produk adalah data berstruktur, sebaiknya tukarkannya menjadi objek 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);
})

Akhir sekali, maklumat produk objek JSON boleh dipaparkan melalui halaman hadapan.

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

Ringkasan

Mendapatkan objek JSON dalam JavaScript ialah kemahiran yang agak asas dan salah satu kemahiran yang diperlukan untuk pembangunan bahagian hadapan. Melalui mengkaji artikel ini, saya berharap pembaca akan mempunyai pemahaman yang lebih baik tentang cara mendapatkan objek JSON dalam JavaScript, dan juga boleh menggunakannya dalam projek sebenar.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan objek json dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!