What is the method for storing a JSON object path in a variable for use in a template?

Trying to fetch data from a lengthy path has proven challenging for me. I attempted to store the path in a variable and incorporate it into the template, but encountered some issues.

Could someone assist me with this?

Here is what I have tried:

My stored path : propBasePath:string = ${header.label.lacales}

When I attempt to log like this:

this.appProps = value;

console.log( this.appProps[this.propBasePath]['th_TH'] ) //this doesn't work!!
console.log( this.appProps.header.label.lacales.th_TH ) it works.

In the template:

<h1 style="font-size: 3rem">{{appProps[propBasePath].th_TH}}</h1>

Even the above method isn't successful. I realize that my approach to accessing the data might be incorrect. Can anyone please point out the mistakes?

I am also encountering this error 

ERROR ReferenceError: header is not defined

typescriptangular5mustache

Answer №1

It is not possible to retrieve a property from an object by passing the path as myObject['prop1.prop2.prop3'] because it will look for the property prop1.prop2.prop3 itself.

To address this issue, you can follow the example below to retrieve each property before navigating through the result and accessing the next property until you find the one you are seeking.

const obj = {
  prop1: {
    prop2: {
        prop3: 'The desired value'
    }
  }
};

const myPath = 'prop1.prop2.prop3';
const deepValue = myPath.split('.').reduce((obj, current) => obj[current], obj);
console.log(deepValue);

I trust that this illustration will be beneficial to you :)

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

Mapping a Tuple to a different Tuple type in Typescript 3.0: Step-by-step guide

I am working with a tuple of Maybe types: class Maybe<T>{ } type MaybeTuple = [Maybe<string>, Maybe<number>, Maybe<boolean>]; and my goal is to convert this into a tuple of actual types: type TupleIWant = [string, number, boolea ...

typescripttypescript3.0

What could be preventing the array from updating after subscribing to the service?

Attempting to fetch a list of movies from a Web API server on my localhost. The server does provide data when called with a Get request using the HttpClient module, but struggling to display it. MovieList Component import { Component, OnInit } from &apos ...

angulartypescript

Typescript's implementation of AngularJs provider

After creating an Angularjs provider in typescript, I found myself wondering if there might be a more efficient way to achieve the same outcome. My current provider serves as an abstraction for a console logger, with the interface primarily designed to s ...

angularjstypescript

Hold off on proceeding until the subscription loop has finished

Is there a way to verify that all results have been successfully pushed to nodesToExpand after running the for loop? The getFilterResult function is being called via an HTTP request in the nodeService service. for(var step in paths) { this.nodeSe ...

angulartypescriptrxjsobservable

The functionality of d3 transition is currently non-existent

I've encountered an issue with my D3 code. const hexagon = this.hexagonSVG.append('path') .attr('id', 'active') .attr('d', lineGenerator(<any>hexagonData)) .attr('stroke', 'url(#gradi ...

typescriptd3.js

Error encountered while rendering content in an Angular template

I'm currently integrating ngx-carousel into my application. Interestingly, the carousel works perfectly when I manually input the data. However, when trying to fetch the data from the server, it fails to work as expected. Take a look at my code snip ...

javascriptangulartypescriptcarouselowl-carousel

Creating a TypeScript generic record with specified keys

I need to validate in TypeScript whether an object contains the specified keys (from SingleShopColumns or MultishopColumns) and has a validations property that is an array of strings. I am using Record and generics, but any simple method of representing t ...

typescriptgenerics

Ways to extract values from a javascript hash map by exclusively incorporating an array

So here's the issue I'm encountering. Let's consider the following scenario: let surfaces: Map<any, any> = new Map([{"83.1" => Object}, {"84.1" => Object}]) let arr1 = ["83.1"] This is the desired o ...

javascriptarraysangulartypescripthashmap

typescript - transforming text into numerical values

newbalance = (Number(this.balance)) + (Number(this.pastAmount)); The result for my newbalance calculation is coming back as undefined, even though this.balance is 34 and this.pastAmount is 23. I've set this up in the controller and I'm trying t ...

javascripttypescriptcasting

The filtering feature in the Row Group table of PrimeNG controls is malfunctioning and causing issues with the Dropdown

Within my Angular project, I have integrated PrimeNG controls version 11.4.4. Utilizing the Table control, I've structured tabular data to display rows in a grouped fashion with collapsible functionality. I've recently introduced a textbox and d ...

angulartypescriptprimengprimeng-datatable

The functionality of two-way data binding seems to be failing in Angular 2

I encountered an issue in my Angular 2 application where I attempted to bind view data using ngModel, but it did not function as expected. event.component.html <div class="form-group"> <label for="comment">About Us:</label> ...

angulartypescriptdata-binding

What is the process for importing a map from an external JSON file?

I have a JSON file with the following configuration data: { "config1": { //this is like a map "a": [ "string1", "string2"], "b": [ "string1", "string2"] } } Previously, before transitioning to TypeScript, the code below worked: import ...

jsonreactjstypescript

What are the advantages of using interfaces in React?

Exploring Typescript's interface and its application in React has been an interesting journey for me. It seems that interfaces are used to define specific props that can be passed, acting as a form of protection against passing irrelevant props. My qu ...

reactjstypescript

Retrieve a specific subset of a union based on the class in a generic function

This question shares similarities with another post I made, but this time focusing on using classes instead of plain objects. class Exception1 extends Error { constructor(message: string, public arg1: string) { super(message); } } class Ex ...

typescripttypescript-generics

Error when running end-to-end tests in Angular CLI using the ng e2e

Recently, I created a new Angular 4 project using the Angular CLI. Upon running ng e2e, the sample end-to-end test worked flawlessly. However, when I later added a subfolder named services in the app folder and generated a service within it, the ng e2e com ...

angulartypescripttestingangular-cliangular-e2e

Tips for creating a TypeScript function that can accept an array of concatenated modifiers with the correct data type

Can I modify data using a chain of function modifiers with correct typing in TypeScript? Is this achievable? const addA = (data: {}) => { return { ...data, a: "test" } } const addB = (data: {}) => { return { ...data, ...

typescripttypescript-generics

Preserve Inference in Typescript Generics When Typing Objects

When utilizing a generic type with default arguments, an issue arises where the inference benefit is lost if the variable is declared with the generic type. Consider the following types: type Attributes = Record<string, any>; type Model<TAttribu ...

typescripttypescript-generics

What could be the reason for SVGR not producing a TypeScript declaration file in my esbuild setup?

I have been working on developing a custom SVG icon library using TypeScript. So far, the SVGR tool has been quite useful in creating components from SVG imports. However, I am encountering an issue with generating types that would allow me to pass attribu ...

typescriptsvgtypes.d.tsesbuild

Using TypeScript to style React components with the latest version of Material UI, version

Styled typography component accepts all the default typography props. When I include <ExtraProps> between styled() and the style, it also allows for extra props. const StyledTypography = styled(Typography)<ExtraProps>({}) My query is: when I r ...

reactjstypescriptmaterial-uistyled-componentsreact-typescript

Issues have arisen with compiling TypeScript due to the absence of the 'tsc command not found' error

Attempting to set up TypeScript, I ran the command: npm install -g typescript After running tsc --version, it returned 'tsc command not found'. Despite trying various solutions from Stack Overflow, GitHub, and other sources, I am unable to reso ...

typescriptnpmtsc