من رفتم سربازی اگر محتوای منو دوست داشتید و بدردتون خورد از من حمایت مالی کنید

ساخت درخت از دسته بندی‌ها با javascript

ساخت درخت از دسته بندی‌ها با javascript
ساخت درخت از دسته بندی‌ها با javascript

ساخت درخت از دسته بندی‌ها با javascript

اگر در پروژه‌ی خود از چیزی مثل دسته‌بندی استفاده می‌کنید و این داده به صورت سلسله مراتبی است؛ با کمک این نوشته می‌توانید به سادگی این سلسله مراتب را تولید کنید.

 

ساخت درخت از دسته بندی‌ها با javascript

function recursive_lists(data) {
  const grouped = _.groupBy(data, (item) => item.parent);

  function childrenOf(parent) {
    return (grouped[parent] || []).map((item) => ({
      id: item.id,
      name: item. name,
      slug: item. slug,
      child: childrenOf(item.id),
    }));
  }

  return childrenOf(null);
};

فرض کنید داده‌ای به شکل زیر دارید:

[
    {
        "id": 1,
        "name": "موبایل",
        "slug": "mobile",
        "parent": null
    },
    {
        "id": 2,
        "name": "سامسونگ",
        "slug": "samsung",
        "parent": 1
    },
    {
        "id": 3,
        "name": "ماشین",
        "slug": "car",
        "parent": null
    },
    {
        "id": 4,
        "name": "پژو",
        "slug": "pegu",
        "parent": 3
    },
    {
        "id": 5,
        "name": "پژو ۲۰۶",
        "slug": "pegu206",
        "parent": 4
    },
    {
        "id": 6,
        "name": "پژو پارس",
        "slug": "pars",
        "parent": 4
    },
    {
        "id": 7,
        "name": "سایپا",
        "slug": "saipa",
        "parent": 3
    },
    {
        "id": 8,
        "name": "اپل",
        "slug": "apple",
        "parent": 1
    },
    {
        "id": 9,
        "name": "شیایومی",
        "slug": "mi",
        "parent": 1
    }
]

برای اینکه هر یک از زیر دسته‌ها وارد دسته‌ی اصلی شود و یک object کلی و مرتب دریافت کنید، باید این آموزش را دنبال کنید:

 

روش اول

ابتدا کتابخانه‌ی lodash را با کمک npm نصب کنید:

npm i lodash

سپس این کتابخانه را در پروژه‌ی خود import کنید:

import _ from "lodash";

از تابع زیر استفاده کنید:

export const recursive_lists = (data) => {
  const grouped = _.groupBy(data, (item) => item.parent);

  function childrenOf(parent) {
    return (grouped[parent] || []).map((item) => ({
      id: item.id,
      name: item. name,
      slug: item. slug,
      child: childrenOf(item.id),
    }));
  }

  return childrenOf(null);
};

 

روش دوم

در صفحه ی خود کتابخانه lodash را با کمک cdn آن بارگزاری کنید:

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>

حالا می‌توانید از تابع زیر استفاده کنید:

function recursive_lists(data) {
  const grouped = _.groupBy(data, (item) => item.parent);

  function childrenOf(parent) {
    return (grouped[parent] || []).map((item) => ({
      id: item.id,
      name: item. name,
      slug: item. slug,
      child: childrenOf(item.id),
    }));
  }

  return childrenOf(null);
};

 

اگر مشکلی با کدهای بالا دارید در بخش نظرات همین نوشته برای ما بنویسید.

برای امتیاز به این نوشته کلیک کنید!
[کل: 2 میانگین: 5]