ตัวอักษร JSON

สารบัญ

นี่คือสตริง JSON:

'{"name":"John", "age":30, "car":null}'

ภายในสตริง JSON จะมีอ็อบเจ็กต์ JSON ตามตัวอักษร:

{"name":"John", "age":30, "car":null}

ตัวอักษรอ็อบเจ็กต์ JSON ล้อมรอบด้วยเครื่องหมายปีกกา {}

ตัวอักษรออบเจ็กต์ JSON มีคู่คีย์/ค่า

คีย์และค่าจะถูกคั่นด้วยเครื่องหมายทวิภาค

คีย์จะต้องเป็นสตริง และค่าต้องเป็นประเภทข้อมูล JSON ที่ถูกต้อง:

สตริง
หมายเลข
วัตถุ
อาร์เรย์
บูลีน
โมฆะ

คู่คีย์/ค่าแต่ละคู่คั่นด้วยเครื่องหมายจุลภาค

เป็นข้อผิดพลาดทั่วไปในการเรียกวัตถุ JSON ตามตัวอักษรว่า "วัตถุ JSON"

JSON ไม่สามารถเป็นวัตถุได้ JSON เป็นรูปแบบสตริง

ข้อมูลจะเป็น JSON เท่านั้นเมื่ออยู่ในรูปแบบสตริง เมื่อแปลงเป็นตัวแปร JavaScript จะกลายเป็นอ็อบเจ็กต์ JavaScript

วัตถุจาวาสคริปต์

คุณสามารถสร้างอ็อบเจ็กต์ JavaScript ได้จากอ็อบเจ็กต์ JSON ตามตัวอักษร:

ตัวอย่าง

myObj = {"name":"John", "age":30, "car":null};

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

<!DOCTYPE html>
<html>
<body>

<h2>Creating an Object from a JSON Literal</h2>
<p id="demo"></p>

<script>
const myObj = {"name":"John", "age":30, "car":null};
document.getElementById("demo").innerHTML = myObj.name;
</script>

</body>
</html>

โดยปกติ คุณจะสร้างออบเจ็กต์ JavaScript โดยแยกวิเคราะห์สตริง JSON:

ตัวอย่าง

myJSON = '{"name":"John", "age":30, "car":null}';
myObj = JSON.parse(myJSON);

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

<!DOCTYPE html>
<html>
<body>

<h2>Creating an Object Parsing JSON</h2>
<p id="demo"></p>

<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
</script>

</body>
</html>

การเข้าถึงค่าวัตถุ

คุณสามารถเข้าถึงค่าอ็อบเจ็กต์ได้โดยใช้เครื่องหมายจุด (.):

ตัวอย่าง

const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
  x = myObj.name;

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

<!DOCTYPE html>
<html>
<body>

<h2>Access a JavaScript Object</h2>
<p id="demo"></p>

<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
</script>

</body>
</html>

คุณยังสามารถเข้าถึงค่าออบเจ็กต์ได้โดยใช้เครื่องหมายวงเล็บเหลี่ยม ([]):

ตัวอย่าง

const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
  x = myObj["name"];

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

<!DOCTYPE html>
<html>
<body>

<h2>Access a JavaScript Object</h2>
<p id="demo"></p>

<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj["name"];
</script>

</body>
</html>

การวนลูปวัตถุ

คุณสามารถวนซ้ำคุณสมบัติของวัตถุด้วย for-in loop:

ตัวอย่าง

const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);

let text = "";
for (const x in myObj) {
  text += x + ", ";
}

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

<!DOCTYPE html>
<html>
<body>

<h2>Looping Object Properties</h2>
<p id="demo"></p>

<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);

let text = "";
for (const x in myObj) {
  text += x + ", ";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

ในวง for-in ให้ใช้เครื่องหมายวงเล็บเพื่อเข้าถึงคุณสมบัติ ค่า:

ตัวอย่าง

const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);

let text = "";
for (const x in myObj) {
  text += myObj[x] + ", ";
}

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

<!DOCTYPE html>
<html>
<body>

<h2>Looping JavaScript Object Values</h2>
<p id="demo"></p>

<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);

let text = "";
for (const x in myObj) {
  text += myObj[x] + ", ";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>