Как преобразовать вложенный объект объектов в массив объектов

Привет всем, у меня есть следующий код

данные, которые я хочу преобразовать.

    const obj = {

     numbers: {
      label: "main numbers",
      pageTitle: "Numbers",
      key: "1",
        items: {
          firstNumber: {
            label: "first number",
            pageTitle: "first",
            key: "first"
           },
         secondNumber: {
            label: "second number",
            pageTitle: "second",
            key: "second"
           }  
        }
     },

    letters: {
      label: "main Letters",
      pageTitle: "Letters",
      key: "2",
         items: {
           firstLetter: {
            label: "first Letter",
            pageTitle: "first",
            key: "first"
         }
       }
     },

    signs: {
       label: "main sign",
       pageTitle: "Sign",
       key: "3"
    }
 };

В моей переменной obj у меня есть 3 других объекта

numbers объект, который имеет items свойство, которое включает в себя 2 других объекта.

letters объект, который имеет items свойство, включающее только один объект.

signs объект.

Мне нужно преобразовать мой obj следующим образом.

    [
      {
        label:"main numbers", 
        pageTitle:"Numbers", 
        key:1, 
        children: [{label,pageTitle,key},{label,pageTitle,key}] 
      },
      {
        label:"main Letters", 
        pageTitle:"Letters", 
        key:1, 
        children: [{label,pageTitle,key}] 
      },
     {
        label:"main sign", 
        pageTitle:"Sign", 
        key:1, 
        children: [] 
      },


    ]

для этого преобразования я написал следующий код.

    const transformedData = Object.values(obj).map((menuitem) => menuitem);

    const data = [];

    transformedData?.map((x) => {
      const newData = {};
      newData.label = x.label;
      newData.pageTitle = x.pageTitle;
      newData.key = x.key;
      newData.children = x?.Object?.values(items)?.map((el) => {
        newData.children.label = el.label;
        newData.children.pageTitle = el.pageTitle;
        newData.children.key = el.key;
      });
      data.push(newData);
    });

Все работало, но для children вместо вывода массива печатается undefined.

Пожалуйста, помогите мне решить эту проблему.

Поведение ключевого слова "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) для оценки ваших знаний,...
2
0
53
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

xне имеет Objects. Измените его на:

newData.children = Object.values(x.items)?.map(/*...*/);
Object.values всегда возвращает массив.
Nina Scholz 24.11.2022 13:40

Вы можете показать это в фрагменте кода, пожалуйста? :)

someone 24.11.2022 13:45

Это то, что вам нужно?

const transformedData = Object.values(obj).map((menuitem) => menuitem);

const data = [];

transformedData?.map((x) => {
  const newData = {};
  newData.label = x.label;
  newData.pageTitle = x.pageTitle;
  newData.key = x.key;
  if (x.hasOwnProperty('items')){
  newData.children = Object.values(x.items).map((el) => {
    const obj = {
    label:el.label,
    pageTitle:el.pageTitle,
    key:el.key
    }
    return obj
  })};
  data.push(newData);
});

console.info(data)

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

Кроме того, я думаю, что доступ и назначение newData.children.label было проблематичным, поскольку newData.children еще не было. Итак, мы объявляем временную obj внутри карты и возвращаем ее

Наконец, нам нужно проверить, является ли items свойством, которое существует изначально.

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

Я создал функцию для вашего случая.

    const convert = data =>
      Object.values(data)?.map(x => ({
       label: x.label,
       pageTitle :x.pageTitle ,
       key: x.pathname,
        children: x.items
          ? Object.values(x.items || {}).map(el => ({ label: el.label, 
            key:el.pathname,pageTitle:el.pageTitle  }))
         : null,
      }));

Вы можете использовать как const items = convert(obj).

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