Добавление данных во вложенный объект JSON с дочерними элементами на основе массива — Javascript/REACT

Привет, сообщество stackoverflow! Я уже некоторое время создаю свое собственное приложение полного стека на платформе NEXTjs. Это идет довольно хорошо!! К сожалению, я застрял на объекте импорта JSON для компонента древовидной структуры. Компонент древовидной структуры должен быть заполнен с использованием определенной вложенной структуры, вместе с тем, какой элемент древовидной структуры должен быть выбран при первоначальном рендеринге.

Мне удалось получить правильный объект JSON из базы данных, используя функцию рекурсивного дерева sql.

const jsonObject = 

{
    "id": "bfa3fdf8-4672-404e-baf5-0f9098a5705b",
    "label": "main category 1",
    "children": [
        {
            "id": "12e544bc-91b1-4e5d-bdbc-2163a5618305",
            "label": "sub category 1.1",
            "children": []
        },
        {
            "id": "3f5e5cc7-f8b2-4d75-89e1-841c66d863e6",
            "label": "sub category 1.2",
            "children": [
                {
                    "id": "903a727f-d94d-44ff-b2f6-a985fd167343",
                    "label": "sub category 1.2.1",
                    "children": []
                },
                {
                    "id": "fb344480-8588-4ce3-9662-f8e89069e4b4",
                    "label": "sub category 1.2.2",
                    "children": []
                }
            ]
        }
    ]
}

Проблема в том, что этот объект с категориями необходимо обновить с помощью пары ключ-значение «проверено: «истина»» или «проверено: «ложь»» на основе существования в массиве referenceSelectedCategories. И я не знаю, как это сделать; поддержание структуры и объекта по мере необходимости.

const desiredOutputJsonObject = 

{
    "id": "bfa3fdf8-4672-404e-baf5-0f9098a5705b",
    "label": "main category 1",
**  "checked": "false",**
    "children": [
        {
            "id": "12e544bc-91b1-4e5d-bdbc-2163a5618305",
            "label": "sub category 1.1",
**          "checked": "true",**
            "children": []
        },
        {
            "id": "3f5e5cc7-f8b2-4d75-89e1-841c66d863e6",
            "label": "sub category 1.2",
**          "checked": "false",**
            "children": [
                {
                    "id": "903a727f-d94d-44ff-b2f6-a985fd167343",
                    "label": "sub category 1.2.1",
**                  "checked": "false",**                    
                    "children": []
                },
                {
                    "id": "fb344480-8588-4ce3-9662-f8e89069e4b4",
                    "label": "sub category 1.2.2",
**                  "checked": "true",**   
                    "children": []
                }
            ]
        }
    ]
}
const referenceSelectedCategories = 
[
    {
        "categoryId": "12e544bc-91b1-4e5d-bdbc-2163a5618305",
        "productId": "efed1c38-391b-4b5a-a9f1-91f3faec5f44",
        "Id": "f82b0f63-3f39-486c-9157-5c7683b8e3b2"
    },
    {
        "categoryId": "fb344480-8588-4ce3-9662-f8e89069e4b4",
        "productId": "efed1c38-391b-4b5a-a9f1-91f3faec5f44",
        "Id": "b2e8681b-eec4-404d-8f87-c6314db42e30"
    }
]

Я прочитал несколько вопросов о стеке, также искал примеры, но не могу заставить его работать. Может ли кто-нибудь помочь мне здесь?

Некоторая дополнительная информация:

  • Язык кода, который я использую, это REACT на платформе NEXTjs;
  • Компонент Treeview может иметь отдел не более 5 уровней;
  • Структура объекта JSON не меняется, она точно такая же, как представлена ​​выше.
  • «id» в объекте JSON соответствует «categoryId» в массиве.
  • Вам нужно больше информации? :) Просто спросите, я предоставлю вам дополнительную информацию!

С уважением,

Крис

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
97
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Прямое решение с рекурсивным методом. Сделал быстрый тест, работает нормально. Если обнаружены какие-либо проблемы, пожалуйста, укажите это.

    const parentObj = 
    [
        {
            "categoryId": "12e544bc-91b1-4e5d-bdbc-2163a5618305",
            "productId": "efed1c38-391b-4b5a-a9f1-91f3faec5f44",
            "Id": "f82b0f63-3f39-486c-9157-5c7683b8e3b2"
        },
        {
            "categoryId": "fb344480-8588-4ce3-9662-f8e89069e4b4",
            "productId": "efed1c38-391b-4b5a-a9f1-91f3faec5f44",
            "Id": "b2e8681b-eec4-404d-8f87-c6314db42e30"
        }
    ]
    
    const existingId = parentObj.map((item)=> (item.Id))
    
    const childobj = 
    
    {
        "id": "bfa3fdf8-4672-404e-baf5-0f9098a5705b",
        "label": "main category 1",
        "children": [
            {
                "id": "12e544bc-91b1-4e5d-bdbc-2163a5618305",
                "label": "sub category 1.1",
                "children": []
            },
            {
                "id": "3f5e5cc7-f8b2-4d75-89e1-841c66d863e6",
                "label": "sub category 1.2",
                "children": [
                    {
                        "id": "903a727f-d94d-44ff-b2f6-a985fd167343",
                        "label": "sub category 1.2.1",
                        "children": []
                    },
                    {
                        "id": "f82b0f63-3f39-486c-9157-5c7683b8e3b2",
                        "label": "sub category 1.2.2",
                        "children": []
                    }
                ]
            }
        ]
    }
const childObj = [childobj]
    const updateData=(obj)=> {
        if (existingId.includes(obj.id)) obj['checked'] = true; else obj['checked'] = false
    }
    
    const traverse=(childObj)=> {
        for(const obj of childObj) {
            updateData(obj);
            if (obj.children.length > 0) traverse(obj.children); 
        }
    }
    
    traverse(childObj); 

Привет, Навин, спасибо за ответ на мой вопрос. Я попробовал код и получил следующую ошибку: TypeError: childobj[Symbol.iterator] не является функцией. Не могли бы вы проверить свой код, пожалуйста?

Chris Kuiper 16.11.2022 16:22

@ChrisKuiper о, пропустил эту строку const childObj = [childobj], сейчас обновлено

Naveen 16.11.2022 16:50

Спасибо, Навин! Код работает. Все еще получаю ошибку в моем приложении. Думаю, это связано с тем, что я извлекаю данные с помощью useEffect вместо getServerSideProps. Я собираюсь переместить выборку в getServerSideProps, чтобы функция не запускалась в пустом состоянии.

Chris Kuiper 16.11.2022 17:38

Я получил это работает в моем приложении! Одно небольшое замечание... "const existsId = parentObj.map((item)=> (item.Id))" должно быть "const existsId = parentObj.map((item)=> (item.categoryId))", но получилось это исправлено! Спасибо еще раз за помощь.

Chris Kuiper 16.11.2022 19:07

Здесь вы можете ввести эту логику:

let desiredOutputJsonObject = {
  id: "bfa3fdf8-4672-404e-baf5-0f9098a5705b",
  label: "main category 1",
  checked: false,
  children: [
    {
      id: "12e544bc-91b1-4e5d-bdbc-2163a5618305",
      label: "sub category 1.1",
      checked: true,
      children: [],
    },
    {
      id: "3f5e5cc7-f8b2-4d75-89e1-841c66d863e6",
      label: "sub category 1.2",
      checked: false,
      children: [
        {
          id: "903a727f-d94d-44ff-b2f6-a985fd167343",
          label: "sub category 1.2.1",
          checked: false,
          children: [],
        },
        {
          id: "fb344480-8588-4ce3-9662-f8e89069e4b4",
          label: "sub category 1.2.2",
          checked: true,
          children: [
              {
          id: "fb344480-8588-4ce3-9662-f8e89069e4b9",
          label: "sub category 1.2.2",
          checked: false,
          children: [],
        },
          ],
        },
          
      ],
    },
  ],
};

let referenceSelectedCategories = [
  {
    categoryId: "12e544bc-91b1-4e5d-bdbc-2163a5618305",
    productId: "efed1c38-391b-4b5a-a9f1-91f3faec5f44",
    Id: "f82b0f63-3f39-486c-9157-5c7683b8e3b2",
  },
  {
    categoryId: "fb344480-8588-4ce3-9662-f8e89069e4b4",
    productId: "efed1c38-391b-4b5a-a9f1-91f3faec5f44",
    Id: "b2e8681b-eec4-404d-8f87-c6314db42e30",
  },
    {
    categoryId:"fb344480-8588-4ce3-9662-f8e89069e4b9",
    productId: "efed1c38-391b-4b5a-a9f1-91f3faec5f44",
    Id: "b2e8681b-eec4-404d-8f87-c6314db42e30",
  },
];

let stack = [desiredOutputJsonObject];

while (stack.length) {
  let desiredOutput = stack.pop();

  if (desiredOutput.children) {
    desiredOutput.children.forEach((node) => {
     //get node whose id == category id
      let result = referenceSelectedCategories.find(
        (obj) => obj.categoryId === node.id
      );

      //   while traversing if we get referenceSelectedCategories.categoryId ==desiredOutputJsonObject.id
      if (result) {
        node.checked = true;
      }

      // for traverse purpose
      if (node.children.length) {
        stack.push(node);
      }
    });
  }
}

console.info(desiredOutputJsonObject);

Другие вопросы по теме