this recursive Mustache template can run on node.js, but if I run it on ruby, it gives very strange output. Why that happened and how can I fix it?
const mustache = require('mustache')
const componentTemplate = `
<span class="name">{{name}}</span>
{{#components.length}}
<ul>{{#components}}<li>{{>componentTemplate}}</li>{{/components}}</ul>
{{/components.length}}
`;
const view = {
name: 'System',
components: [
{ name: 'Display',
components: [
{ name: 'Monitor 1', components: [] },
{ name: 'Monitor 2', components: [] }
]
},
{ name: 'Processor',
components: [
{ name: 'CPU', components: [] },
{ name: 'Memory', components: [] },
],
},
{ name: 'Keyboard', components: [] },
{ name: 'Mouse', components: [] }
]
};
const partials = {
componentTemplate: componentTemplate
};
console.log(mustache.render(componentTemplate, view, partials));
Related
I would like to implement in React Js an application which can read file from a directory. Basically, given the root dir what we want is to run trough all the sub dirs and build a tree structure, maybe in JSON format but any suggestion is apprechiated.
I tried using node.js filesystem readdir function but how to build a tree of subfolders?
Below is the JSON I would like to build automatically after reading from the root folder.
Thanks to anyone who will answer me.
[
{
value: '/app',
label: 'app',
children: [
{
value: '/app/Http',
label: 'Http',
children: [
{
value: '/app/Http/Controllers',
label: 'Controllers',
children: [{
value: '/app/Http/Controllers/WelcomeController.js',
label: 'WelcomeController.js',
}],
},
{
value: '/app/Http/routes.js',
label: 'routes.js',
},
],
},
{
value: '/app/Providers',
label: 'Providers',
children: [{
value: '/app/Providers/EventServiceProvider.js',
label: 'EventServiceProvider.js',
}],
},
],
},
{
value: '/config',
label: 'config',
children: [
{
value: '/config/app.js',
label: 'app.js',
},
{
value: '/config/database.js',
label: 'database.js',
},
],
},
{
value: '/public',
label: 'public',
children: [
{
value: '/public/assets/',
label: 'assets',
children: [{
value: '/public/assets/style.css',
label: 'style.css',
}],
},
{
value: '/public/index.html',
label: 'index.html',
},
],
},
{
value: '/.env',
label: '.env',
},
{
value: '/.gitignore',
label: '.gitignore',
},
{
value: '/README.md',
label: 'README.md',
},
];
// #ts-check
// Note: type annotations allow type checking and IDEs autocompletion
const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
/** #type {import('#docusaurus/types').Config} */
const config = {
title: 'title',
tagline: 'tag,
url: 'some-utl',
baseUrl: '/',
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
favicon: 'img/favicon.ico',
organizationName: 'facebook', // Usually your GitHub org/user name.
projectName: 'project', // Usually your repo name.
plugins: [
[
'docusaurus-plugin-openapi',
{
id: 'api',
path: './openapi.json',
routeBasePath: '/api',
},
],
],
presets: [
[
'docusaurus-preset-openapi',
/** #type {import('docusaurus-preset-openapi').Options} */
({
api: {
path: './openapi.json',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
proxy: {
'/api': {
target: 'http://localhost:3000',
},
},
}),
],
],
themeConfig:
/** #type {import('docusaurus-preset-openapi').ThemeConfig} */
({
navbar: {
title: 'title',
logo: {
alt: 'My Site Logo',
src: 'img/logo.svg',
},
items: [{ to: '/api', label: 'API', position: 'left' }],
},
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme,
},
}),
};
module.exports = config;
This is my code for the docusaurus config file but some how the proxy doesn't work
I am trying to change a hardcoded array within another JSX file.
the first file routes.js. I tried loading the array then changing it . it just changes the loaded data not the array directly from the other file. How do i write to the other JSX array from the main component.
const routes = [
{
type: "collapse",
name: "Our Mission",
key: "dashboards",
icon: <Shop size="12px" />,
collapse: [
{
name: "Ways We can Help",
key: "default",
route: "/dashboards/default",
component: Default,
},
{
name: "How It Works",
key: "automotive",
route: "/dashboards/automotive",
component: Automotive,
},
{
name: "Who We Are",
key: "smart-home",
route: "/dashboards/smart-home",
component: SmartHome,
},
],
},
{ type: "title", title: " ", key: "space1" },
{
type: "collapse",
name: "Services",
key: "services",
icon: <Shop size="12px" />,
href: "https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro-material-ui/blob/main/CHANGELOG.md",
component: Default,
noCollapse: true,
},
{
type: "collapse",
name: "Products",
key: "products",
icon: <Shop size="12px" />,
href: "https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro-material-ui/blob/main/CHANGELOG.md",
component: Default,
noCollapse: true,
},
];
export default routes;
code used in main jsx file. I want to be able to write to the remote array changing its values.
const handleSubmit = (event) => {
event.preventDefault();
// I want to push or filter with the code below
{
routes.length = 0;
routes.map((route) => console.log({ route }));
}
};
You can't change the array itself because it's a const. You could change it to a let and then export it like this:
EDIT
export let routes = [
{
type: "collapse",
name: "Our Mission",
key: "dashboards",
icon: <Shop size="12px" />,
collapse: [
{
name: "Ways We can Help",
key: "default",
route: "/dashboards/default",
component: Default,
},
{
name: "How It Works",
key: "automotive",
route: "/dashboards/automotive",
component: Automotive,
},
{
name: "Who We Are",
key: "smart-home",
route: "/dashboards/smart-home",
component: SmartHome,
},
],
},
{ type: "title", title: " ", key: "space1" },
{
type: "collapse",
name: "Services",
key: "services",
icon: <Shop size="12px" />,
href: "https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro-material-ui/blob/main/CHANGELOG.md",
component: Default,
noCollapse: true,
},
{
type: "collapse",
name: "Products",
key: "products",
icon: <Shop size="12px" />,
href: "https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro-material-ui/blob/main/CHANGELOG.md",
component: Default,
noCollapse: true,
},
];
Then to use it in another jsx component you can import it like this.
import {routes} from '../yourPathToIt/main'
Following a request on the Microsoft Azure API translator, I get a list of languages as nested objects. I would like to recover only some values like the "language code and name, but I can't destructure the objects. If you have ideas, methods to advise me, I am really interested.
Thank you very much. Thank you very much.
I have tried to destroy nested objects but I can't.
async getAzureLanguages() {
const getLanguages: any = await new AzureLanguageApi().supportedLanguages();
let provider: string = `Microsoft`;
const languages: ILanguages[] = [{ code: ``, name: ``, providers: [``] }];
const azureLanguageKeys: any = Object.keys(getLanguages.translation);
const azureLanguageValues: any = Object.values(getLanguages.translation);
azureLanguageValues.forEach((element: { code: string; name: string }) => {
return languages.push({code: '', name: element.name, providers: [provider]})
})
// console.log('languages :', languages);
return getLanguages;
}
Here is the first result of the api request :
{"translation":{"af":{"name":"Afrikaans","nativeName":"Afrikaans","dir":"ltr"},"ar":{"name":"Arabic","nativeName":"العربية","dir":"rtl"},"bg":{"name":"Bulgarian","nativeName":"Български","dir":"ltr"},"bn":{"name":"Bangla","nativeName":"বাংলা","dir":"ltr"},"bs":{"name":"Bosnian","nativeName":"bosanski (latinica)","dir":"ltr"},"ca":{"name":"Catalan","nativeName":"Català","dir":"ltr"},"cs":{"name":"Czech","nativeName":"Čeština","dir":"ltr"},"cy":{"name":"Welsh","nativeName":"Welsh","dir":"ltr"},"da":{"name":"Danish","nativeName":"Dansk","dir":"ltr"},...
And my actual result :
languages : [ { code: '', name: '', providers: [ '' ] },
{ code: '', name: 'Afrikaans', providers: [ 'Microsoft' ] },
{ code: '', name: 'Arabic', providers: [ 'Microsoft' ] },
{ code: '', name: 'Bulgarian', providers: [ 'Microsoft' ] },
{ code: '', name: 'Bangla', providers: [ 'Microsoft' ] },
{ code: '', name: 'Bosnian', providers: [ 'Microsoft' ] },
{ code: '', name: 'Catalan', providers: [ 'Microsoft' ] },...
````
I expect to have this :
````
languages : [ { code: 'af', name: 'Afrikaans', providers: [ 'Microsoft' ] },
{ code: 'ar', name: 'Arabic', providers: [ 'Microsoft' ] },
{ code: 'bg', name: 'Bulgarian', providers: [ 'Microsoft' ] },
{ code: 'bn', name: 'Bangla', providers: [ 'Microsoft' ] },
{ code: 'bs', name: 'Bosnian', providers: [ 'Microsoft' ] },
{ code: 'ca', name: 'Catalan', providers: [ 'Microsoft' ] },...
An easier way to do what you are trying to do:
...
azureLanguageKeys.foreach(key => {
languages.push({
code: key,
name: getLanguages.translation[key].name,
providers: [provider]
});
})
Or a for..in loop:
...
for(const key in getLanguages.translation){
languages.push({
code: key,
name: getLanguages.translation[key].name,
providers: [provider]
});
}
Also, you're initializing the languages array with the blank object. Initialize it this way:
const languages: ILanguages[] = [];
i create a json-object and want to write this down to a json-file, but the object is always empty (?)
fs.writeFileSync(__dirname + '/myNewFile.json', JSON.stringify(myObjects));
the content of the written file is now []
fs.writeFileSync(__dirname + '/myNewFile.json', JSON.stringify({bla: myObjects}));
the content of the file is now {"bla":[]}
I doublecheck myObjects and it is not empty.. it is a array with some objects in it.
why is that? what am I doing wrong?
EDIT:
this is the content of myObjects:
[ struct: { id: 'struct',
name: 'Struktur',
icon: 'fa fa-bullseye',
properties: [] },
mp: { id: 'mp',
name: 'Messpunkt',
icon: 'fa fa-circle',
properties: [] },
'356899e5-d8b0-41aa-b7cd-de2135c5a3db': { id: '356899e5-d8b0-41aa-b7cd-de2135c5a3db',
name: 'Untermessung',
icon: 'fa fa-tachometer',
properties: [] },
'8d824cfd-584f-40e9-b9fa-78d7fedcc727': { id: '8d824cfd-584f-40e9-b9fa-78d7fedcc727',
name: 'Kommune',
icon: 'fa fa-thumb-tack',
properties: [] },
'2609b2ac-77aa-42f2-af22-d49fcfc6f0f0': { id: '2609b2ac-77aa-42f2-af22-d49fcfc6f0f0',
name: 'Bereiche',
icon: 'fa fa-circle',
properties: [] },
'a4ac2e52-da95-412f-b431-499f2eff64da': { id: 'a4ac2e52-da95-412f-b431-499f2eff64da',
name: 'Gebäude',
icon: 'fa fa-industry',
properties: [ [Object], [Object] ] } ]