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