راکت
حل شده

نحوه فراخوانی یک فایل دسته بندی json با jquery

4 پاسخ

باسلام و تبریک سال نو
دوستان اگر یک فایل دسته بندی (JSON) به صورت زیر داشته باشیم با چه ترفند یا با چه کدی از jquery یک فرانت دولپر میتونه این فایل دسته بندی json رو فراخوانی کنه در پروژه خودش در صورتی که همه چیز درست پیش بره


[
  {
    "id": 1,
    "slug": "home",
    "name": "خانه",
    "parent": null
  },
  {
    "id": 2,
    "slug": "car",
    "name": "ماشین",
    "parent": null
  },
  {
    "id": 3,
    "slug": "benz",
    "name": "بنز",
    "parent": 2
  },
  {
    "id": 4,
    "slug": "lamburgini",
    "name": "لامبورگینی",
    "parent": 2
  },

  {
    "id": 5,
    "slug": "mobile",
    "name": "موبایل",
    "parent": null
  },
  {
    "id": 6,
    "slug": "samsung",
    "name": "سامسونگ",
    "parent": 5
  },
  {
    "id": 7,
    "slug": "apple",
    "name": "اپل",
    "parent": 5
  },
  {
    "id": 8,
    "slug": "GLX",
    "name": "جی ال ایکس",
    "parent": 5
  },

]

من از کد زیر برای خروجی از json استفاده کردم

$.getJSON('./assets/json/category.json', function (result) {
    var i = 0 ;
    $.each(result, function (key, value) {

        if(value.parent == null){
            $('nav.top-nav ul.ul-box-nav-cat').append(

                `
              <li class="main-menu" id=`+[i]+`>
                <a href="" class="item_txt">
                    <i class="far `+ value.icon +` main-menu-icon FontAwesome-debug"></i> `+ value.name +`
                </a>
                <ul class="sub-menu">
                </ul>
             </li>
                `
            )
            i++;
        }
        if(value.parent == 1){
            $('nav.top-nav ul li#0 ul.sub-menu').append(
                `
                    <li>
                    <a href="">`+ value.name +`</a>
                    </li>
                `
            )
        }
        if(value.parent == 2){
            $('nav.top-nav ul li#1 ul.sub-menu').append(
                `
                    <li>
                    <a href="">`+ value.name +`</a>
                    </li>
                `
            )
        }
        if(value.parent == 12){
            $('nav.top-nav ul li#2 ul.sub-menu').append(
                `
                    <li>
                    <a href="">`+ value.name +`</a>
                    </li>
                `
            )
        }

ولی مشکلی که هست اینه که من برای اینکه مثلا اگر در فایل JSON یک دسته بندی جدید با (" parent" : "50") اضافه بشه مجبورم یک دستور دیگه به کد jquery خودم مثل زیر اضافه کنم تا کار کنه

    if(value.parent == 50){
            $('nav.top-nav ul li#3 ul.sub-menu').append(
                `
                    <li>
                    <a href="">`+ value.name +`</a>
                    </li>
                `
            )
        }

ولی من میخوام کد jquery ثابت باشه و اگر به فایل json دسته بندی اضافه شد به صورت اتوماتیک کار کنه و دیگه نیازی نباشه کد jquery بزنم
؟؟؟!؟؟!؟!؟!
باتشکر

@MahdiMashayekhi
@endworld
@magicaldev1
@ChatGPT
@amata
@amata
@Arshiamohammadei
@asp.gosk
@mahdidv
@Farzadameri
@mehranmarandi
@ChatGPT
@faridaghili
@Farzadameri
@mhyeganeh
@developer
@mikaiil

ثبت پرسش جدید

پاسخ‌ها

4
مهدی مشایخی
مهدی مشایخی
@MahdiMashayekhi

تخصص: برنامه نویس پایتون - ماشین لرنینگ - جنگو

بهترین پاسخ

سلام روز بخیر
فایل رو به صورت یک متغییر بارگذاری کنید و با تابع get json میتونید محتویات اون رو بخونید
به کد زیر دقت کنید

$(document).ready(function() {
  $.getJSON("categories.json", function(data) { 
    $.each(data, function(index, category) { 
      var parent_id = category.parent; 
      var category_name = category.name; 
      var category_slug = category.slug; 

      var category_html = "<li data-id='" + category.id + "' data-parent='" + parent_id + "'>" +
                             "<a href='#'>" + category_name + "</a>" +
                             "<ul></ul>" +
                          "</li>";
      if (parent_id) {
        $("li[data-id='" + parent_id + "'] > ul").append(category_html);
      } else {
        $("#categories").append(category_html);
      }
    });
  });
});
mehdiQuestion
mehdiQuestion
@mehdiQuestion

تخصص: frontEndDeveloper

باسلام ممنونم عالی بود
به درستی اجرا شد و متوجه شدم

@MahdiMashayekhi

mehdiQuestion
mehdiQuestion
@mehdiQuestion

تخصص: frontEndDeveloper

باسلام و تشکر
امکانش هست همین رو به صورت vuejs توضیح بدید
ممنونم
@MahdiMashayekhi

شاید پاسخ شما همین‌جا باشد

mehdiQuestion
mehdiQuestion
@mehdiQuestion

تخصص: frontEndDeveloper

باسلام بسیار عالی
فقط میخوام بدونم این تیکه کدی که گفتین معناش یا مفهومش دقیقا چیه ؟
مثلا اگر بخواین در یک جمله توضیح بدین

 $("li[data-id='" + parent_id + "'] > ul")

با تشکر

@MahdiMashayekhi

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام