JSON เป็นรูปแบบการรวมข้อมูลที่มีน้ำหนักเบาซึ่งส่วนใหญ่ใช้เพื่อจัดเก็บและขนส่งข้อมูลจากเซิร์ฟเวอร์หรือระบบหนึ่งไปยังอีกเครื่องหนึ่ง ในทางกลับกัน แผนที่ยังจัดเก็บข้อมูลและใช้รูปแบบค่าคีย์โดยที่คีย์สามารถมีข้อมูลประเภทใดก็ได้ นักพัฒนาซอฟต์แวร์สามารถดึงข้อมูลเฉพาะได้โดยเลือกคีย์ที่เกี่ยวข้อง
บทความนี้จะอธิบายกระบวนการแปลง JSON เป็น/จากแผนที่ใน JavaScript โดยครอบคลุมหัวข้อต่อไปนี้:
- วิธีแปลงข้อมูล JSON เป็นแผนที่ใน JavaScript
- วิธีแปลงข้อมูล JSON จากแผนที่ใน JavaScript
- วิธีดึงข้อมูล JSON API และแปลงข้อมูลเป็นแผนที่
วิธีแปลงข้อมูล JSON เป็นแผนที่ใน JavaScript
การแปลงข้อมูล JSON เป็นแผนที่จะรักษารูปแบบคู่คีย์-ค่าไว้เป็น 'แผนที่' และยังเก็บข้อมูลในรูปแบบคีย์-ค่าเช่นเดียวกับ JSON ดังนั้นนักพัฒนาสามารถรักษาลำดับดั้งเดิมของคีย์ซึ่งไม่รับประกันด้วยการแปลงออบเจ็กต์ JavaScript กำลังแปลง “เจสัน” ข้อมูลเข้า 'แผนที่' ให้ความยืดหยุ่นมากขึ้นและช่วยให้นักพัฒนาสามารถใช้วิธี Map ในตัวเพื่อให้ความสะดวกในขณะที่สำรวจข้อมูล
มาดูบล็อกโค้ดด้านล่างซึ่งข้อมูลที่ฮาร์ดโค้ด JSON จะถูกแปลงเป็นแผนที่:
< ประเภทสคริปต์ = 'ข้อความ/จาวาสคริปต์' >
ค่าคงที่ jsonFormat = '{'author1':Jackson', 'author2' 'Reed', 'author3': 'Tasha', 'author4': 'Petterson'} ' ;
ค่าคงที่ แผนที่รูปแบบ = ใหม่ แผนที่ ( วัตถุ . รายการ ( เจสัน แยกวิเคราะห์ ( jsonFormat ) ) ) ;
คอนโซล บันทึก ( แผนที่รูปแบบ ) ;
สคริปต์ >
คำอธิบายของโค้ดข้างต้นระบุไว้ว่า:
- ขั้นแรก ให้สร้างตัวแปรประเภท const ชื่อ 'รูปแบบ json' มีข้อมูลในรูปแบบ JSON เช่นในรูปแบบคีย์-ค่า
- ต่อไป ให้สร้างอินสแตนซ์ใหม่ของแผนที่โดยใช้ชื่อ “รูปแบบแผนที่” . หากต้องการแยกวิเคราะห์ข้อมูล JSON ให้ส่งผ่านไฟล์ “รูปแบบแผนที่” ข้างใน “JSON.แยกวิเคราะห์()” วิธี.
- จากนั้นส่งผลลัพธ์ที่ส่งคืนโดยวิธีนี้ไปยัง “วัตถุ รายการ ()” เพื่อสร้างอาร์เรย์ของอาร์เรย์และแต่ละอาร์เรย์ภายในแทนคู่คีย์-ค่า
- ส่งผ่านผลลัพธ์สุดท้ายหรือวิธีการทั้งหมดเหล่านี้ตามการจัดตำแหน่งที่เหมาะสมภายใน 'แผนที่' ตัวสร้าง ตอนนี้มันเป็นตัวอย่าง “รูปแบบแผนที่” มีข้อมูล JSON ที่แปลงแล้วซึ่งแสดงบนหน้าต่างคอนโซลโดยใช้ “console.log()” วิธี.
หลังจากการคอมไพล์โค้ดข้างต้น หน้าต่างคอนโซลจะมีลักษณะดังนี้:
ผลลัพธ์ยืนยันว่าข้อมูล JSON ถูกแปลงเป็นแผนที่แล้ว สำหรับข้อมูลเพิ่มเติมและตัวอย่างในการแปลงข้อมูล JSON เป็นอาร์เรย์หรือแผนที่ คุณสามารถไปที่อื่นๆ ของเรา บทความ .
วิธีแปลงข้อมูล JSON จากแผนที่ใน JavaScript
การแปลงข้อมูลเป็นรูปแบบ JSON ช่วยเพิ่มความพร้อมใช้งานตลอดอายุการใช้งาน และช่วยให้คุณสามารถส่งข้อมูลนี้ได้ทุกที่ผ่านเครือข่ายโดยไม่สูญเสียข้อมูล นอกจากนี้ รูปแบบ JSON ยังสามารถอ่านได้ง่ายโดยมนุษย์ และสามารถใช้ในเว็บ API หรือไฟล์การกำหนดค่าได้ ในโปรแกรมด้านล่าง ข้อมูลแผนที่จะถูกแปลงเป็นรูปแบบ JSON:
< ประเภทสคริปต์ = 'ข้อความ/จาวาสคริปต์' >ค่าคงที่ แผนที่รูปแบบ = ใหม่ แผนที่ ( [
[ 'ผู้เขียน1' , 'แจ็คสัน' ] ,
[ 'ผู้เขียน2' , 'รีด' ] ,
[ 'ผู้เขียน3' , 'ทาชา' ] ,
[ 'ผู้เขียน4' , 'ปีเตอร์สัน' ] ,
] ) ;
ค่าคงที่ jsonFormat = เจสัน เข้มงวด ( วัตถุ . จากรายการ ( แผนที่รูปแบบ ) ) ;
คอนโซล บันทึก ( jsonFormat ) ;
สคริปต์ >
คำอธิบายของบล็อกโค้ดข้างต้นระบุไว้เป็น:
- ขั้นแรกให้ระบุชื่ออินสแตนซ์ “รูปแบบแผนที่” ถูกสร้างขึ้นสำหรับแผนที่ที่มีหลายรายการ
- ต่อไป “วัตถุ.fromEntries()” มีการใช้วิธีและ “รูปแบบแผนที่” ถูกส่งผ่านไปแล้ว สิ่งนี้จะแปลงข้อมูลแผนที่ที่ให้มาเป็นอาร์เรย์ที่ซ้อนกัน
- จากนั้นอาร์เรย์ที่ซ้อนกันจะถูกส่งผ่านไปยัง “JSON.stringify()” วิธีการแปลงอาร์เรย์ที่ซ้อนกันเป็นรูปแบบ JSON ในขณะที่ยังคงการจัดตำแหน่งของคู่คีย์-ค่าไว้
- ในท้ายที่สุด ข้อมูลรูปแบบ JSON ที่สร้างขึ้นจะถูกแสดงบนหน้าต่างคอนโซล
ผลลัพธ์ที่สร้างขึ้นหลังจากการคอมไพล์โค้ดข้างต้นแสดงไว้ด้านล่าง:
ผลลัพธ์แสดงให้เห็นว่าขณะนี้ข้อมูลแผนที่ถูกแปลงเป็นรูปแบบ JSON เรียบร้อยแล้ว
จะดึง JSON API และแปลงข้อมูลเป็นแผนที่ได้อย่างไร
ข้อมูล JSON ที่ได้รับจาก API ยังสามารถแปลงเป็นแผนที่ได้โดยตรงโดยใช้วิธีการเดียวกันกับที่อธิบายไว้ข้างต้นในส่วนแรก ในการดำเนินการนี้ จะต้องดึง API ก่อน จากนั้นข้อมูล JSON ที่ดึงมาจะถูกแปลงเป็นแผนที่ ดังที่แสดงด้านล่าง:
< สคริปต์ >อะซิงโครนัส การทำงาน แปลง JSONApi ( ) {
พยายาม {
ค่าคงที่ ความละเอียด = รอรับ ( 'https://jsonplaceholder.typicode.com/todos/' ) ;
ค่าคงที่ jsonFormat = รออีกครั้ง json.json ( ) ;
ค่าคงที่ แผนที่รูปแบบ = ใหม่ แผนที่ ( วัตถุ . รายการ ( jsonFormat ) ) ;
คอนโซล บันทึก ( แผนที่รูปแบบ ) ;
} จับ ( สาเหตุข้อผิดพลาด ) {
คอนโซล ข้อผิดพลาด ( 'เกิดข้อผิดพลาดในการดึงหรือแปลงข้อมูล:' , สาเหตุข้อผิดพลาด ) ;
}
}
แปลง JSONApi ( ) ;
สคริปต์ >
คำอธิบายของโค้ดข้างต้นระบุไว้ด้านล่าง:
- ขั้นแรกให้ตั้งชื่อฟังก์ชันอะซิงโครนัส “แปลง JSONApi()” ถูกกำหนดโดยใช้คำหลัก 'async' ที่อยู่ด้านหลังฟังก์ชัน 'คำสำคัญ' .
- ต่อไปให้ใช้ 'พยายาม' บล็อกและสร้าง “ต่อ” ตัวแปรประเภท “เรส” ที่จะจัดเก็บข้อมูลที่ดึงมาจาก API การดึงข้อมูลทำได้โดยการแทรกลิงก์ API ไว้ภายใน “ดึง()” วิธี. พร้อมทั้งแนบ “รอ” คำหลักเบื้องหลังสิ่งนี้ “ดึง()” วิธีการรอการมาถึงของข้อมูล API ทั้งหมด
- จากนั้นจึงทา “เจสัน()” วิธีการบนตัวแปร “res” เพื่ออ่านข้อมูลที่ได้รับหรือดึงข้อมูลทั้งหมด ที่ “รอ” คำหลักยังถูกนำไปใช้ด้านหลังเพื่อรอการอ่านข้อมูลให้เสร็จสิ้น ส่งผ่านผลลัพธ์ในตัวแปรชื่อ 'รูปแบบ json' .
- หลังจากนั้น 'รูปแบบ json' ถูกส่งผ่านภายในเมธอดชื่อ “วัตถุ รายการ ()” เพื่อสร้างอาร์เรย์แบบซ้อนสำหรับข้อมูลที่ให้ไว้ จากนั้นจะถูกส่งผ่านเข้าไปภายใน 'แผนที่()' Constructor เพื่อแปลงอาร์เรย์เป็น Map และถูกเก็บไว้ใน 'แผนที่' ชื่ออินสแตนซ์ “รูปแบบแผนที่” .
- JSON API ที่ดึงข้อมูลมาซึ่งขณะนี้แปลงเป็นแผนที่แล้วจะแสดงบนคอนโซลโดยการแสดง “รูปแบบแผนที่” ตัวแปรภายใน “console.log()” วิธี.
- หากต้องการตรวจจับข้อผิดพลาดที่เกิดขึ้นในระหว่างกระบวนการทั้งหมด ให้ใช้ 'จับ' บล็อกและส่งพารามิเตอร์จำลองซึ่งมีข้อผิดพลาดเกิดขึ้น และเพื่อจัดการจะแสดงข้อความจำลอง
ผลลัพธ์หลังจากโค้ดข้างต้นเสร็จสิ้นจะแสดงอยู่ด้านล่าง:
ผลลัพธ์แสดงให้เห็นว่าข้อมูลรูปแบบ JSON ได้รับการดึงมาจาก API ที่ให้มา จากนั้นข้อมูลนี้จะถูกแปลงเป็นแผนที่
คุณได้เรียนรู้เกี่ยวกับกระบวนการแปลง JSON เป็น Map และ Map เป็น JSON ใน JavaScript
บทสรุป
หากต้องการแปลงข้อมูล JSON เป็น Map วิธีการดังกล่าว “JSON.แยกวิเคราะห์()” และ “วัตถุ รายการ ()” ถูกนำมาใช้ อันแรกแยกวิเคราะห์ข้อมูล JSON และอันที่สองสร้างอาร์เรย์ที่ซ้อนกันของข้อมูลที่แยกวิเคราะห์ ในกรณีที่แปลงข้อมูลแผนที่เป็นรูปแบบ JSON ไฟล์ “วัตถุ.fromEntries()” และ “JSON.stringify()” มีการใช้วิธีการที่จะแปลงข้อมูลเป็นอาร์เรย์ที่ซ้อนกันและแปลงเป็นรูปแบบ JSON ตามลำดับ บล็อกนี้ได้อธิบายขั้นตอนการแปลง JSON เป็นและจากแผนที่ใน JavaScript