Develop Reference

Cannot read properties of undefined (reading 'current') I can't get slug from array

current page not displayed
I can't get current slug from array
stack:
backend: Sanity
Frontend: Astro.build
Sanity
import { defineField, defineType } from 'sanity'
export default defineType({
name: 'art',
title: 'Arts',
type: 'document',
fields: [
defineField({
name: 'year',
title: 'Year',
type: 'string',
options: {
hotspot: true,
},
}),
defineField({
name: 'images',
title: 'Arts',
type: 'array',
of: [{
name: 'object',
title: 'object',
type: 'object',
options: {
hotspot: true,
},
fields: [{
name: 'image',
type: 'image',
title: 'image',
},
{
name: 'title',
type: 'string',
title: 'Title',
},
{
name: 'slug',
title: 'Slug',
type: 'slug',
options: {
source: 'title',
maxLength: 96,
},
},
],
}, ],
}),
]
})
Astro
[slug].astro
---
import Layout from '../../layouts/Page.astro'
import { useSanityClient } from "astro-sanity";
export async function getAllArts() {
const query = `*[_type == 'art']`;
const data = await useSanityClient().fetch(query);
return data;
}
export interface Props {
art: any;
}
export async function getStaticPaths() {
const allArtInfo = await getAllArts();
return allArtInfo.map(art => ({params: { slug: art.images.slug.current }, props: {art}}));
}
const { art } = Astro.props;
const seo = {
title: '',
description: '',
}
---
<Layout seo={seo}>
<!-- <h1>{art.title}</h1> -->
</Layout>
Trying to display the current page from the "images" array
As soon as I didn 't write output:
Cannot read properties of undefined (reading 'current')
if add [0] before "images"
return allArtInfo.map(art => ({params: { slug: art.images[0].slug.current }, props: {art}}));
the page is displayed with the current slug. only the first array. how to make everything work fine?

So you have an array of arts and each has an array of images, so you have an array of an array of images that you need to unroll in a single array while keeping reference to the art in each image that you need to pass as prop.
You need a double loop, first loop through all art, in which you have second loop through the images. Then you push a new struct with the second loop image and the loop art, like this
export async function getStaticPaths() {
const allArtInfo = await getAllArts();
const allArtImages = []
allArtInfo.forEach(art => {
art.images.forEach((image)=>{
allArtImages.push({image:image,art:art})
})
});
return allArtImages.map(image => ({params: { slug: image.slug.current }, props: {image.art}}));
}

Transform inherited object to specific key

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.

JavaScript product new Menu

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.

Breadcrumb router dynamic

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)
}
}
}

How to create a dictionary using a for loop in javascript?

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);
});