I have implemented multilanguage translation using https://github.com/mashpie/i18n-node in nodejs express, in the backend(nodejs) am passing translated json as response to use in components,
when i try it showing error as converted circular structure error
,
I would like to know how to display translated text/i18n inside component. Its working in index.ejs but dont know how to display in component.
var express = require('express');
var homeRouter= require('./routes/home');
var i18n = require("i18n");
var app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
i18n.configure({
locales:['en', 'zh'],
directory: __dirname + '/locales',
objectNotation: true
});
app.use(i18n.init);
app.use('/:lang', homeRouter);
//home.js
var express = require('express');
var router = express.Router();
var i18n = require('i18n');
router.get('/', function (req, res) {
i18n.setLocale(req,req.baseUrl.split('/')[1]);
res.render("index.ejs", {i18n: res})
}
//index.ejs
<div>
<h1><%=i18n.__("Welcome")%></h1>
<my-element translate="<%=i18n%>"> // passing the response of translation to component
</my-element>
</div>
//en.json
{
"Welcome": "Hi , Welcome to my site",
"list": "Discover the List of Travelling Cities"
}
//myElement.js
import { LitElement, html, css
} from "https://unpkg.com/@polymer/lit-element/lit-element.js?module";
export class Element extends LitElement {
static get properties() {
return {
translate: {type: Object}
}
constructor() {
super();
}
render(){
<p>${this.translate.list}</p> // not displaying
}
}