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

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

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

ساختار 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 بریزیم. با توجه به مطالب گفته شده در بالا ابتدا باید اطلاعات خود را آماده کنیم. فرض کنید جدول اطلاعات شما در یک فایل اکسل ذخیره شده است پس می توانید مراحل زیر را قدم به قدم طی کنید.

        $.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 در جاوا اسکریپت همراهی کردید از شما سپاس گذاریم.