What is the best way to access a JSON object that has dashes in its key, returned from TranslateService?

Utilizing TranslateService from @ngx-translate/core to retrieve strings in the current language can be done as shown below:

this.translate
  .get(['hotline-card.email-subject', 'hotline-card.email-body'])
  .subscribe((strings) => {
    console.log('strings', strings);
    let subject = strings['hotmail-card.email-subject'];
    console.log('subject', subject);
  });

The resulting strings object resembles this structure (without quotes around keys in the console):

{
    "hotline-card.email-subject": "Some subject",
    "hotline-card.email-body": "Some body"
}

However, the value of 'subject' appears to be undefined. How can I properly access the translated string values?

Appreciate any insights.
Søren

Answer №1

Make sure to include double quotes when accessing the property with an unusual syntax error. The naming convention may seem a bit odd, but it's important for consistency.

let o = {
    "hotline-card.email-subject": "Some subject",
    "hotline-card.email-body": "Some body"

}

console.log(o['hotline-card.email-subject']);

In JavaScript, camel case naming convention is generally recommended. Here's a suggested structure you could use:

let  o = {
  "hotlineCard": {
    "email": {
      "subject": "Some subject",
      "body": "Some body"
    }
  }
}

console.log(o.hotlineCard.email.subject)

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

Eliminate duplicated partial objects within a nested array of objects in TypeScript/JavaScript

I'm dealing with a nested array of objects structured like this: const nestedArray = [ [{ id: 1 }, { id: 2 }, { id: 3 }], [{ id: 1 }, { id: 2 }], [{ id: 4 }, { id: 5 }, { id: 6 }], ] In the case where objects with id 1 and 2 are already grou ...

Optimal methods for integrating an Angular application within an AngularJS application

Our extensive AngularJS application was initially developed 3 years ago and continues to receive new feature updates. I am keen on ensuring that these new features are written using the latest version of Angular. Converting the entire codebase is not feasi ...

Removing an item from a specific index within the stepperArray in Angular

When preparing to make an API call, I encountered a challenge in removing the product that has a selectedPlan value of null. I am puzzled by why the code below is not functioning as expected. Is there a need to reassign the stepper array before passing it ...

Next.js not storing prop value in state variable

In my current project using Next.js, I am facing an issue with passing props from one component to another. These props include properties of a product such as name, ID, and quantity. This particular component is a Cart Component responsible for rendering ...

Access to Oracle Cloud exclusive to Angular Framework, omitting AngularJS and Mid-Tier

Exploring Oracle Cloud for the first time and embarking on a self-learning journey, I have developed an Angular application (not AngularJS) where I aim to upload images into my Oracle Cloud Object Storage Bucket. My goal is to accomplish this using only An ...

Utilizing Typescript to define key-value pairs within a structured form

I've been creating a form structure that's functioning smoothly, but I've encountered an interesting issue with field validation in the validation part. While my Visual Code is pointing out that 'required2' in the phone constant n ...

Unable to retrieve nested objects from HTTP Response

After receiving data from a HTTP Response, I am trying to access and display it in my template. However, despite storing the data into a component variable, I am encountering issues when trying to access specific properties of the object. { "files": [ ], ...

I am having trouble retrieving any data when using jQuery to post JSON data

I am struggling with some HTML and JavaScript code. Here is what I have: <html> <head> </head> <body> <script src="view/backoffice/assets/plugins/jquery/jquery-1.11.1.min.js" type="text/javascript"></sc ...

Retrieve a specific category within a method and then output the entire entity post adjustments

I need to sanitize the email in my user object before pushing it to my sqlite database. This is necessary during both user creation and updates. Here's what I have so far: export const addUser = (user: CreateUser) => { db.prepare(sqlInsertUser).r ...

Deliver files statically from Node.js while handling POST data

Currently, I am running a node.js server and utilizing node-static to serve static HTML files. var nodeStatic = require('node-static'); var file = new nodeStatic.Server('./public'); .. file.serveFile('/file.html', 500, {}, re ...

"Customizing API requests based on specific conditions with n

For a specific scenario, I need to login as an admin in one case and as a regular user in another. signIn$ = createEffect(() => this.actions$.pipe( ofType(AuthActions.signInRequest), exhaustMap(({ variables, redirectTo, hasAdmin }) =&g ...

What steps can be taken to ensure that ng-test unit testing does not utilize fdescribe() and fit()?

Picture this: an angular project being unit tested and continuously deployed. A developer completes a unit test for a component, using fdescribe() or fit() to run specific tests during the development process. However, in a moment of distraction, the deve ...

How can I efficiently utilize reusable code in Angular 2 to effectively showcase JSON data?

Just starting out with Angular 2 and looking to create reusable code efficiently. Is there a more concise way to write this code? answer1 = false; answer2 = false; answer3 = false; onClick1(){ this.answer1 = true; this.answer2 = false; this.a ...

What is the best way to extract JSON data from a string within a loop

Does anyone know why the parsed data is not printing out inside the loop when trying to parse a JSON string? Any help would be appreciated. Thanks! $code2 sample data: { p '5123': { p 'tmp': p '1', p 'name&a ...

Event that occurs when modifying a user's Firebase Authentication details

Monitoring User Actions with Firebase Authentication Within my application built using Angular, Node.js, and Firebase, I am seeking a method to track user events such as additions, modifications, and deletions. Is there a mechanism to recognize when a us ...

What is the best way to structure a nested JSON object to align with a nested HTML form layout?

Currently, I am working on a form that is structured using tabs, optional fieldsets, and various field elements in HTML. Below is a simplified representation of the structure: div.tab1 div.fieldset3 div.container308 div.container314 div.fieldset4 d ...

Develop an innovative Android application that interfaces with an ASP.NET WebAPI server to efficiently exchange intricate data structures

Currently, I have an Android App that is connected to my ASP.NET WebApi Server through Web Services. To send requests, I am utilizing AsyncHttpClient and for passing parameters, I am using RequestParams. However, I am facing an issue when trying to send a ...

What is the method to activate a click event on an input file when a button is clicked in Angular 2?

<input type="file" accept="image/*"> <button>Upload file</button> Is there a way to activate the input type=file click event using the button's click event in Angular 2? ...

Rectify errors in the JSON formatting of web API responses

Is there a method to catch the exception that arises when submitting incorrect JSON to a web API endpoint? I would prefer to return a meaningful error code instead of just 500, such as "Please fix your invalid JSON or face consequences." ...

The Angular 2 UI is unable to successfully connect with the controller through the API call

When attempting to call a URL from Angular 2 using http.get(), an exception is being thrown and the debugger in the controller is not being hit. Although I have checked the proxy and routing, they are the same as my existing projects. This new project is c ...