Как добавить поле в объект и вложенные в него объекты?

Question

[Yana]

Есть структура данных: массив объектов с вложенными обектами, у некоторых из них может быть массив вложенных объектов и так далее по вложенности. Нужно добавить к каждому объекту поле disabled, которое зависит от выбранного device_type_id. Пример исходного массива:

[
    {
        "device_type_id": 1,
        "children": [
            {
                "name": "MacOS",
                "id": 4,
                "children": [
                    {
                        "name": "OS X 10",
                        "id": 35
                    }
                ]
            },
            {
                "name": "Windows",
                "id": 3,
                "children": [
                    {
                        "name": "Windows XP",
                        "id": 28,
                        "key": "1_28"
                    },
                    {
                        "name": "Windows Vista",
                        "id": 29,
                        "key": "1_29"
                    }
                ],
                "key": "0.09045594089569153-1"
            },
            {
                "name": "Linux",
                "id": 5,
                "key": "1_5"
            },
            {
                "name": "Other",
                "id": 6,
                "key": "1_6"
            }
        ],
        "key": 1
    },
    {
        "device_type_id": 2,
        "children": [
            {
                "name": "Android",
                "id": 1,
                "children": [
                    {
                        "name": "Android 14",
                        "id": 17,
                        "key": "2_17"
                    },
                    {
                        "name": "Other",
                        "id": 18,
                        "key": "2_18"
                    }
                ],
                "key": "0.6381681047050869-0"
            },
            {
                "name": "Other",
                "id": 6,
                "key": "2_6"
            }
        ],
        "key": 2
    }
]

Одна из множества попыток добавить поле:

disabledOs() {
      this.form.os.map(with_device => {
        const isDisabled = !this.form.device_types.includes(
          with_device.device_type_id
        )
        with_device.disabled = isDisabled

        if (!with_device?.children) return
        with_device.children.map(el => {
          el.disabled = isDisabled

          if (!('device_type_id' in el)) {
            'children' in el
              ? el.children.map(child => (child.disabled = isDisabled))
              : (el.disabled = isDisabled)
          }
        })
      })

      return this.form.os
    }
  }

Заранее спасибо за помощь :)

Comments

[szQocks]

Мне кажется у тебя не верный подход. За место того что бы disabled делать объектам которые не попали в массив фильтров, просто не выбирай их перед отрисовкой и всё. Явно переработала, выпей чаю.

[Yana]

Не отрисовывать действительно было бы проще, но объекты нужно отрисовать и сделать disabled, просто убрать нельзя

[szQocks]

Yana,

{
        "device_type_id": 2,
        "children": [
            {
                "name": "Android",
                "id": 1,
                "children": [
                    {
                        "name": "Android 14",
                        "id": 17,
                        "key": "2_17"
                    },
                    {
                        "name": "Other",
                        "id": 18,
                        "key": "2_18"
                    }
                ],
                "key": "0.6381681047050869-0"
            },
            {
                "name": "Other",
                "id": 6,
                "key": "2_6"
            }
        ],
        "key": 2
    }

как должен выглядеть этот объект после выполнения функции disabledOs, если например он не попал в фильтры

[Yana]

остаться таким как был исходно

[szQocks]

Yana, ладно, не верно написал, а если попал в фильтры ?

[Yana]

то к каждому вложенному и первичному объекту добавляется поле disabled: true. К тем объектам которые не попали в фильтр можно добавить поле disabled: false

[szQocks]

Yana, так ?

{
  "device_type_id": 2,
  "children": [
    {
      "name": "Android",
      "id": 1,
      "children": [
        {
          "name": "Android 14",
          "id": 17,
          "key": "2_17",
          "disabled": false
        },
        {
          "name": "Other",
          "id": 18,
          "key": "2_18",
          "disabled": false
        }
      ],
      "key": "0.6381681047050869-0",
      "disabled": false
    },
    {
      "name": "Other",
      "id": 6,
      "key": "2_6",
      "disabled": false
    }
  ],
  "key": 2,
  "disabled": false
}

[Yana]

да, верно. и то что под фильтры подходит наоборот disabled: true

[szQocks]

Yana,

const recursy = (device, isDisabled) => {

  if(device.children){
    device.children.map(d => recursy(d, isDisabled))
  }

  device.disabled = isDisabled;

  return device;
}

console.log(this.form.os.map(device => recursy(device, !this.form.device_types.includes(device.device_type_id))))

только я там их мутировал, но да пофиг

Answer 1

[Elaryks]

В вашем методе disabledOs свойство children у элементов не меняется, т. к. метод map не мутирует переданный в него массив, а возвращает новый.

disabledOs() {
    const modifyElement = (el, isDisabled) => {
        return {
            ...el,
            ...(el.children && {
                children: el.children.map(c => modifyElement(c, isDisabled)),
            }),
            disabled: isDisabled,
        };
    };

    return this.form.os.map(el => {
        const isDisabled = !this.form.device_types.includes(el.device_type_id);

        return modifyElement(el, isDisabled);
    });
};