פילטר עבור אובייקט מקונן - js

[chagold]

זה זה?

[dovid]

יהי קל להבין עם מבנה דמו, יש מצב?

[ש.ב.ח.]

@dovid אמר בפילטר עבור אובייקט מקונן - js:

יהי קל להבין עם מבנה דמו, יש מצב?

בבקשה https://codesandbox.io/s/dtl9p?file=/src/dropdown.js

הוא לא כזה קטן.. אבל בס"ה הפונקציה לפילטור כאן (תמונה מתוך הקוד החי):

[ש.ב.ח.]

@dovid
אני מנסה באמצעות הפונקציה הזאת אבל יש לי שגיאה

השגיאה:

[yossiz]

@ש-ב-ח לא הבנתי עד הסוף את כל הקוד שלך, אבל האם אתה מודע לזה שההעתקה שעשית

let filterB = [...filterA];

הינה העתקה "שטחית" לא עמוקה, ככה שיוצא ש-filterB[key] מצביע בדיוק על אותו אובייקט ש-item מצביע.
או במילים אחרות: filterB[key] === item

למה זה readonly עוד לא הבנתי

[ש.ב.ח.]

@yossiz תודה

[dovid]

בעצם אתה רוצה לחפש רקורסיבית בתוך האובייקט ובמקרה של הצלחה להחזיר את כל העץ עד לאיבר הנכון ללא "אחים".
לי זה נראה אתגר מורכב.

[ש.ב.ח.]

@dovid
זה הפונקציה שמספיקה לי
כמובן אחרי ההערה/הארה של @yossiz השתמשתי בספריית lodash

   function filterNested(text){

        let filterA = items.filter( item => {
            if(item.label.includes(text)) return true;
            if(item.childes?.filter( child => child.label.includes(text)).length > 0) return true;
        } );

       let filterB = _.cloneDeep(filterA);

        filterA.forEach((item, key) => {
           if(item.childes.length > 0){

               filterB[key].childes = item.childes.filter(child => child.label.includes(text));

               if(filterB[key].childes.length <= 0){
                  delete filterB[key];
               }
           }
        });

        return filterB;
    }

עריכה:
עדיין אם הצאצאים לא מחזירים true אבל האב מחזיר - הוא נמחק

אז זה העדכון

function filterNested(text){

        let filterA = items.filter( item => {
            if(item.label.includes(text)) return true;
            if(item.childes?.filter( child => child.label.includes(text)).length > 0) return true;
        } );

       let filterB = _.cloneDeep(filterA);

        filterA.forEach((item, key) => {
           if(!item.label.includes(text) && item.childes.length > 0){

               filterB[key].childes = item.childes.filter(child => child.label.includes(text));

               if(filterB[key].childes.length <= 0){
                  delete filterB[key];
               }
           }
        });

        return filterB;
    }

[dovid]

השתמשת בlodash רק להעתקת האובייקט..
אם כבר יש לך lodash כל דבר תבדוק איך עושים שמה, זה עולם ענק.
https://stackoverflow.com/a/34335131/1271037
עריכה: זה לא מה שאתה רוצה בכלל, אבל הסינון שמה עובד יופי בלי לולאה, צריך לשפץ קצת...

[ש.ב.ח.]

@dovid אמר בפילטר עבור אובייקט מקונן - js:

אם כבר יש לך lodash כל דבר תבדוק איך עושים שמה, זה עולם ענק

אני לא מכיר את הספרייה מלבד פקודה ספציפית זו
אני לא אחת שואל את עצמי: "כדי ללמוד משהו אחד צריך ללמוד את כל ה... וכל ה... וכל ה..."
(כשאני אומר ללמוד, בכוונתי ששמתי לי מטרה לבניית איזה פרוייקט בלימוד, אמנם בדרך אני נאלץ - לשמחתי - להכיר לא מעט דברים חדשים שאינם נקשרים ללימוד הנוכחי)

לשם העניין
שמתי לעצמי מטרה (אני יודע שהיא מידי גדולה) ללימוד React בבניית דאשבורד מורכב.