logo icon
Taninut.com
image
image แดชบอร์ดรวม
image ประวัติการจอง
image การตั้งค่า
image ออกจากระบบ

110

Update
Delete
Back
 
 
 
Content ID110
Category ID3
Writer ID(not set)
User ID(not set)
Lang Modeth
Content Nameการแปลงข้อมูล JSON เป็น Dart
Content Urlการแปลงข้อมูล-JSON-เป็น-Dart
Content Desc<p data-pm-slice="1 1 []">การแปลงข้อมูล JSON เป็น Dart สามารถทำได้โดยใช้ฟังก์ชัน json.decode() ซึ่งเป็นฟังก์ชันสำหรับแปลงข้อมูล JSON เป็น Dart object ได้ง่าย ๆ ดังนี้<br><br></p>
<pre style="padding-left: 40px;"><code>import 'dart:convert';<br><br>void main() { <br> String jsonString = '{"name": "John Smith", "email": "john.smith@example.com"}'; <br> Map&lt;String, dynamic&gt; data = json.decode(jsonString); <br> print(data['name']); // ผลลัพธ์: John Smith <br> print(data['email']); // ผลลัพธ์: john.smith@example.com<br>}</code></pre>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>ตัวอย่างการแปลงข้อมูล JSON ให้อยู่ในรูปแบบของ Map ในภาษา Dart โดยใช้ฟังก์ชัน&nbsp;<code>json.decode()</code> จาก library <code>dart:convert</code> ซึ่งเป็น built-in library ในภาษา Dart</p>
<p>โดยสามารถอธิบายการทำงานได้ดังนี้</p>
<ol>
<li>กำหนดข้อมูลในรูปแบบ JSON โดยกำหนดในรูปของ String ในตัวแปร <code>jsonString</code></li>
</ol>
<div class="bg-black rounded-md mb-4">
<div class="p-4 overflow-y-auto" style="padding-left: 40px;"><code class="!whitespace-pre hljs language-rust"><span class="hljs-type">String</span> jsonString = '{<span class="hljs-string">"name"</span>: <span class="hljs-string">"John Smith"</span>, <span class="hljs-string">"email"</span>: <span class="hljs-string">"john.smith@example.com"</span>}';
</code></div>
</div>
<ol start="2">
<li>ใช้ฟังก์ชัน <code>json.decode()</code> เพื่อแปลงข้อมูล JSON ใน <code>jsonString</code> เป็น Map และกำหนดให้ตัวแปร <code>data</code> เก็บค่า Map ที่ได้</li>
</ol>
<div class="bg-black rounded-md mb-4">
<div class="p-4 overflow-y-auto" style="padding-left: 40px;"><code class="!whitespace-pre hljs language-javascript"><span class="hljs-title class_">Map</span>&lt;<span class="hljs-title class_">String</span>, dynamic&gt; data = json.<span class="hljs-title function_">decode</span>(jsonString);
</code></div>
</div>
<ol start="3">
<li>นำข้อมูลใน Map <code>data</code> มาแสดงผลโดยใช้ key เพื่อเข้าถึงข้อมูลใน Map</li>
</ol>
<div class="bg-black rounded-md mb-4">
<div class="p-4 overflow-y-auto" style="padding-left: 40px;"><code class="!whitespace-pre hljs language-perl"><span class="hljs-keyword">print</span>(data[<span class="hljs-string">'name'</span>]); <span class="hljs-regexp">//</span> ผลลัพธ์: John Smith
<br><span class="hljs-keyword">print</span>(data[<span class="hljs-string">'email'</span>]); <span class="hljs-regexp">//</span> ผลลัพธ์: john.smith@example.com
</code></div>
</div>
</div>
</div>
</div>
<div class="flex justify-between lg:block">
<div class="text-gray-400 flex self-end lg:self-center justify-center mt-2 gap-2 md:gap-3 lg:gap-1 lg:absolute lg:top-0 lg:translate-x-full lg:right-0 lg:mt-0 lg:pl-2 visible">&nbsp;</div>
</div>
</div>
</div>
</div>
<p>ในตัวอย่างข้างต้น มีการสร้างตัวแปร jsonString ที่เก็บข้อมูล JSON และใช้ฟังก์ชัน json.decode() ในการแปลงข้อมูล JSON เป็น Dart object ที่เก็บไว้ในตัวแปร data จากนั้นใช้ data['name'] และ data['email'] เพื่อเข้าถึงข้อมูลภายใน object และแสดงผลลัพธ์ออกทางหน้าจอ<br><br></p>
<p>&nbsp;หาก JSON มีโครงสร้างที่ซับซ้อนขึ้น สามารถแปลงเป็น Object ในภาษา Dart ได้โดยใช้ Class และการแปลง JSON ดังนี้:</p>
<p style="padding-left: 40px;"><code><span style="color: rgb(0, 0, 0);">class User {</span></code><br><span style="color: rgb(0, 0, 0);"><code>&nbsp; final String name;</code></span><br><span style="color: rgb(0, 0, 0);"><code>&nbsp; final int age;</code></span></p>
<p style="padding-left: 40px;"><span style="color: rgb(0, 0, 0);"><code>&nbsp; User({required this.name, required this.age});</code></span></p>
<p style="padding-left: 40px;"><span style="color: rgb(0, 0, 0);"><code>&nbsp; factory User.fromJson(Map&lt;String, dynamic&gt; json) {</code></span><br><span style="color: rgb(0, 0, 0);"><code>&nbsp; &nbsp; return User(</code></span><br><span style="color: rgb(0, 0, 0);"><code>&nbsp; &nbsp; &nbsp; name: json['name'],</code></span><br><span style="color: rgb(0, 0, 0);"><code>&nbsp; &nbsp; &nbsp; age: json['age'],</code></span><br><span style="color: rgb(0, 0, 0);"><code>&nbsp; &nbsp; );</code></span><br><span style="color: rgb(0, 0, 0);"><code>&nbsp; }</code></span><br><span style="color: rgb(0, 0, 0);"><code>}</code></span></p>
<p style="padding-left: 40px;"><span style="color: rgb(0, 0, 0);"><code>String jsonString = '{"name": "John", "age": 30}';</code></span><br><span style="color: rgb(0, 0, 0);"><code>Map&lt;String, dynamic&gt; userMap = json.decode(jsonString);</code></span><br><span style="color: rgb(0, 0, 0);"><code>User user = User.fromJson(userMap);</code></span></p>
<p>&nbsp;</p>
<p>โค้ดชุดนี้เป็นตัวอย่างการแปลง JSON String ให้กลายเป็น Object ในภาษา Dart ด้วย Class ชื่อ <code>User</code> โดยมีขั้นตอนดังนี้:</p>
<ol>
<li>สร้าง Class ชื่อ <code>User</code> ที่ประกอบด้วย properties <code>name</code> และ <code>age</code> ที่เป็น final และ required ซึ่งหมายความว่าต้องระบุค่าให้ครบทั้งสองค่าเมื่อสร้าง Object จาก Class นี้<br><br><code><span style="color: rgb(0, 0, 0);">class User {</span></code><br><span style="color: rgb(0, 0, 0);"><code>&nbsp; final String name;</code></span><br><span style="color: rgb(0, 0, 0);"><code>&nbsp; final int age;<br></code></span><span style="color: rgb(0, 0, 0);"><code> User({required this.name, required this.age});<br><br></code></span></li>
<li>สร้างฟังก์ชั่นชื่อ <code>fromJson</code> ที่รับพารามิเตอร์เป็น Map ของ key-value pairs และ return Object ของ Class <code>User</code> ด้วยการใช้ค่าใน Map ในการสร้าง Object<br><br><code>&nbsp;<span style="color: rgb(0, 0, 0);"> factory User.fromJson(Map&lt;String, dynamic&gt; json) {</span></code><br><span style="color: rgb(0, 0, 0);"><code>&nbsp; &nbsp; return User(</code></span><br><span style="color: rgb(0, 0, 0);"><code>&nbsp; &nbsp; &nbsp; name: json['name'],</code></span><br><span style="color: rgb(0, 0, 0);"><code>&nbsp; &nbsp; &nbsp; age: json['age'],</code></span><br><span style="color: rgb(0, 0, 0);"><code>&nbsp; &nbsp; );</code></span><br><code><span style="color: rgb(0, 0, 0);">&nbsp; }</span></code><br><br></li>
<li>สร้าง JSON String ที่ต้องการแปลงเป็น Object ในภาษา Dart<br><br><span style="color: rgb(0, 0, 0);"><code>String jsonString = '{"name": "John", "age": 30}';</code></span><br><br></li>
<li>ใช้ <code>json.decode()</code> เพื่อแปลง JSON String เป็น Map ของ key-value pairs<br><br><span style="color: rgb(0, 0, 0);"><code>Map&lt;String, dynamic&gt; userMap = json.decode(jsonString);</code></span><br><br></li>
<li>ใช้ฟังก์ชั่น <code>fromJson()</code> เพื่อแปลง Map เป็น Object ของ Class <code>User</code><code><br><br><span style="color: rgb(0, 0, 0);">User user = User.fromJson(userMap);</span><br></code></li>
</ol>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-2xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>ดังนั้นผลลัพธ์ที่ได้จากโค้ดดังกล่าวคือ Object <code>user</code> ที่มีชื่อเป็น "John" และอายุเป็น 30</p>
</div>
</div>
</div>
<div class="flex justify-between">
<div class="text-gray-400 flex self-end lg:self-center justify-center mt-2 gap-3 md:gap-4 lg:gap-1 lg:absolute lg:top-0 lg:translate-x-full lg:right-0 lg:mt-0 lg:pl-2 visible">&nbsp;</div>
</div>
</div>
</div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
Content Short
Content View3701
Content Thumb Highlight
Content Thumb/uploads/article/t68ioahD_P.png
Content Img Altการแปลงข้อมูล JSON เป็น Dart
Content Tag
Content Date(not set)
Active Status1
Sort99999
Meta Titleการแปลงข้อมูล JSON เป็น Dart
Meta Descการแปลงข้อมูล JSON เป็น Dart
Meta Keywordการแปลงข้อมูล JSON เป็น Dart,JSON,Dart
Og Titleการแปลงข้อมูล JSON เป็น Dart
Og Descการแปลงข้อมูล JSON เป็น Dart
Status1
Create Date Time2023-03-23 19:23:44
Update Date Time2023-03-30 11:49:39
Create By
Update By