برای جمع آوری یک منوی کشویی HTML با داده های یک فایل JSON خارجی ، ضروری است که ابتدا نحوه واکشی و تجزیه JSON را به طور مؤثر با استفاده از JavaScript درک کنیم. در این مقاله ، شما را در طی مراحل ایجاد یک کشویی که نام های مقصد مانند لندن ، نیویورک و دیگران را از ساختار JSON ارائه شده نشان می دهد ، راهنمایی می کنم.
درک ساختار JSON
JSON شما ارائه شده حاوی یک کلید به نام است Destinations، که مجموعه ای از اشیاء است. هر شیء destinationName و الف destinationIDبشر در اینجا JSON ارائه شده برای مرجع وجود دارد:
{
"Destinations": [
{
"destinationName": "London",
"destinationID": "lon"
},
{
"destinationName": "New York",
"destinationID": "nyc"
},
{
"destinationName": "Paris",
"destinationID": "par"
},
{
"destinationName": "Rome",
"destinationID": "rom"
}
]
}
هدف استخراج destinationName از هر شیء و یک کشویی را با آن نام ها جمع کنید. حال ، بیایید به اجرای آن بپردازیم.
اجرای گام به گام
مرحله 1: ساختار HTML را تنظیم کنید
با ایجاد یک ساختار اساسی HTML برای منوی کشویی خود شروع کنید:
Dropdown from JSON
مرحله 2: یک فایل JavaScript ایجاد کنید
اکنون ، ما باید پرونده JavaScript را ایجاد کنیم (نامگذاری شده است script.js) این امر باعث واکشی JSON و جمع آوری کشویی می شود:
// Fetch JSON data
fetch('path/to/your/data.json')
.then(response => response.json()) // Parse the JSON
.then(data => populateDropdown(data.Destinations)) // Pass the array
.catch(error => console.error('Error fetching the JSON:', error));
// Function to populate the dropdown
function populateDropdown(destinations) {
const dropdown = document.getElementById('destinationDropdown');
destinations.forEach(destination => {
const option = document.createElement('option');
option.value = destination.destinationID;
option.textContent = destination.destinationName;
dropdown.appendChild(option);
});
}
توضیح کد JavaScript
-
واکشی JSON: ما از
fetchAPI برای بازیابی پرونده JSON. تعویض کردن'path/to/your/data.json'با مسیر واقعی پرونده JSON خود. -
تجزیه JSON: پس از دریافت پاسخ ، ما استفاده می کنیم
.json()برای تبدیل پاسخ به یک شی JavaScript. -
جمع کردن کشویی:
populateDropdownعملکرد مجموعه مقصد را می گیرد و از طریق آن تکرار می شود. برای هر مقصد ، یک جدید ایجاد می کندعنصر ، مقدار و متن خود را تعیین می کند و آن را به کشویی اضافه می کند.
یادداشت های اضافی
- رسیدگی به خطا: همیشه هنگام واکشی داده ها برای رسیدگی به هرگونه مشکلی که ممکن است در طول درخواست HTTP ایجاد شود ، کنترل خطا را در نظر بگیرید.
- تست: پس از اجرای این کد ، آن را در یک محیط محلی یا آنلاین HTML اجرا کنید تا شاهد کشویی در عمل باشد.
سوالات متداول (متداول)
س: اگر پرونده JSON من در دامنه دیگری میزبانی شود ، چه می شود؟
پاسخ: اگر پرونده JSON شما در یک دامنه متفاوت میزبانی شده باشد ، ممکن است با CORS (اشتراک منابع متقاطع) روبرو شوید. اطمینان حاصل کنید که میزبان سرور آن را به درخواست های متقاطع اجازه می دهد.
س: آیا می توانم به جای جاوا اسکریپت از jQuery استفاده کنم؟
پاسخ: بله ، jQuery روند را ساده می کند. می توانید استفاده کنید $.getJSON() برای واکشی و جمع کردن کشویی خود با منطق مشابه.
پایان
در این راهنما ، شما یاد گرفتید که چگونه می توانید یک منوی کشویی HTML را با داده های خارجی از یک فایل JSON پر کنید. با استفاده از JavaScript's fetch API و ایجاد پویا عناصر ، می توانید هر داده ای را در فرم های HTML خود به طور موثر نمایش دهید. این برای ایجاد یک برنامه وب تعاملی تر و پاسخگوتر مفید است. به یاد داشته باشید که مسیر پرونده JSON خود را تأیید کرده و در صورت لزوم مشکلات CORS را بررسی کنید.
