Преобразовать объект с ключами в массив объектов в JavaScript

Question

Я столкнулся с проблемой при попытке конвертировать объект с ключами в массив объектов в JavaScript

Каков наилучший способ преобразовать входной объект, чтобы он напоминал структуру массива требуемого выхода?

const routes = {
    Home: {
        screen: HomeScene,
        path: '/'
    },
    About: {
        screen: AboutScreen,
        path: '/about'
    }
};

const output_routes = 
[{
    component: Layout,
    routes: [{
        path: '/',
        exact: true,
        component: HomeScene,
    },
    {
        path: '/about',
        exact: true,
        component: AboutScreen,
    }],
}];

Answer 1

Функция Object.keys() отлично подходит для чего-то подобного.

Попробуйте это:

function toArray(obj) {
  return Object.keys(obj).map(function(key) {
    return obj[key];
  });
}

или ES6:

const toArray = (obj) => Object.keys(obj).map(key => obj[key]);

Что должно дать вам:

[
   { screen: HomeScene, path: '/' },
   { screen: AboutScreen, path: '/about' } 
]

Answer 2

Я смог реализовать, как показано ниже. Это помогает мне использовать один и тот же объект маршрута и для response-navigation, и response-routerv4, который я использую в своем приложении act-native-web.

const ROUTES = {
    Home: {
        screen: 'HomeScene',
        path: '/'
    },
    About: {
        screen: 'AboutScreen',
        path: '/about'
    }
};

//const toArray = (ROUTES) => Object.keys(ROUTES).map(key => ROUTES[key]);
const routes_new = Object.keys(ROUTES).map((routeName,idx)=> {
const { screen: Screen, path } = ROUTES[routeName]; 
const routeProps = 
      {
                path,
                component: Screen,
                key: idx,
                exact: true
            }; 
  return routeProps

})

routes_server = [];
routes_server.push({
        component:'Layout',
    });

routes_new.push({component: 'NotFoundScene'})
routes_server.push({routes:routes_new})
console.log(routes_server);