I have the following:
children: [
{
name: 'test',
path: 'test',
meta: {
label: 'test',
link: 'test'
},
component: lazyLoading('test/basic')
},
{
name: 'test',
path: 'test',
meta: {
label: 'test',
link: 'test'
},
component: lazyLoading('test/Basic')
},
{
name: 'test',
path: 'test',
meta: {
label: 'test',
link: 'test'
},
component: lazyLoading('test/Basic')
}
]
I want to follow this structure, but programmatically create each dictionary using each record returned from an API call.
example api call
function getData() {
axios.get(Url + input.value)
.then(function (response) {
json_data = response.data;
});
}
so in python this would probably look something like:
test_list=[]
for item in json_data:
dict = {
name: item.name
path: item.path
meta: {
label: item.label,
link: item.link,
},
component: lazyLoading('testitem/basic')
},
test_list.append(dict)
children: test_list
How can I accomplish this in javascript? I'm having a real hard time learning javascript after doing python.
UPDATE:
This is the full code block that I am working with.
export default {
name: 'test',
meta: {
icon: 'fa-android',
expanded: false
},
children: [
{
name: 'test',
path: 'test',
meta: {
label: 'test',
link: 'test'
},
component: lazyLoading('test/Basic')
}
]
}
You were very close:
const children = [];
json_data.forEach(item => {
const dict = {
name: item.name,
path: item.path,
meta: {
label: item.label,
link: item.link,
},
component: lazyLoading('testitem/basic'),
}
children.push(dict);
});
Related
How to transform the "const itemsProject" below into a "function ItemsProject" with the same return?
function onClick(e, item) {}
const itemsProject = [
{
name: 'companies',
label: translate('sidebarProjectCompanies'),
Icon: CompanyIcon,
path: '/project/:id/companies',
onClick,
}
{
name: 'currencies',
label: translate('sidebarProjectCurrencies'),
Icon: CurrencyIcon,
path: '/project/:id/currencies',
onClick,
}
];
export default itemsProject;
I thank you for your help!
To get the data from a function and export it, you can use the following code:
function onClick(e, item) {}
function itemsProject() {
return [
{
name: 'companies',
label: translate('sidebarProjectCompanies'),
Icon: CompanyIcon,
path: '/project/:id/companies',
onClick,
}
{
name: 'currencies',
label: translate('sidebarProjectCurrencies'),
Icon: CurrencyIcon,
path: '/project/:id/currencies',
onClick,
}
]
};
export default itemsProject;
Use it in other files as:
import itemsProject from "/path/of/file";
itemsProject();
Declare the function and return the same array.
function onClick(e, item) {}
function itemsProject() {
return [
{
name: 'companies',
label: translate('sidebarProjectCompanies'),
Icon: CompanyIcon,
path: '/project/:id/companies',
onClick,
}
{
name: 'currencies',
label: translate('sidebarProjectCurrencies'),
Icon: CurrencyIcon,
path: '/project/:id/currencies',
onClick,
}
];
}
I have one object and inside the object, there have roles(array of number) and I want to transform only the roles, it should be an array of objects. see below
current object,
displayConfiguration: {
widgetList: {
widgetName: 'widget tiltle',
entityType: 'Asset',
roles: [202]
},
addIcon: {
fileName: '',
fileDownloadUri: ''
},
displayInfoIcon: {
visible: true,
summaryText: 'info icon text'
},
useFilter: true
}
expected object
displayConfiguration: {
widgetList: {
widgetName: 'widget tiltle',
entityType: 'Asset',
roles: [
{
id: 202
}
]
},
addIcon: {
fileName: '',
fileDownloadUri: ''
},
displayInfoIcon: {
visible: true,
summaryText: 'info icon text'
},
useFilter: true
}
const displayConfiguration = {
widgetList: {
widgetName: 'widget tiltle',
entityType: 'Asset',
roles: [202]
},
addIcon: {
fileName: '',
fileDownloadUri: ''
},
displayInfoIcon: {
visible: true,
summaryText: 'info icon text'
},
useFilter: true
}
const answer = {
...displayConfiguration,
widgetList: {
...displayConfiguration.widgetList,
roles: displayConfiguration.widgetList.roles.map(x => ({id: x}))
}
}
console.log(answer)
Should be rather straight forward, you can use map function to transform array
You can you use .map() function, that will walk through each element and convert your number to object that you need.
const displayConfiguration = {
widgetList: {
widgetName: 'widget tiltle',
entityType: 'Asset',
roles: [202]
},
addIcon: {
fileName: '',
fileDownloadUri: ''
},
displayInfoIcon: {
visible: true,
summaryText: 'info icon text'
},
useFilter: true
};
const roles = displayConfiguration.widgetList.roles;
displayConfiguration.widgetList.roles = roles.map(role => {
return {
id: role
}
})
console.log(displayConfiguration);
The map function creates a new array populated with the results of calling a provided function on every element in the calling array.
I have made a separate file for routes.
Here is the structure:
I have a separate folder for every module.
->routes->admin->userRoutes.js,contactRoutes.js etc
Then, inside routes->admin.js I import those files like this:
import contactsRoutes from './admin/customerRoutes'
import userRoutes from './admin/userRoutes'
Again, in router.js, I want to include admin.js so I can use both contactsRoutes and userRoutes inside router.js:
import './routes/admin.js'
Here is our customerRoutes.js this file contacines routes of this module. i means all the routes of customer CRUD
customerRoutes.js
import CustomerList from '#/views/apps/customers/CustomersList.vue';
export default
[{
path: '/customers',
name: 'customers',
component: CustomerList,
title: 'People',
meta: {
breadcrumb: [
{ title: 'All Customers', url: '/customers' },
{ title: 'All Customers', active: true },
],
pageTitle: 'Customers',
rule: 'admin',
authRequired: true
}
},
{
path: '/customers/view/:id',
name: 'customers-view',
component: () =>
import('#/views/apps/customers/CustomerView.vue'),
meta: {
breadcrumb: [
{ title: 'All Customers', url: '/customers' },
{ title: 'All Customers', url: '/customers' },
{ title: 'View', active: true },
],
pageTitle: 'Customers',
rule: 'admin',
authRequired: true
}
}
,
{
path: '/customers',
name: 'customers',
component: () =>
import('#/views/apps/customers/CustomersList.vue'),
meta: {
breadcrumb: [
{ title: 'All Customers', url: '/customers' },
{ title: 'All Customers', active: true },
],
pageTitle: 'Customers',
rule: 'admin',
authRequired: true
}
}, {
path: '/customers/view/:id',
name: 'customers-view',
component: () =>
import ('#/views/apps/customers/CustomerView.vue'),
meta: {
breadcrumb: [
{ title: 'All Customers', url: '/customers' },
{ title: 'All Customers', url: '/customers' },
{ title: 'View', active:true },
],
pageTitle: 'Customers',
rule: 'admin',
authRequired: true
}
},
{
path: '/customers/add',
name: 'customers-add',
component: () =>
import ('#/views/apps/customers/CustomerAdd.vue'),
meta: {
breadcrumb: [
{ title: 'All Customers', url: '/customers' },
{ title: 'All Customers', url: '/customers' },
{ title: 'Add', active : true },
],
pageTitle: 'Customers',
rule: 'admin',
authRequired: true
}
},
{
path: '/customers/edit/:id',
name: 'customers-edit',
component: () =>
import ('#/views/apps/customers/CustomerEdit.vue'),
meta: {
breadcrumb: [
{ title: 'All Customers', url: '/customers' },
{ title: 'All Customers', url: '/customers' },
{ title: 'Edit', active : true },
],
pageTitle: 'Customers',
rule: 'admin',
authRequired: true
}
},];
```
But, it is giving me an error that both variables are not available.
Is there any solution available?
i wanna product new menu i try Recursive dictionary array
but still not get correct datas.
below its two array , globalRoutes its dict array , menuRoutes its normal array i wanna use
menuRoutes to search globalRoutes
below its my code:
const globalRoutes = [
{
path: '/user',
meta: {
title: 'UserManager',
icon: 'el-icon-user'
},
children: [{
path: 'userinfo',
meta: {
title: 'UserInfo',
}
},
{
path: 'roleinfo',
meta: {
title: 'Roleinfo'
}
},
{
path: 'rolemenu',
meta: {
title: 'roleMenu'
}
}
]
},
{
path: '/test',
meta: {
title: 'TestMenu',
icon: 'el-icon-setting'
}
}
]
const menuRoutes = ['userinfo', '/test']
function Test1(routes) {
res = []
for(let route of routes){
console.log(route.path)
const data = {}
let menuIndex = menuRoutes.indexOf(route.path)
if(menuIndex > -1){
data.path = route.path
data.meta = route.meta
}else{
if(route.children){
data.path = route.path
data.meta = route.meta
data.children = Test1(route.children)
}
}
if (Object.keys(data).length > 0){
res.push(data)
}
}
return res
}
console.log(Test1(globalRoutes))
Error datas as below:
[
{ path: 'userinfo', meta: { title: 'UserInfo' } },
{
path: '/user',
meta: { title: 'UserManager', icon: 'el-icon-user' },
children: [Circular]
},
{
path: '/test',
meta: { title: 'TestMenu', icon: 'el-icon-setting' }
}
]
I wanted correct data as below:
[
{
path: '/user',
meta: { title: 'UserManager', icon: 'el-icon-user' },
children: [{ path: 'userinfo', meta: { title: 'UserInfo' } }]
},
{
path: '/test',
meta: { title: 'TestMenu', icon: 'el-icon-setting' }
}
]
how need i change code to get correct datas?
Here is simple example based on your code.
const globalRoutes = [
{
path: '/user',
meta: {
title: 'UserManager',
icon: 'el-icon-user'
},
children: [{
path: 'userinfo',
meta: {
title: 'UserInfo',
}
},
{
path: 'roleinfo',
meta: {
title: 'Roleinfo'
}
},
{
path: 'rolemenu',
meta: {
title: 'roleMenu'
}
}
]
},
{
path: '/test',
meta: {
title: 'TestMenu',
icon: 'el-icon-setting'
}
}
];
const menuRoutes = ['userinfo', '/test'];
const inRoutes = (search, routes) => {
let result = [];
routes.forEach((item, index) => {
if (search.includes(item.path)) {
result.push(item);
}
if (item.children) {
item.children.forEach((itm, idx) => {
if (search.includes(itm.path)) {
item.children = item.children.filter(i => i === itm); // or item.children = [itm];
result.push(item);
}
});
}
});
return result;
};
console.log(inRoutes(menuRoutes, globalRoutes));
Hope this helps.
I have a problem when trying to make breadcrumb with vuejs, when the routes do not have parameters, it works, but for those routes that need a parameter, I do not know how to have the parameter in breadcrumb
Routes
{
path: '/',
component: () => import('#/components/kit/index'),
name: 'Home',
meta: {
requiresAuth: false,
visibleAfterLogin: true,
breadcrumb: [
{ name: 'Home' }
]
}
},
{
path: '/',
component: () => import('#/pages/kit/Layout'),
children: [
{
path: 'otherouter/:name',
name: 'Other',
components: {
default: () => import('#/components/kit/Other1'),
sidebar: () => import('#/components/kit/Sidebar')
},
meta: {
requiresAuth: false,
visibleAfterLogin: true,
breadcrumb: [
{ name: 'Home', link: 'Home' },
{ name: 'Other' }
]
}
},
{
path: 'studybook/:book',
name: 'Kit',
components: {
default: () => import('#/components/kit/TypeTrails'),
sidebar: () => import('#/components/kit/Sidebar')
},
meta: {
requiresAuth: false,
visibleAfterLogin: true,
breadcrumb: [
{ name: 'Home', link: 'Home' },
{ name: 'Trilhas', link: 'Other' },
{ name: 'Caderno de estudo' }
]
}
}
]
}
Breadcrumb.vue
<template>
<ul class="breadcrumbs">
<li v-for="(item, index) in breadcrumbList" :key="item.name">
<icon name="breadcrumb" size="13px" v-if="index === 0" #click="to(item)" />
{{item.name}}
<strong v-else>{{item.name}}</strong>
</li>
</ul>
</template>
<script>
export default {
data(){
return{
breadcrumbList: []
}
},
mounted(){
this.breadcrumbList = this.$route.meta.breadcrumb
},
watch: {
'$route' (){
this.breadcrumbList = this.$route.meta.breadcrumb
}
},
methods: {
to(item){
if(item.link){
this.$router.push({name: item.link})
}
}
}
}
</script>
maybe too late but you can achieve this making the breadcrumb a function receiving the route object for example:
// router file
{
path: '/items/:id',
...,
meta: {
breadcrumb: (route) => ([
{
name: 'My Items Index view',
to: { name: 'ItemIndex' }
},
{
name: 'My Item Detail view',
to: {
name: 'ItemDetail',
params: { id: route.params.id }
}
}
])
}
}
// app-bar or similar file
export default {
name: 'AppBar',
computed: {
breadcrumb() {
return this.$route.meta.breadcrumb(this.$route)
}
}
}