json to html

Perform JSON to HTML conversion online with Node.js.

การแสดงข้อมูล JSON(JavaScript Object Notation) ในรูปแบบ HTML เป็นสิ่งสำคัญเมื่อสร้างแดชบอร์ด รายงานภาพ หรือฝังข้อมูลที่มีโครงสร้างลงในเนื้อหาเว็บ แทนที่จะจัดรูปแบบข้อมูลด้วยมือ คุณสามารถแปลง JSON เป็น HTML ใน Node.js ได้โดยใช้ GroupDocs.Conversion Cloud SDK ที่ทรงพลัง — API REST ที่ช่วยให้การแปลงเอกสารง่ายขึ้น

ในบทช่วยสอนนี้ เราจะพาคุณไปดูวิธีการแปลงไฟล์ JSON เป็นเอกสาร HTML ที่สะอาดและพร้อมใช้งานในเบราว์เซอร์โดยใช้ Node.js

📌 การนำทางอย่างรวดเร็ว

🚀 ทำไมต้องแปลง JSON เป็น HTML?

HTML เป็นรูปแบบมาตรฐานสำหรับการแสดงข้อมูลบนเว็บ โดยการแปลง JSON (JavaScript Object Notation) เป็น HTML นักพัฒนาสามารถ:

  • ✅ แสดงข้อมูลที่มีโครงสร้างในรูปแบบที่ใช้สะดวก
  • ✅ ฝัง JSON ในเว็บไซต์หรือแอปพลิเคชันเว็บ。
  • ✅ สร้างตารางหรือบล็อกที่อ่านออกได้จาก JSON ที่ซ้อนกัน.
  • ✅ ส่งออกการตอบสนอง API เป็นหน้า HTML ที่อ่านได้.

⚙️ ติดตั้ง GroupDocs Node.js SDK

GroupDocs.Conversion Cloud SDK for Node.js มีวิธีการที่เบาและง่ายในการรวมการแปลงรูปแบบไฟล์เข้ากับแอปพลิเคชันที่ใช้ JavaScript ของคุณ เริ่มต้นกันเลย:

  1. ติดตั้งผ่าน npm:
npm install groupdocs-conversion-cloud --save
  1. ขอรับข้อมูลรับรอง API ของคุณ (Client ID และ Client Secret) จาก GroupDocs Cloud Dashboard. สำหรับข้อมูลเพิ่มเติม คุณสามารถทำตามคำแนะนำที่ระบุใน tutorial.

🛠️ แปลง JSON เป็น HTML ใน Node.js

นี่คือวิธีการแปลงไฟล์ JSON เป็น HTML โดยใช้ GroupDocs.Conversion Cloud SDK ใน Node.js:

📌 ขั้นตอนที่ 1: นำเข้า SDK และตั้งค่ API

const { Configuration, ConvertApi, FileApi, UploadFileRequest, ConvertSettings, ConvertDocumentRequest } = require("groupdocs-conversion-cloud");
const config = new Configuration("YOUR_CLIENT_ID", "YOUR_CLIENT_SECRET");
const convertApi = new ConvertApi(config);
const fileApi = new FileApi(config);

📌 Step 2: อัปโหลดไฟล์ JSON ไปยัง Cloud

const fs = require("fs");
const uploadRequest = new UploadFileRequest("input.json", fs.createReadStream("input.json"));
await fileApi.uploadFile(uploadRequest);

📌 Step 3: ตั้งค่าออปชันการแปลง (JSON → HTML)

const settings = new ConvertSettings();
settings.filePath = "input.json";
settings.format = "html";
settings.outputPath = "converted/output.html";

const request = new ConvertDocumentRequest(settings);
await convertApi.convertDocument(request);
console.log("✅ JSON converted to HTML successfully.");

// More examples over https://github.com/groupdocs-conversion-cloud/groupdocs-conversion-cloud-dotnet
// รับข้อมูลประจำตัว API ของคุณ 
string clientId = "XXXXXX-XXXXXXXXX-4088-9ca0-55c38f4b7f22";
string clientSecret1 = "XXXXXXXXXXXXXXXXXXXX";

// สร้างอินสแตนซ์ของคลาส Configuration และเริ่มต้นด้วย Client ID & Client Secret
Configuration configuration = new Configuration(clientId, clientSecret);
// กำหนด URL พื้นฐานของ API เพื่อดำเนินการแปลง JSON เป็น HTML ออนไลน์
configuration.setApiBaseUrl("https://api.groupdocs.cloud");

// เริ่มต้นอินสแตนซ์ของ ConvertApi ด้วยวัตถุ Configuration
ConvertApi convertApi = new ConvertApi(configuration);

ConvertSettings settings = new ConvertSettings();
settings.setStorageName("internal");
settings.setFilePath("input.json");
settings.setFormat("HTML");
settings.setOutputPath("myResultant.html");
    
// ใช้วิธี ConvertDocument เพื่อแปลง JSON เป็นไฟล์ HTML
ConvertDocumentRequest request = new ConvertDocumentRequest(settings);
List<StoredConvertedResult> response = convertApi.convertDocument(request);
    
// ตรวจสอบการตอบสนองและพิมพ์ข้อความสำเร็จ
if (response != null && response.equals("OK")) {
    System.out.println("Conversion successful! Resultant HTML file is saved at: " + response.getFilePath());
}
json to html

Image:- ตัวอย่างการแปลง JSON เป็น HTML ที่ทำด้วย Node.js.

  • JSON ที่ใช้ในตัวอย่างข้างต้นสามารถดาวน์โหลดได้จาก this link.

💻 แปลง JSON เป็น HTML ผ่าน cURL

ในขณะใช้งาน GroupDocs.Conversion Cloud ด้วยคำสั่ง cURL คุณยังสามารถทำการแปลง JSON เป็น HTML ได้ วิธีนี้ไม่เพียงแต่ทำให้การทำงานอัตโนมัติและการรวมระบบเข้ากับการทำงานที่หลากหลายง่ายขึ้น แต่ยังให้การแปลงข้อมูลที่ไม่ขึ้นกับแพลตฟอร์ม ง่ายต่อการเขียนสคริปต์ และช่วยให้การแปลงข้อมูลที่ราบรื่นและมีคุณภาพสูงโดยไม่จำเป็นต้องมีการเขียนโค้ดยาวๆ

สร้างโทเค็นการเข้าถึง JWT ตามข้อมูลประจำตัวของลูกค้า จากนั้นดำเนินการคำสั่งดังต่อไปนี้:

curl -v "https://api.groupdocs.cloud/v2.0/conversion" \
-X POST \
-H "accept: application/json" \
-H "authorization: Bearer {YOUR_ACCESS_TOKEN}" \
-H "Content-Type: application/json" \
-d "{  \"StorageName\": \"internal\",  \"FilePath\": \"{inputFile}\",  \"Format\": \"html\",  \"OutputPath\": \"{myResultant}\"}"

กรุณาแทนที่ inputFile ด้วยชื่อไฟล์ JSON ที่ใช้เป็นข้อมูลนำเข้า, myResultant ด้วยชื่อไฟล์ HTML ผลลัพธ์ และ accessToken ด้วย JWT access token ที่ปรับแต่งแล้ว

  • คุณอาจพิจารณาสั่งอ execut คำสั่งต่อไปนี้ถ้าความต้องการคือการบันทึก HTML ผลลัพธ์ลงในไดรฟ์ท้องถิ่น:
curl -v "https://api.groupdocs.cloud/v2.0/conversion" \
-X POST \
-H "accept: application/json" \
-H "authorization: Bearer {accessToken}" \
-H "Content-Type: application/json" \
-d "{  \"StorageName\": \"internal\",  \"FilePath\": \"input.json\",  \"Format\": \"html\"}"

✅ สรุป

การแปลง JSON เป็น HTML โดยใช้ GroupDocs.Conversion Cloud SDK สำหรับ Node.js ช่วยให้นักพัฒนาสามารถสร้างเนื้อหาเว็บที่มีความเป็นพลศาสตร์ อ่านง่าย และนำเสนอได้จากข้อมูลที่มีโครงสร้าง ไม่ว่าคุณกำลังสร้างแดชบอร์ดผู้ดูแลระบบ อัตโนมัติรายงาน หรือทำงานกับการตอบสนองของ JSON API SDK นี้ช่วยทำให้ขั้นตอนดังกล่าวง่ายขึ้นด้วยผลลัพธ์ HTML ที่สะอาด

📚 แหล่งข้อมูลที่มีประโยชน์

🌐 แอปออนไลน์ฟรี JSON เป็น HTML

เพื่อสัมผัสความสามารถที่น่าทึ่งของ GroupDocs.Conversion Cloud ในเว็บเบราว์เซอร์ คุณอาจพิจารณาใช้แอปพลิเคชัน JSON to HTML Conversion App ฟรีและเบาที่สุดของเรา

json to html converter

🔗 บทความที่เกี่ยวข้อง

เราขอแนะนำให้เยี่ยมชมลิงก์ต่อไปนี้เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับ: