ساخت درخت از دسته بندیها با 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]



















این ساختار قابلیت تبدیل راحت به JSON برای API را داره؟
بله، خروجی این تابع یک ساختار درختی JSON است که به راحتی میتوانید آن را در API خود استفاده کنید. امیدوارم مفید واقع شود.
بعضی دادهها parent نامعتبر داشته باشند چه اتفاقی میافتد؟
در صورتی که دادهها parent نامعتبر داشته باشند، آن دستهبندی در هیچکدام از شاخههای درخت قرار نمیگیرد و به اصطلاح گم میشود. برای رفع این مشکل، میتوانید قبل از ساخت درخت، دادهها را اعتبارسنجی کنید.
میشه child را به جای آرایه، به صورت object ذخیره کرد؟
بله، امکانش هست. برای این کار باید ساختار تابع childrenOf را کمی تغییر دهید تا به جای آرایه، یک شیء برگرداند.
اگر مقدار parent در داده چیزی غیر از null باشد، آیا تابع همچنان درست عمل میکنه؟
بله، تابع به درستی کار میکند. مقدار parent میتواند هر مقداری غیر از null باشد، تا زمانی که با id یک دسته بندی دیگر مطابقت داشته باشد.
این روش روی دادههای خیلی بزرگ با هزاران دستهبندی هم کارایی خوبی دارد؟
بله، این روش به دلیل استفاده از گروهبندی و رویکرد بازگشتی، برای دادههای بزرگ با تعداد زیادی دستهبندی هم کارایی مناسبی دارد. البته، در دادههای بسیار حجیم، بهینهسازیهای بیشتری نیز ممکن است لازم باشد.