JSON.แยกวิเคราะห์()

สารบัญ

การใช้งาน JSON ทั่วไปคือการแลกเปลี่ยนข้อมูลไปยัง/จากเว็บเซิร์ฟเวอร์

เมื่อรับข้อมูลจากเว็บเซิร์ฟเวอร์ ข้อมูลจะเป็นสตริงเสมอ

แยกวิเคราะห์ข้อมูลด้วย JSON.parse() และข้อมูลจะกลายเป็นอ็อบเจ็กต์ JavaScript

ตัวอย่าง - การแยกวิเคราะห์ JSON

ลองนึกภาพว่าเราได้รับข้อความนี้จากเว็บเซิร์ฟเวอร์:

'{"name":"John", "age":30, "city":"New York"}'

ใช้ฟังก์ชัน JavaScript JSON.parse() เพื่อแปลงข้อความเป็นวัตถุ JavaScript:

const obj = JSON.parse('{"name":"John", "age":30, "city":"New 
  York"}');

ตรวจสอบให้แน่ใจว่าข้อความอยู่ในรูปแบบ JSON ไม่เช่นนั้นคุณจะได้รับข้อผิดพลาดทางไวยากรณ์

ใช้วัตถุ JavaScript ในหน้าของคุณ:

ตัวอย่าง

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = obj.name;
</script>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Creating an Object from a JSON String</h2>

<p id="demo"></p>

<script>
const txt = '{"name":"John", "age":30, "city":"New York"}'
const obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>

</body>
</html>

อาร์เรย์เป็น JSON

เมื่อใช้ JSON.parse() บน JSON ที่ได้มาจากอาร์เรย์ เมธอดจะ ส่งคืนอาร์เรย์ JavaScript แทนที่จะเป็นวัตถุ JavaScript

ตัวอย่าง

const text = '["Ford", "BMW", "Audi", "Fiat"]';
const myArr = JSON.parse(text);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Parsing a JSON Array.</h2>
<p>Data written as an JSON array will be parsed into a JavaScript array.</p>
<p id="demo"></p>

<script>
const text = '[ "Ford", "BMW", "Audi", "Fiat" ]';
const myArr = JSON.parse(text);
document.getElementById("demo").innerHTML = myArr[0];
</script>

</body>
</html>

ข้อยกเว้น

การแยกวิเคราะห์วันที่

ไม่อนุญาตให้ใช้ออบเจ็กต์วันที่ใน JSON

หากคุณต้องการระบุวันที่ ให้เขียนเป็นสตริง

คุณสามารถแปลงกลับเป็นวัตถุวันที่ได้ในภายหลัง:

ตัวอย่าง

แปลงสตริงเป็นวันที่:

const text =
  '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
  const obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
  
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a date object.</h2>
<p id="demo"></p>

<script>
const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth; 
</script>

</body>
</html>

หรือคุณสามารถใช้พารามิเตอร์ที่สองของฟังก์ชัน JSON.parse() ที่เรียกว่า reviver

พารามิเตอร์ reviver เป็นฟังก์ชันที่ตรวจสอบแต่ละคุณสมบัติ ก่อนที่จะส่งคืนค่า

ตัวอย่าง

แปลงสตริงให้เป็นวันที่โดยใช้ฟังก์ชัน reviver:

const text =
  '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
  const obj = JSON.parse(text, function (key, value) {
  if 
  (key == "birth") {
    return new 
  Date(value);
  } else {
    
  return value;
  }
});
  
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a date object.</h2>

<p id="demo"></p>

<script>
const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text, function (key, value) {
  if (key == "birth") {
    return new Date(value);
  } else {
    return value;
  }
});
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth; 
</script>

</body>
</html>

ฟังก์ชั่นการแยกวิเคราะห์

ไม่อนุญาตให้ใช้ฟังก์ชันใน JSON

หากคุณต้องการรวมฟังก์ชัน ให้เขียนเป็นสตริง

คุณสามารถแปลงกลับเป็นฟังก์ชันได้ในภายหลัง:

ตัวอย่าง

แปลงสตริงให้เป็นฟังก์ชัน:

const text =
  '{"name":"John", "age":"function () {return 
  30;}", "city":"New York"}';
  const obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
  
document.getElementById("demo").innerHTML = obj.name + ", " + 
  obj.age();

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a function.</h2>
<p id="demo"></p>

<script>
const text = '{"name":"John", "age":"function() {return 30;}", "city":"New York"}';
const obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age(); 
</script>

</body>
</html>

คุณควรหลีกเลี่ยงการใช้ฟังก์ชันใน JSON เพราะฟังก์ชันจะสูญเสียขอบเขต และคุณจะต้องใช้ eval() เพื่อแปลงกลับเป็นฟังก์ชัน