"Exploring the power of Angular's translation capabilities paired with

I'm currently working on translating a multistep form using Angular Translate and routing with ui-router.
Everything seems to be functioning properly except for one issue.
Below is the snippet of my code:
Translation Setup:

.config(function ($translateProvider) {

    $translateProvider.useStaticFilesLoader({
        prefix: 'App/i18n/locale-',
        suffix: '.json'
    });
    $translateProvider.preferredLanguage('ir');
})

Example of en.json and ir.json files:

{
        "wizardForm":{
       "stepOne":{
            "LABEL": "ثبت متقاضی",
            "NATIONALCODE": "کد ملی",
            "NAME": "نام",
            "FATHERNAME": "نام پدر",
            "GENDER": "جنسیت",
       }
}

en.json example:

{
"wizardForm":{
    "stepOne":{
        "LABEL": "Register Requester",
        "NATIONALCODE": "National Code",
        "NAME": "NAme",
        "FATHERNAME": "Father Name",
        "GENDER": "Gender",

    }
}

HTML Code Snippet:

            <label translate="wizardForm.stepOne.NATIONALCODE">

            </label>

The translation works perfectly in other sections, but not in the form. Am I overlooking something here?

javascriptjsonangularjsangular-translate

Answer №1

Your JSON code is not valid. It should be structured as follows:

{
    "wizardForm": {
        "stepOne": {
            "LABEL": "Register Requester",
            "NATIONALCODE": "National Code",
            "NAME": "NAme",
            "FATHERNAME": "Father Name",
            "GENDER": "Gender"
        }
    }
}

However, your current structure is incorrect with an extra ',' and a missing '}'. Here's how it looks:

{
    "wizardForm": {
        "stepOne": {
            "LABEL": "Register Requester",
            "NATIONALCODE": "National Code",
            "NAME": "NAme",
            "FATHERNAME": "Father Name",
            "GENDER": "Gender",

    }
}

You can validate your JSON code using tools like jsonlint

I hope this clarification helps!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combining NodeJS with PHP: A Seamless Integration

They say NodeJS is perfect for creating real-time chat applications and I'm eager to add a chat feature to my website. Right now, I have the design ready and need to work on the back-end code. However, when I use socket.io + express, things don' ...

javascriptphpnode.jsexpresssocket.io

The error message "Express Routing - Attempting to access property 'include' of undefined" is displayed when an

I am attempting to implement basic routing based on the user's selections on the first page. If the user picks 2 out of 3 options on the parent page, I want them to only see those two child pages and not the third. My strategy for the parent page was ...

javascriptnode.jsexpressroutes

Updating an SVG after dynamically adding a group with javascript: a step-by-step guide

Currently, I am working on a circuit builder project using SVG for the components. In my HTML structure, I have an empty SVG tag that is scaled to full width and height. When I drag components from the toolbar into the canvas (screen), my JavaScript functi ...

javascripthtmlsvgdomxhtml

Navigating to a particular page in ReactJS using a unique JSON identifier

I need to navigate to a particular page and display a specific JSON Object. If the JSON Object contains ID: 1, then it should redirect to localhost:300/users/1 and display the data of ID 1. I have also linked another JSON file that contains user addresses, ...

jsonreactjs

Storing information in a JSON file using WordPress AJAX

I've been working on a Wordpress Ajax function that fetches MySQL data as JSON and then logs it. However, instead of displaying the data directly on the page, I want to save it to a JSON file so that I can use it for various purposes. Here is an exam ...

jsonajaxwordpresshookfile-put-contents

What causes the data to flicker between the old and new values when the state is updated in ReactJS?

Currently, I am developing a single-page application that fetches data from the Star Wars API. In the character section of the project, the goal is to display characters per page with the ability to navigate to the next or previous pages by clicking on but ...

javascriptreactjsstate

What is the process for generating a new object by outputting key-value pairs?

I have an array that I'm trying to use to create a new object with specific keys and values. const arr = [ { name: 'ab', key: '584577', }, { name: 'cd', key: '344926', }, { name: &a ...

javascriptreactjs

The issue of dynamic content not being rendered on the root page when prerendering with Angular UI Router

I've successfully implemented prerender for all pages except the homepage of my website. For instance: http://www.example.com/?_escaped_fragment_= fails to display dynamic content. However, other pages like http://www.example.com/contact?_escaped_ ...

angularjsapache.htaccessangular-ui-routerprerender

Unable to delete a row from a dynamically generated table using jQuery

I am currently working on a project that involves creating a table based on results from a servlet. The table includes checkboxes, and when a checkbox is checked, a button at the bottom of the table should appear. This button calls a remove function to del ...

javascriptjquerycheckbox

What is the best way to search for documents that have all conditions met within a sub-array entry?

My rolesandresponsibilities collection document is displayed below: [{ "_id": { "$oid": "58b6c380734d1d48176c9e69" }, "role": "Admin", "resource": [ { "id": "blog", "permissions": [ " ...

javascriptnode.jsmongodbexpress

Automating the testing of Google Analytics for every event triggered with Selenium WebDriver

Currently, I am in the process of automating Google Analytics testing using Selenium WebDriver Java bindings on our website. The site is equipped with Google Analytics tracking events attached to key elements, and my goal is to confirm that clicking a spec ...

javajavascriptseleniumgoogle-analyticsselenium-webdriver

What is the reason behind installing both Typescript and Javascript in Next.js?

After executing the command npx create-next-app --typescript --example with-tailwindcss my_project, my project ends up having this appearance: https://i.stack.imgur.com/yXEFK.png Is there a way to set up Next.js with Typescript and Tailwind CSS without i ...

javascriptreactjstypescriptnext.js

How to Retrieve the Current Item in *ngFor Loop Using TypeScript in Angular 4

In my JSON file, I have an array containing 5 people. Each person in the array has a list of items associated with them. In my HTML code, I am using *ngFor to iterate over the people and display their names. Additionally, I want to display the total sum of ...

jsonangularloopstypescriptngfor

Stopping the execution of jQuery's .prop method does not result in any

Currently, I am trying to implement a feature where all radio buttons are unchecked one second after the page is loaded. I have come across an issue that has been causing me some frustration: alert('uncheck'); $("input[name=PreviousMailAID]:chec ...

javascriptjqueryexecution

Combining two JSON objects using Angular's ng-repeat

My goal is to extract data from two JSON files and present it in a table: The first file 'names.json' contains: [ { "name": "AAAAAA", "down": "False" }, { "name": "BBBBBB", ...

javascriptangularjsjsonangularjs-ng-repeat

Modifying the standard action of $state.go() in ui.router to implement automatic reloading

I am working on an Angular app that uses the ui.router package for URL routing. I want to implement a feature where if a user tries to navigate to a page they are already on, the router will reload that state instead of doing nothing. According to http://a ...

angularjsangular-ui-router

Trouble Arising from Making a POST Request to Spotify's API

I am currently developing a web application that allows users to search the Spotify Library, add songs to playlists, and then save those playlists to their Spotify Accounts. Almost everything is functioning correctly except for the saving of playlists thro ...

javascriptreactjsspotify

Is there a way to cache JSON in Twig?

Currently, I am using the Slim Framework along with Twig. The cache feature in Twig seems to function properly when I output HTML content. However, it fails to work when I try to output JSON: $response->getBody()->write(json_encode($data)); return ...

phpjsoncachingtwigslim

Permanently remove the span tag and any associated text from the HTML document

Currently, I am working on a project that involves numerous page numbers marked using the span class. Below is an example of this markup: <p>Cillacepro di to tem endelias eaquunto maximint eostrum eos dolorit et laboria estiati buscia ditiatiis il ...

javascriptjqueryhtmlcss

Webpack is having trouble resolving the specified file or directory

MyAPP: |--src 　　|--index.js 　　|--content.js |--webpack.config.js index.js : const React = require('react'); const ReactDom = require('react-dom'); const View = require('./content'); ReactDom.render(<View/ ...

javascriptnode.jsreactjswebpackjsx