کار با Json در جاوا اسکریپت (پر کردن DropDownlist)

کار با Json در جاوا اسکریپت

موضوع مقاله امروز ما در مورد کار با Json در جاوا اسکریپت است. ابتدا به ساختار Json می پردازیم و سپس به سراغ حل یک مثال می رویم. می خواهیم با استفاده از یک فایل Json مقادیر DropDownlist را پر کنیم.

کار با Json در جاوا اسکریپت

ساختار Json

Json یک ساختار متنی است که می توان در آن آرایه هایی از اشیاء را قرار داد. به ساختار زیر توجه کنید. شما یک جدول از لیست استان ها و شهر های آن به همراه طول و عرض جغرافیایی در اختیار دارید. به دلیل Syntax خاص آن در بسیاری از زبان های برنامه نویسی قابل تجزیه و تحلیل است و می تواند به عنوان داده های ورودی یا خروجی جایگزین مناسبی برای XML باشد.

[
  {
    "state": "آذربایجان شرقی",
    "city": "تبریز",
    "lat": 38.08,
    "lon": 46.29
  },
  {
    "state": "آذربایجان شرقی",
    "city": "بستان‌آباد",
    "lat": 37.84,
    "lon": 46.83
  },
  {
    "state": "فارس",
    "city": "قادرآباد",
    "lat": 30.28,
    "lon": 53.25
  },
  {
    "state": "فارس",
    "city": "فسا",
    "lat": 28.94,
    "lon": 53.65
  },
  {
    "state": "فارس",
    "city": "مهر",
    "lat": 27.55,
    "lon": 52.88
  },
  {
    "state": "فارس",
    "city": "سده",
    "lat": 30.71,
    "lon": 52.17
  }
]

 

خواندن فایل Json در جاوا اسکریپت

روش های مختلفی برای فراخوانی فایل Json در جاوا اسکریپت است اما در اینجا به ساده ترین و کوتاه ترین راه اشاره می کنیم و سپس به سرغ حل مثالمان می رویم.

        $.getJSON("/Content/a_js/Sate_and_city.json", function (text) {
           
        });

 

پر کردن DropDownlist با Json در جاوا اسکریپت

در این مرحله می خواهیم فایل Json را فراخوانی کنیم و لیست استان ها را استخراج کرده و در DropDownlist بریزیم. با توجه به مطالب گفته شده در بالا ابتدا باید اطلاعات خود را آماده کنیم. فرض کنید جدول اطلاعات شما در یک فایل اکسل ذخیره شده است پس می توانید مراحل زیر را قدم به قدم طی کنید.

  • با مراجعه به این سایت جدول اطلاعات خود را کپی پست کنید و آن را تبدیل به فرمت Json کنید.
  • سپس آن را در یک فایل text ذخیره کنید و پسوند آن را به Json تغییر دهید.
  • کتابخانه Jquery را به پروژه خود اضافه کنید.
  • در این مرحله با استفاده از دستور بالا فایل Json را فراخوانی می کنیم.
  • ابتدا با متد map لیست استان ها را استخراج می کنیم.
  • سپس تکراری ها را حذف کردیم.
  • و در آخر با یک حلقه تگ Select را پر کردیم.

 

        $.getJSON("/Content/a_js/Sate_and_city.json", function (text) {
           
            var data = text.map(function (ostan) {
                return ostan.state
            });

            var uniqueItems = Array.from(new Set(data))

            $.each(uniqueItems, function (i, option) {
                $('#state').append($('<option/>').attr("value", option).text(option));
            });

        });

 

از اینکه ما را در مقاله کار با Json در جاوا اسکریپت همراهی کردید از شما سپاس گذاریم.

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *